Changing dropdown value based on AJAX Response

Question

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!

Its a cop out, so I'll post it as a comment instead of an answer. Your life would be so much easier if you used jQuery instead. — profitphp
– profitphp, Commented Feb 1, 2011 at 4:53

Alfred · Accepted Answer · 2011-02-01 05:02:15Z

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).

Luke Dennis · Accepted Answer · 2011-02-01 04:54:31Z

0

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";
}

answered Feb 1, 2011 at 4:54

Luke Dennis

14.6k17 gold badges60 silver badges70 bronze badges

1 Comment

Sara Over a year ago

Thank you! That did the trick. I appreciate it! Next time though I think I will look into jQuery ;)

Ben · Accepted Answer · 2011-02-01 04:53:43Z

0

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?

answered Feb 1, 2011 at 4:53

Ben

57.6k50 gold badges187 silver badges229 bronze badges

Collectives™ on Stack Overflow

Changing dropdown value based on AJAX Response

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related