Ajax, multiple form elements

[KillGorack]

New to Ajax, and BAD with the scripting below, bare with me.

 

Looking to select a drop down and push all values to the query string at the end.

 

Works perfectly with ONE select element. I just have no idea how to separate the variables. The code below is putting whatever form element I change into the first "str" variable.

 

if possible if one of the elements below is changed, all three of variables the data is placed in the query string in the correct place if that makes sense.

 

Form

<form>

  <table style="width:100%">

    <tr>
      <td style="width:85px;">
        Project
      </td>
      <td style="text-align:right;">
        <select name="fm_project" class="allform_select" onchange="showdata(this.value)">
          <option value="2" >ProjectA</option>
          <option value="1" >ProjectB</option>
          <option value="3" >ProjectC</option>
          <option value="0" SELECTED>Select One</option>
        </select>
      </td>
    </tr>

    <tr>
      <td style="width:85px;">
      Module
      </td>
      <td style="text-align:right;">
        <select name="fm_module" class="allform_select" onchange="showdata(this.value)">
          <option value="194" >B</option>
          <option value="195" >C</option>
          <option value="197" >D</option>
          <option value="196" >E</option>
          <option value="0" SELECTED>Select One</option></td>
        </select>
    </tr>

    <tr>
      <td style="width:85px;">
        Stage
      </td>
      <td style="text-align:right;">
        <select name="fm_stage" class="allform_select" onchange="showdata(this.value)">
          <option value="201" >BLUE</option>
          <option value="202" >GREEN</option>
          <option value="203" >RED</option>
          <option value="0" SELECTED>Select One</option>
        </select>
      </td>
    </tr>

  </table>
  
</form>

 Script

<script>
  function showdata(str, stra, strb) {
    var xhttp;
    if (str == "") {
      document.getElementById("graph_field").innerHTML = "";
      return;
    }
    if (stra == "") {
      document.getElementById("graph_field").innerHTML = "";
      return;
    }
    if (strb == "") {
      document.getElementById("graph_field").innerHTML = "";
      return;
    }
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("graph_field").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "printme.php?app=projects&ala=csajax&fm_project="+str+"&fm_module="+stra+"&fm_stage="+strb, true);
    xhttp.send();
  }
</script>

[requinix]

onchange="showdata(this.value)"

All that does is send the value of whatever element to the function. Not only will the function not know which element is calling it, the function needs all three values at the same time.

 

There are many ways to do this - personally I would pass the function not the values but the form itself. The function can then get the values from the form.

onchange="showdata(this.form)"

<script>
  function showdata(form) {
    var project = form.fm_project.value,
        module = form.fm_module.value,
        stage = form.fm_stage.value;

Then update the rest of the function to use those variable names. Because they're much more descriptive than stuff like "stra".

[KillGorack]

Amazing simple and quick, thanks!