Comment soumettre un formulaire en utilisant onChange

Question

Je dois soumettre des valeurs de 3 options différentes dans un formulaire, mais je n'ai pas beaucoup d'expérience dans l'utilisation d'ajax. J'ai 3 différentes liste d'options/sélectionner des valeurs et chaque fois que l'une de l'option est sélectionnée, elle soumettra toutes les 2 autres options. J'ai seulement réussi à soumettre une seule option mais incapable de soumettre le reste des options. J'ai besoin de conseils d'experts, s'il vous plait. Je vous remercie!

Je ne peux toujours pas à travailler, mais voici une tâche plus spécifique que je suis en train de réaliser

<form method="POST" name="step01" action=""> 
    </select name="dayID" onChange="javascript:document.step01.submit()" size="1"> 
    <option value=" ">(please select a country) 
    <option value="1">1 
    <option value="2">2 
    <option value="3">3 

    <option value="4">4 
    <option value="5">5 
    <option value="6">6 
    <option value="7">7 
    </select> 

    </select name="monthID" onChange="javascript:document.step01.submit()" size="1"> 
    <option value=" ">(please select a country) 
    <option value="1">1 
    <option value="2">2 
    <option value="3">3 

    <option value="4">4 
    <option value="5">5 
    <option value="6">6 
    <option value="7">7 
    </select> 

    </select name="yearID" onChange="javascript:document.step01.submit()" size="1"> 
    <option value=" ">(please select a country) 
    <option value="1">1 
    <option value="2">2 
    <option value="3">3 

    <option value="4">4 
    <option value="5">5 
    <option value="6">6 
    <option value="7">7 
    </select> 
</form> 

avis qu'il ya 3 différents sélectionner des noms pour chacun. Je voudrais soumettre les 3 valeurs sans actualiser la page en utilisant la méthode onChange. Quelqu'un peut-il m'aider avec un extrait ajax facile?

Answer 1

Il semble que vous soumettez les variables de formulaire par la variable URL

url=url+"?"+name+"="+str; 

Il n'y a pas besoin d'insérer vos valeurs de formulaire par la fonction, vous pouvez les référencer dans le javascript. Dans votre exemple, vous n'en avez qu'un ajouté à la chaîne d'URL, si vous en voulez plus, c'est où ils iraient.

var url = "create_notice_request.php?name=" + document.myForm.name.value; 
ajaxRequest.open("GET", url, true); 
ajaxRequest.send(null); 

Mais vous devriez probablement en utilisant jQuery ajax pour faire ce beaucoup plus simple pour vous.

Voici un exemple de fonction AJAX complète qui renvoie la réponse du côté serveur.

function ajaxFunction(){ 
    var ajaxRequest; 
    try{ 
    // Opera 8.0+, Firefox, Safari 
     ajaxRequest = new XMLHttpRequest(); 
    } catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
       // Something went wrong 
       alert("You do not support JavaScript, sorry!"); 
       return false; 
      } 
     } 
    } 
    // Create a function that will receive data sent from the server 
    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4){ 
      document.getElementById("ordarea").innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var url = "return.php?order=" + document.myForm.order.value; 
    ajaxRequest.open("GET", url, true); 
    ajaxRequest.send(null); 
} 

jQuery serait tout simplement faire fonctionner ensemble plus compact et plus facile à lire, ainsi que vous donner toute la compatibilité du navigateur intégré.

121     $.ajax({ 
122     type: "GET", 
123     url: "tag.php", 
124     data: 'file=' + file + '&delete=' + todelete, 
125     success: function(){ 
126       //do something on completion 
128     } 
129     });