dynamic form using jquery ajax load posting to the same form

Question

I want to load form dynamically using following : 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); }
 });
});

Loading the form is fine, but if users change the select box to option B and submit the form they will submit the form A as well as from B.

How do I unload form A when users already select form B so that they dont submit content of form A?

Answer 1

why not have two forms and then display the one you want using your jquery (or just straight javascript) onchange of select element?