I am very new to JavaScript.

Here is my problem, I have a form with a "cp" field from which I retrieve the value in real time

This is achieved in a function.

Then I would like to use my result in the mondial relay widget to override the plugin default

After testing several things, I give you my last try which does not show me the "cp" variable in the second function.

So I would like to replace PostCode: "6000" with cp

<input  type="text" name="cp" value="" id="cp"  required="required" />
<javascript>
            var input ;
             //le code postal
$(document).ready(function(){
    $("#cp").keyup(function(){
       const cptest = document.querySelector('[name="cp"]');
console.log (cptest);
var input = document.getElementById("cp").value;
console.log (input);
return input;
    });
});

   //<![CDATA[
                console.log (input);
                // Initialiser le widget après le chargement complet de la page
                $(document).ready(function () {
                    // Charge le widget dans la DIV d'id "Zone_Widget" avec les paramètres indiqués
                  $("#Zone_Widget").MR_ParcelShopPicker({                      
                        // Selecteur de l'élément dans lequel est envoyé l'ID du Point Relais (ex: input hidden)
                        Target: "#Target_Widget",
                        // Selecteur de l'élément dans lequel est envoyé l'ID du Point Relais pour affichage
                        TargetDisplay: "#TargetDisplay_Widget",
                        // Selecteur de l'élément dans lequel sont envoysé les coordonnées complètes du point relais
                        TargetDisplayInfoPR: "#TargetDisplayInfoPR_Widget",
                        // BDTEST est utilisé pour les tests => un message d'avertissement apparaît
                       Brand: "BDTEST  ",
                        // Pays utilisé pour la recherche: code ISO 2 lettres.
                        Country: "BE",
                        
                        // Code postal pour lancer une recherche par défaut                        
                        PostCode: "6000",   
                        
                        // Activer l'affichage Responsive.
                        Responsive: true,
                       
                        // Fonction de callback déclenché lors de la selection d'un Point Relais
                       OnParcelShopSelected:                     
                    
                        AllowedCountries: "FR,BE,NL,LU",
                     
                    });
                });
               // ]]>
</javascript>

CodePudding user response：

There are a few issues with your code:

• when working with jQuery you should use its powers and not mix it with document.querySelector()
• input was declared locally within your jQuery event handler and was therefore invisible.in the global scope
• input is only defined properly after the first keyup event (which I changed to input as this also includes mouse based input actions)

var input ;
//le code postal
$(function(){
  $("#cp").on("input",function(){
    input=this.value;
    console.log(input);

// anything you want to happen to
// $("#Zone_Widget").MR_ParcelShopPicker(..)
// needs to happen here ...

  });
});

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<input  type="text" name="cp" value="" id="cp"  required="required" />