How to submit a form using onChange

Question

i need to submit values of 3 different options in a form, but I'm very inexperienced in using ajax. I have 3 different list of options/select values and whenever one of the option is selected it'll submit all the other 2 options. I've only managed to submit a single option but unable to submit the rest of the options. I need some expert advice please. Thank you!

I still can't get it to work but here's a more specific task that i'm trying to achieve

<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>

notice that there is 3 different select names for each. I would like to submit all 3 values without refreshing the page using the onChange method. Can anyone help me with an easy ajax snippet?

Answer 1

It looks like you are submitting the form variables through the URL variable

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

There is no need to insert your form values through the function, you can reference them in the javascript. In your example you only have one appended to the URL string, if you want more that is where they would go.

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

But you should probably look into using jQuery ajax to make this a whole lot simpler for you.

Here is an example of a complete AJAX function that returns the response from the server side.

 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 would just make the whole function more compact and easier to read, as well as give you all the browser compatibility built in.

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                 });