dynamic form using jquery ajax load posting to the same form

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">
 &l开发者_JS百科t;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?

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