Comment soumettre les éléments div corrects (pas le div qui est caché)?

Question

J'ai le code suivant qui fonctionne bien mais le problème est qu'il soumet toujours le premier div (article) même s'il est caché. Ma question est comment puis-je soumettre le formulaire et les éléments dans le formulaire dans le div qui est montré? (Si je choisis la musique RadioButton, je veux présenter les éléments d'entrée de la musique Div pas l'article div. Merci.

$(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

Désactiver les éléments d'entrée dans la zone div qui est caché. Lorsque les entrées sont désactivées, elles n'apparaissent pas dans le message.

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

Answer 2

Vous pouvez appeler $(...).remove() pour supprimer complètement les éléments de l'arbre DOM.

vous pouvez également définir les éléments <input> est désactivé, ce qui les empêchera d'être soumis, comme celui-ci:

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

EDIT: vous pouvez supprimer tous caché <input> éléments avant l'envoi du formulaire comme celui-ci:

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