表单不提交动态生成的输入(jQuery)

Posted

技术标签:

【中文标题】表单不提交动态生成的输入(jQuery)【英文标题】:Form not submitting dynamically generated inputs (jQuery) 【发布时间】:2012-01-02 03:21:28 【问题描述】:

您好,我正在尝试为我的表单动态生成一些输入,但它没有发布生成的新输入,到目前为止,我一直在四处搜索,唯一能找到的就是将表单设为直接身体标签的孩子,并且在我的应用程序的设计中这是不可能的,所以有人可能知道会发生什么以及如何解决它?不,它不适用于.live()

html

 <form name="order" id="newOrder" action="../core/query.php" method="post">
        <input type="text" value="Search" id="itemSearch" class="search"/>
        <input type="hidden" id="itemAdd"/>
        <button type="button" class="boton" id="additem">Add</button> 
        <br>
        <div id="items"></div>
        <br>
        <button type="submit" class="boton" > Submit</button>
        <button type="reset" class="boton" style="float:right;"> Cancel</button>
        </div>
    </form>

javascript

  $('#additem').click(function()
if($('#itemAdd').val())
    var rawr = $('<div></div>')
    .css('display','none')
    .html(  '<br><table><td>'
            +currItem.label+'</td><td> Size '
            +currItem.size+'</td><td class="right">$'+currItem.price
            +'</td></table> <input type="hidden" name="contents[]" value="'
            +currItem.value+'"/>');
    var mhm = currItem.price;
    rawr.appendTo('#items').toggle(500).click(function()
        $(this).toggle(500,function()
            $(this).remove();
        );
        $('#total').fadeOut("fast",function()
            total = (parseFloat($(this).text())-parseFloat(mhm)).toFixed(2);
            $(this).text(total).fadeIn("fast");
        );
    );
    $('#total').fadeOut("fast",function()
        total = (parseFloat($(this).text())+parseFloat(mhm)).toFixed(2);
        $(this).text(total).fadeIn("fast");
        currItem=null;
    );
   
  );

所以基本上我使用带有远程 JSON 的 jQuery UI 自动完成功能,当按下 #addItem 按钮时,会创建一个包含一些文本的表格和一个带有数据库 ID 的隐藏输入,所有这些都可以正确显示,但是在提交时它们不是发布或序列化。

【问题讨论】:

&lt;br&gt; 应该是&lt;br/&gt; @3nigma w3.org/wiki/HTML/Elements/br 不,它不应该取决于文档类型。也与我的问题无关:/ 【参考方案1】:

表单元素需要一个“name”属性而不仅仅是一个“id”...否则它们的数据将不会被提交。

【讨论】:

如果您查看创建动态元素的代码,它们确实具有属性名称name="contents[]",其他所有东西的 id 都只是用于使用 jQuery 操作它们,我只对提交动态字段。 这正是我的问题。非常感谢!【参考方案2】:

可能是时候进行一些调试了。你确定它没有被发布?以下 jsFiddle 使用您的确切代码,提交表单后,您可以在 Firebugs NET 选项卡中看到发布的值。

http://jsfiddle.net/s6Umg/

使用 Firebug 中的 NET 选项卡检查您的真实示例,以查看这些值是否实际通过。数据发布后,访问数据可能会出现问题。您如何访问 query.php 文件中的 POST 数据?

【讨论】:

一个简单的print_r($_POST); 我用的是chrome,还有它的开发者工具,post 数据是贴出来的,不包含动态输入。我读过它与&lt;div&gt; 中的表单有关,当然我有一对。 我只是把它放在了jsFiddle 的三个 div 中,contents[] 数组仍然可以通过。在 Chrome 和 Firefox 中检查。你能看到 jsFiddle 和你在 Chrome 检查器中的实际代码之间的 POST 数据有什么不同吗? 可能是包含我的表单的php文件是通过ajax加载的?然后在其中创建新的输入...我在 jsFiddle 上嵌套了几个 div 及其工作... 是的,在 jsFiddle 中,内容字段实际上是通过的,而在我的代码中它们不是,php 也是这么说的。 您正在禁用输入。禁用的输入不会与表单一起提交。尝试改用 readonly 属性:)

以上是关于表单不提交动态生成的输入(jQuery)的主要内容,如果未能解决你的问题,请参考以下文章

动态生成表中的另一行后,JQuery函数不起作用[重复]

动态 HTML 表单生成

请教个vue动态生成form表单,表单里有单选项radio?

动态生成的字段和数据在提交后保留

如何使用jquery生成动态输入并通过id获取值

Javascript未从动态生成的表单提交数据