Jump to content

Ajax, multiple form elements


KillGorack

Recommended Posts

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>
Link to comment
Share on other sites

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".
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.