CODEWITHSUNDEEP
javascriptjqueryajax
user982124
user982124

Reputation: 4610

Javascript HTML Input AJAX Updating

I'm trying to setup an html form to perform an AJAX update when a user exits a field. I'm new to Javascript and AJAX so still working out syntax issues as I go. I've got to the point where the AJAX call is being made but the parameters are not being passed to the PHP script - I need to include multiple parameters.

Here's the html input that I'm trying to trigger the AJAX call from when the user exits this field:

<td><input type="text" class="form-control" id="storeManager" name="storeManager" onchange="editProject('this.value,1E1DDA14-D2C6-4FC8-BA5F-DBCCC7ABAF7F')" value="John Terry"></td>

I need to pass the value of the input field as well as the 2nd string (1E1DDA14-D2C6-4FC8-BA5F-DBCCC7ABAF7F) to the AJAX script. Here's the the script:

<script type="text/javascript">
function editProject(storeManager,uuid) {
   // Allocate an XMLHttpRequest object
   if (window.XMLHttpRequest) {
      // IE7+, Firefox, Chrome, Opera, Safari
      var xmlhttp=new XMLHttpRequest();
   } else {
      // IE6, IE5
      var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   // Set up the readyState change event handler
   xmlhttp.onreadystatechange = function() {
      if ((this.readyState == 4) && (this.status == 200)) {
         document.getElementById("storeManager").innerHTML=xmlhttp.responseText;
      }
   }
   // Open an asynchronous POST connection and send request
   xmlhttp.open("POST", "editProject.php", true);
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xmlhttp.send("storeManager="+storeManager+"&id="+uuid);
   return false;  // Do not follow hyperlink
}
</script>

From looking at my server logs I can see the editProject.php script is being called but from examining the HTTP POST data there's none of the expected POST data parameters. I suspect I might have a syntax issue in either the HTML input or the Script or both but have tried everything I can think of to make this work.

[if it's easier to use jQuery here I would love to see an example of how this works in my situation as I'm using teh jQuery library for the Twitter Bootstrap theme already. I'm new to jQuery as well but have no particular preference either way - just need to be able to call AJAX from an input field change and pass multiple parameters]

Upvotes: 0

Views: 90

Answers (1)

Vasiliy vvscode Vanchuk
Vasiliy vvscode Vanchuk

Reputation: 7159

try

<input type="text" class="form-control" id="storeManager" name="storeManager" onchange="editProject(this.value, '1E1DDA14-D2C6-4FC8-BA5F-DBCCC7ABAF7F')" value="John Terry">

onchange="editProject(this.value, '1E1DDA14-D2C6-4FC8-BA5F-DBCCC7ABAF7F')"

i've change quotes position

Upvotes: 2

Related Questions