divをWebページに追加 - データを投稿するためにajaxを使用する

Question

ユーザーはドロップダウンフィールドから状態を選択し、その値をデータベースにポストし、その状態にある高等学校のリストを取得します。

名前とメールアドレスを尋ねるフィールドもあります。ユーザーが州を選択すると、適切な高等学校が検索され、それらの高等学校との新しいプルダウンが表示されます。ここで問題が発生しています。名前や電子メールなどの他のフィールドが重複しています。

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

}); 

私はこのためにjsfiddleを持っていないが、ここではそれが状態を選択した後に、それはすべてのフィールドを複製しないもののスクリーンショットです。

複製せず、高校のドロップダウンを表示し、そのまま他のすべてのフィールドを維持する最善の方法は何ですか？

Answer 1

私は、ajaxの返品には選択以上のものが含まれていると思われます。以下を試してください：

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

this exampleも参照してください。

Answer 2

これを解決する方法はいくつかあります。まず、バックエンドコードを変更して、データを送信しないフォームの部分だけを返すことができます。したがって、状態を送信した場合は、状態の後にのみフィールドを返します。これをajax=1のような余分なパラメータに依存させることもできるので、この同じバックエンドスクリプトを複数の方法で使うことができます。

他の方法は、したくないあなたは/するフィールドの部分を取り除くためにはjQueryを使用することです：

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

});