How to submit the correct div elements (not the div that's hidden)?

Question

Hello,

I have the following code working fine but the problem is that it always submits the first div (article) even though it's hidden. My question is how do I submit the form and the elements in the form in the div that's shown? (if I select Music radiobutton, I want to submit the input elements of the Music Div not the Article div. Thanks.

$(document).ready(function(){ 
    $("input[name$='itemlist']").click(function() {
        var selection = $(this).val();
        $("div.box").hide();
        $("#"+selection).show();
    });
});

 <!--radio buttons-->
 <div id="articleselection"><input name="itemlist" type="radio" value="article" /> Article/Book </div>
 <div id="musicselection"><input name="itemlist" type="radio" value="music" /> Music</div>


 <!--article div starts-->
 <div id="article" class="box">
 <table class="fieldgroup">
 <tr><td>Journal Title: <input id="JournalTitle" name="JournalTitle" type="text" size="60" class="f-name" tabindex="1" value="JournalTitle">
 </table>

 <table class="fieldgroup">
 <tr><td>Article Author: <input id="ArticleAuthor" name="ArticleAuthor" type="text" size="40" class="f-name" tabindex="2" value="<"ArticleAuthor"></td></tr>
 </table>
 </div>

 <!--music div starts-->
 <div id="music" class="box">
 <table class="fieldgroup">
 <tr><td>Music Title: <input id="Music Title" name="Music Title" type="text" size="60" class="f-name" tabindex="1" value="Music Title">
 </table>

 <table class="fieldgroup">
 <tr><td> Music Author: <input id="MusicAuthor" name="Music Author" type="text" size="40" class="f-name" tabindex="2" value="<"MusicAuthor"></td></tr>
 </table>
 </div>                 

Answer 1

You can call $(...).remove() to completely remove the elements from the DOM tree.

Alternatively, you can set the <input> elements to be disabled, which will prevent them from being submitted, like this:

$(...).find(':input').attr('disabled', true);

EDIT: You can remove all hidden <input> elements before the form is submitted like this:

$('form').submit(function() { 
    $(this).find(':input:hidden').remove();
});

Answer 2

Disable the input elements in the div box that is hidden. When inputs are disabled they do not appear in the post.

$(document).ready(function(){  
    $("input[name$='itemlist']").click(function() { 
        var selection = $(this).val(); 
        $("div.box").hide(); 
        $("input, select, textarea", $("div.box")).attr("disabled", true);
        $("#"+selection).show(); 
        $("input, select, textarea", $("#"+selection)).attr("disabled", false);
    });