Question

A have a price comparison website with a user input form in the sidebar. When a user starts using the form (ticking checkboxes, radio buttons etc.), I need to dynamically update the main content area (comparison table) of the page depending on what options the user is checking. Currently, I’m using AJAX to load the contents of a PHP file into a DIV in the content area. The PHP file just has a PHP query to pull content from a database and then output it. This isn’t a MySQL query, it’s a PHP call for a price comparison package I use, just using arguments like “+blue +widget min_price=10 max_price=200” etc. The MySQL query is then handled by the package.

When I hard code everything, it works fine, so that’s a good start. The problem is, I need to dynamically generate the query string depending on what the user is selecting on the form, then pass it to the PHP file during the AJAX call, to pull the right content into the DIV. The query string needs to update and the call needs to happen every time a user changes something on the form. So, for example, if a user ticks a box for the colour “blue”, I need to add “+blue” onto the string and resend the AJAX call. If they untick blue, I need to remove “+blue” and resend the AJAX call etc. etc.

I’m out of my depth at this point, so would appreciate any guidance on how to achieve something like this…

Currently, I have this:

The content div that gets updated is called “pbDiv”.

AJAX:

<script type="text/javascript">
function updateTable(str)
{
if (str=="")
  {
  document.getElementById("pbDiv").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("pbDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","http://MYSITE//pricebox.php?q="+str,true);
xmlhttp.send();
}
</script>

Form:

<form>
<select name="colour" onchange="updateTable(this.value)">
<option value="">Select a colour:</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
</form>

The PHP file just takes the string, and works fine. The problem, as you might have guessed, is that this form only works for one thing (colour). Using this.value just passes the choice of that dropdown. I don’t know how I could use multiple form items and build a string.

Answer 1

for each form item give one unique id, then for each item call updateTable function but dont pass the value while calling the function for example::

now modify your updateTable function like this

function updateTable(){
var str = 'color = '+ document.getElementById('colorField').value;
    str += 'something = '+ document.getElementById('somethingField').value;
//now carry on your ajax stuff
}