在 jQuery 中克隆或向表单添加输入不会提交到 Firefox 中的 PHP

Posted 2023-05-08

【中文标题】在 jQuery 中克隆或向表单添加输入不会提交到 Firefox 中的 PHP

【英文标题】：Cloning or adding an input to a form in jQuery does not submit to PHP in Firefox

【发布时间】：2010-10-01 11:51:58

【问题描述】：

$('#images_upload_add').click(function()
   $('.images_upload:last').after($('.images_upload:last').clone().find('input[type=file]').val('').end());        
);

使用此代码附加文件输入不会在 firefox 中上传文件。

还有

$('#image_server_add input[type=button]').click(function()
    var select = $(this).siblings('select').find(':selected');
    if(select.val())
        $('#image_server_add').before('<tr class="images_selection"><td><input type="button" value="Delete"></td><td class="main">'+select.html()+'<input type="hidden" value="'+select.html()+'" name="images_server[]"/></td></tr>');
    
)

也不会将值上传到 $_POST

我找不到任何说明为什么这在文档中不起作用，这在 IE 中有效，但在 Firefox/WebKit 中无效

为什么这些示例不能正确上传表单值？

【参考方案1】：

页面上的标记被破坏了。

表单是基于表格的布局，不是我选择的，表单声明位于 tr 内。

我将表单声明移动到表单输入的父 td，现在它可以工作了。

考虑到渲染引擎会正确提交放置不当的输入，但尝试使用 jQuery/javascript 添加这些输入，这是一个有趣的结果？在 Firefox/WebKit 中不能进入同一个地方。

我认为这与 javascript 所做的 dom 操作有关，以及它对块级元素的要求可能更加严格。

如果对我的发现有更多的注释/猜想，我们将不胜感激。

【讨论】：

是的！感谢您不再存在的用户！我基本上在我的 HTML 中找到了这个：<span><form></span>...</form>。 FF 在看到 </span> 时会关闭表单，但现有的表单元素仍将是该表单的一部分，但新的（通过 JS 添加的）不会。

【参考方案2】：

如果您创建一个新输入而不是克隆一个现有输入，您是否遇到同样的问题？

您是要更改克隆输入的名称以避免名称冲突，还是使用数组样式名称（例如file[]）？

将所选选项的标记添加到隐藏输入的目的是什么？

为了好玩，你试过用.clone(true)吗？

【参考方案3】：

哇！有时 jQuery 实际上可能过于密集而无法阅读。如果我们能看到您的标记，也会有所帮助。 在这里暗中刺伤，因为我猜你想做什么。

您不能以编程方式在文件字段中输入文件名并将其上传到服务器。那会很危险。

也许我找错树了？

【讨论】：

不是错误的树 :) 不过，这不是我想要做的，我只是添加更多输入字段，以便用户可以选择多个选项或上传多个图像

我认为浏览器不支持多个文件上传，这就是为什么有这么多基于Flash的解决方案来实现这一点。不过可能与您的一般问题无关。

可以，但是如果我直接在 html 文件中创建两个文件输入而不是克隆一个，它可以工作。

【参考方案4】：

也许不是在提交表单时添加元素，而是将元素放入，但使用默认值。

然后，当单击按钮时，使用正确的值填充该元素。

我只是说，因为当您单击提交时，可能为时已晚，添加的元素与表单一起提交。

【参考方案5】：

我从谷歌搜索到了这个部分，搜索了一个类似的问题。

对我来说，我可以通过退后一步来解决问题 -

以示例形式：

    <table>
<form method="post">
<tr>some content <input type="text" name="test"> </tr>
</form>
</table>

由于某种原因，这将在 Internet Explorer 中工作，但它实际上是无效的 html。 将表单标签移到表格外，如下所示：

<form method="post">
    <table>
<tr>some content <input type="text" name="test"> </tr>
</table> 
</form>

然后它就会起作用。

输入会以这种方式正常工作（甚至是动态），我在表单工作时遇到了很多麻烦，直到您插入更多输入或表单元素 - 只有原始元素会提交，这很难跟踪.