append div 到网页 - 使用 ajax 发布数据

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 .

Answer 2

There are a couple of ways you can fix this. First, you could simply change the backend code to only return the portions of the form that you do not send data for. So if you send a state, only return the field(s) after state. You could also make this dependent on an extra parameter, such as ajax=1 , so you can use this same backend script multiple ways.

The other way is to use jQuery to strip out the parts of the field you want/don't want:

$(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).filter("#high-schools").html());
      }
    });
    return false;
  });

});