Passing multiple variable to AJAX

I have a php file which I now have passing a variable to an Ajax script which will then execute a MySQL call based on the variable passed. The call to the Ajax script is triggered when a change is made to a <select> field. When a change is made the value of the <select> field is passed to Ajax which gets the data record from the database, displays it on the screen, makes an arbitrary change to a data field and updates the record. So far, it's just a proof of concept to show that I can manipulate the database through Ajax... and it works.

Now, I am trying to figure out how to pass two (or more) variables to Ajax so I can update the record determined by a record_id (passed from the <select> field), with another value determined by the script.

What I have so far:
In the main script:

<script>
function showUser(str) {
 if (str == "") {
 document.getElementById("txtHint").innerHTML = "";
 return;
 } else {
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange = function() {
 if (this.readyState == 4 && this.status == 200) {
 document.getElementById("txtHint").innerHTML = this.responseText;
 }
 };
 xmlhttp.open("GET","getuser.php?q="+str,true);
 xmlhttp.send();
 }
}
</script>
... 
echo "
<form>
<select name='users' onchange='showUser(this.value)'>
 <option value=''>Select a person:</option>
";
$sql = "select * 
from companies 
order by company_name";
$result = query($sql,$conn) or die(mysql_error());

while($newArray = fetch_array($result)){
 $company_id = $newArray['company_id'];
 $company_name = stripslashes($newArray['company_name']);
 echo "<option value='$company_id'>$company_name</option>";
}
echo "
 </select>
</form>
";

getuser.php:

$sql="SELECT * FROM companies WHERE company_id = '".$q."'";
$result = query($sql,$conn) or die(mysql_error());

echo "<table>
<tr>
<th>Company</th>
<th>State</th>
</tr>";
// while($newArray = fetch_array($result)){
while($row = fetch_array($result)) {

 echo "<tr>";
 echo "<td>" . $row['company_name'] . "</td>";
 echo "<td>" . $row['company_state'] . "</td>";
 echo "</tr>";
}
echo "</table>";
$new_name = "aaaa_". $company_name;
$sql="UPDATE pbs_companies SET company_name = '$new_name' WHERE company_id = '".$q."'";
echo "SQL: $sql<br/>";
$result = query($sql,$conn) or die(mysql_error());

This all works as expected. What I am wondering about is: how do I pass a variable (or multiple variables) to manipulate the data, i.e. instead of the hard-coded "aaaa_"

Thanks

const mySelect = document.querySelector('#mySelect'); mySelect.addEventListener('change', function(event) { const selection = event.target.value; const user = document.querySelector('#someDiv').getAttribute('data-user'); const other = document.querySelector('#otherDiv').id; const formData = new FormData; formData.append('selection', selection); formData.append('user', user); formData.append('otherInfo', other); // AJAX POST request here... // note: I use es6 const syntax, this can be replaced with var. }

Passing multiple variable to AJAX

SeanF

NickMNS

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week