Question

我有以下代码正常工作，但问题是它总是提交第一个div（文章），即使它是隐藏的。我的问题是如何在显示的div中提交表单中的表单和元素？（如果我选择Music radiobutton，我想提交Music Div的输入元素而不是Article div。谢谢。

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

禁用隐藏的div框中的输入元素。当输入被禁用时，它们不会出现在帖子中。

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

您可以调用$(...).remove()来完全删除DOM树中的元素。

或者，您可以将<input>元素设置为禁用，这样可以阻止它们被提交，如下所示：

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

编辑：您可以在提交表单之前删除所有隐藏的<input>元素，如下所示：

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

如何提交正确的div元素（不是隐藏的div）？

2 个答案: