динамическая форма с использованием JQuery AJAX нагрузки в той же форме

Question

Я хочу загрузить форму динамически, используя следующее: HTML:

<div id="add_new" style="display:none">
<form id="addrecord_form" name="addrecord_form" method="post" action="">
    <label>Type:</label>
    <select name="type_select" id="type_select">
 <option value="A">Type A form </option>
 <option value="B">Type B form </option>

Javascript:

 $("#type_select").change(function() {
 $("#add_new_field").html(""); 
 if ( $(this).val() == "A") {  
    $.get("/form_type_a", function(data) {
        $("#add_new_field").load(data);
    });
}
if ( $(this).val() == "B") {
    $.get("/form_type_b", function(data) {
        $("#add_new_field").load(data);
    });
}

$('#addrecord_form').submit(function(eve)
{
    eve.preventDefault(); 
    $.ajax({url: "submit_a_record",
    type: "POST",
    dataType: "html",
    data: $('#addrecord_form').serialize(),
    success: function(html) { processForm(html); }
 });
});

Загрузка формы в порядке, но если пользователи изменят поле выбора на вариант B и отправят форму, они отправят форму A, а также B.

Как выгрузить форму A, когда пользователи уже выбирают форму B, чтобы они не отправляли содержимое формы A?

Answer 1

почему бы не иметь две формы, а затем отобразить ту, которую вы хотите, используя jquery (или просто прямой javascript) замену элемента select?