JavaScript/Ajax: remplir un champ caché

Question

Hé, vous les programmeurs m'ont été extrêmement utiles dans le passé, alors j'ai pensé que je poserais ma question ici, encore une fois. C'est probablement une solution simple, mais je suis nouveau pour JavaScript et Ajax. Ce que je travaille, c'est Ajax qui écrit dans un responseText indiquant "LOCATION NOT FOUND" s'il n'est pas trouvé quand un champ de texte perd le focus. Ce que j'aurais aimé faire, c'est d'empêcher le formulaire de se soumettre si ce texte est présent. Je sais comment empêcher le formulaire de soumettre si un champ caché a la valeur LOCATION NOT FOUND, donc je pensais qu'avoir JavaScript remplir le champ caché avec le responseText pourrait être la solution la plus facile? Je ne sais pas si cela va fonctionner ou comment s'y prendre.

Voici ma position actuelle JS:

<script type="text/javascript"> 
    <!-- 
    function newXMLHttpRequest() 
    { 
    var xmlreq = false; 
    if (window.XMLHttpRequest) 
    { 
    xmlreq = new XMLHttpRequest(); 
    } 
    else if (window.ActiveXObject) 
    { 
    try 
    { 
    xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    catch (e2) 
    { 
    alert("Error: Unable to create an XMLHttpRequest."); 
    } 
    } 
    return xmlreq; 
    } 
    function getLocation(locationrouting) 
    { 
    var getLocation= newXMLHttpRequest(); // sending request 
    getLocation.open("GET", "/PP?PAGE=GETLOCATIONNAME&ROUTINGNUM=" + locationrouting, false); 
    getLocation.send(null); // getting location 

    var dv = document.getElementById("location_div"); 

    if (getlocation.responseText === 'LOCATION NOT FOUND') 
    { 
     dv.style.color = "red"; 
    } 
     else 
    { 
     dv.style.color = "black"; 
    } 
    dv.innerHTML = getLocation.responseText; 
    } 
    //--> 
</script> 

Voici la partie applicable du formulaire:

<form name="locationform" id="locationform" action="/PP?PAGE=POSTADDLOCATION" method="post"> 
     <tr> 
     <td class="ajax_msg"> 
      <div id="location_div">/div>  
     </td> 
     </tr> 
     <tr> 
    <td> 
     <div class="column1" id="locationrouting_div"> 
      <p class="label_top"> 
*Routing Number</p> 
     <p class="field_top"> 
        <input type="text" id="locationrouting" name="locationrouting" size="28" maxlength="9" onblur="getLocation(this.value);" /></p> 

    ... 

Merci à l'avance!

Answer 1

Si vous ne voulez pas que le formulaire soit soumis si l'emplacement n'est pas trouvé, le plus simple serait probablement d'interroger le serveur avant de le soumettre. Ceci est beaucoup plus facile à implémenter et à utiliser que de vérifier l'état d'une requête qui a pu ou ne s'est pas produite précédemment via ses effets secondaires. : D

Answer 2

En option, vous pouvez créer la variable javascript var isSubmitAllowed = true;, définir cette variable sur false lorsque l'emplacement est introuvable et vérifier cette variable pour empêcher la soumission de formulaire.

Quelque chose comme:

<script type="text/javascript"> 
    <!-- 
    var isSubmitAllowed = true; 

    function newXMLHttpRequest() 
    { 
    var xmlreq = false; 
    if (window.XMLHttpRequest) 
    { 
    xmlreq = new XMLHttpRequest(); 
    } 
    else if (window.ActiveXObject) 
    { 
    try 
    { 
    xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    catch (e2) 
    { 
    alert("Error: Unable to create an XMLHttpRequest."); 
    } 
    } 
    return xmlreq; 
    } 
    function getLocation(locationrouting) 
    { 
    var getLocation= newXMLHttpRequest(); // sending request 
    getLocation.open("GET", "/PP?PAGE=GETLOCATIONNAME&ROUTINGNUM=" + locationrouting, false); 
    getLocation.send(null); // getting location 

    var dv = document.getElementById("location_div"); 

    if (getlocation.responseText === 'LOCATION NOT FOUND') 
    { 
     dv.style.color = "red"; 
     isSubmitAllowed = false; 
    } 
     else 
    { 
     dv.style.color = "black"; 
     isSubmitAllowed = true; 
    } 
    dv.innerHTML = getLocation.responseText; 
    } 
    //--> 
</script> 

Puis, en Form tag vous pouvez ajouter onSubmit gestionnaire d'événements qui renverra isSubmitAllowed valeur:

<form name="locationform" id="locationform" action="/PP?PAGE=POSTADDLOCATION" method="post" onSubmit="return isSubmitAllowed">