Question

The user selects a state from a drop-down field, then ajax posts that value to the database, to retrieve a list of high schools located within that state.

I also have other fields asking for their name and email address. Once the user selects the state, it retrieves the appropriate high schools and displays a new drop-down with those high schools, and here is where I am having a problem, it duplicates the other fields: name and email.

html

<form>
<div id="inquiry-form">
  name:
  email:
  state drop-down field
</div>

<div id="high-schools">
  high school drop-down field
</div>

submit button
</form>

js

$(document).ready(function() {

  $('#state').bind('change', function() {
    var form_data = {
      state : $('#state').val(),
      ajax : '1'
    };

    $.ajax({
      url: '/recruiter-card/index.php/inquiry/index',
      type: "POST",
      data: form_data,
      success: function(msg) {
        $("#high-schools").html(msg);
      }
    });
    return false;
  });

});

I don’t have a jsfiddle for this, here is a screenshot of what it does after selecting a state, it duplicates all the fields.

What is the best way of displaying the high school drop-down and keeping all the other fields intact, without duplicating?

Answer 1

I suspect, that the ajax return contains more than only the select. Try following:

...
  success: function(msg) {
    $("#high-schools").html($(msg).find('#high-schools').html());
  }
});
...

Also see this example.