CODEWITHSUNDEEP
phpjavascriptmysqlajax
Sara
Sara

Reputation: 59

Changing dropdown value based on AJAX Response

I'm not very proficient with AJAX but by all accounts I think this should be working. What it's supposed to do is the user selects a name from a dropdown, and another dropdown (populated from a mysql database with PHP) automatically selects the associated object. So let's say you had:

Name: Susie / Michael / Karen

Favorite Fruit: Apple / Orange / Mango / Guava

by selecting Susie, it would autoselect "Orange" since that is her favorite fruit in the database.

I've got this code for the Ajax to change the dropdown to the associated "fruit".

 <script type="text/javascript">
function getAff(str)
{
if (str=="NULL" || str=="")
  {
  document.getElementById("fruit").value="";
  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)
    {
    alert(xmlhttp.responseText);

 var indexVal = document.getElementById("fruit").length;
  for(x=0; x<indexVal;x++) {
  if (document.getElementById("fruit").options[x].value == xmlhttp.responseText) {
   document.getElementById("fruit").selectedIndex = x;
   //alert(xmlhttp.responseText);
   }
  }
    }
  }
xmlhttp.open("GET","getaff.php?q="+str,true);
xmlhttp.send();
}
</script>

I've made sure by an alert that it's pulling the right values, though I've commented that out here.

The one snaggle is that the dropdown box is NOT changing. I don't know if that's because it's generated via php? It shouldn't be, though. The value of each dropdown selection is the name of the fruit which is being pulled from the database. I've also alerted to myself the indexvalue amount to see if it's even reading the dropdown, and I'm getting the correct number. But no changing of the dropdown. Any thoughts? Thank you!

Upvotes: 0

Views: 2184

Answers (3)

Alfred
Alfred

Reputation: 61771

I'm not very proficient with AJAX but by all accounts I think this should be working

If you aren't familiar with javascript I don't think you should be writting plain javascript(is hard). Use a framework like for example jquery which is very popular and makes these mundane tasks easy as pie.

What it's supposed to do is the user selects a name from a dropdown, and another dropdown (populated from a mysql database with PHP) automatically selects the associated object.

You should a look the following sections:

  • How Jquery works: to get you started.
  • select(): Bind an event handler to the "select" JavaScript event, or trigger that event on an element.

  • .load: : Load data from the server and place the returned HTML into the matched element.

  • Jquery.get/jQuery.getJSON(): Load data from the server using a HTTP GET request / Load JSON-encoded data from the server using a GET HTTP request.

  • Jquery.post: Load data from the server using a HTTP POST request.

When you read/skim these sections you should be able to write that without any effort(plus a lot more thanks to the incredible John Resig).

Upvotes: 2

Luke Dennis
Luke Dennis

Reputation: 14550

Try setting the selected value on the <option> tag, instead of the <select>, and trimming whitespace from the response:

if (document.getElementById("fruit").options[x].value == xmlhttp.responseText.trim()) {
    document.getElementById("fruit").options[x].selected = "selected";
}

Upvotes: 0

Ben
Ben

Reputation: 57209

A few things to try:

  • Are you comparing the value, or the innerHTML?

  • Are you absolutely sure the value (or the innerHTML) matches your response?

Upvotes: 0

Related Questions