div an Webseite anfügen - Ajax verwenden, um Daten zu posten

Question

Der Benutzer wählt einen Status aus einem Dropdown-Feld aus, dann sendet ajax diesen Wert an die Datenbank, um eine Liste der Highschools innerhalb dieses Status abzurufen.

Ich habe auch andere Felder fragen nach ihrem Namen und E-Mail-Adresse. Sobald der Benutzer den Status ausgewählt hat, ruft er die entsprechenden Highschools ab und zeigt ein neues Dropdown mit diesen Highschools an. Hier tritt ein Problem auf, das die anderen Felder dupliziert: Name und E-Mail.

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

}); 

ich dafür keine jsfiddle haben, hier ist ein Screenshot von dem, was es nicht nach einen Zustand auszuwählen, ist es, alle Felder dupliziert.

Was ist der beste Weg, um die High-School-Drop-down anzuzeigen und alle anderen Felder intakt zu halten, ohne zu duplizieren?

Answer 1

Ich vermute, dass die Ajax-Rückgabe mehr als nur die Auswahl enthält. Versuchen Sie folgendes:

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

Siehe auch this example.

Answer 2

Es gibt ein paar Möglichkeiten, wie Sie das beheben können. Zunächst können Sie einfach den Back-End-Code so ändern, dass nur die Teile des Formulars zurückgegeben werden, für die Sie keine Daten senden. Wenn Sie also einen Status senden, geben Sie nur die Felder nach dem Status zurück. Sie können dies auch von einem zusätzlichen Parameter wie ajax=1 abhängig machen, so dass Sie dasselbe Backend-Skript auf mehrere Arten verwenden können.

Der andere Weg ist jQuery zu verwenden, um die Teile des Feldes Streifen aus Sie/wollen nicht wollen:

$(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; 
    }); 

});