使用 javascript 提交动态创建的表单答案

【问题标题】：submitting dynamically created form with javascript使用 javascript 提交动态创建的表单
【发布时间】：2010-01-13 02:26:43
【问题描述】：

我正在尝试提交我用 html 字符串创建的表单，如下所示：

        var upload_form = "`<form action=\"uploadSong.php\" method=\"POST\" class=\"upload_form\" enctype = \"multipart/form-data\" target=\"upload_form\">`";

        upload_form += "<input type=\"hidden\" name=\"showId\" value=\"" + showId + "\" />";
        upload_form += "<input type=\"hidden\" name=\"band_abb\" value=\"" + band_abb + "\" />";
        upload_form += "<input type=\"hidden\" name=\"showDate\" value=\"" + date + "\" />";
        upload_form += "<input type=\"hidden\" name=\"city\" value=\"" + city + "\" />";
        upload_form += "<input type=\"hidden\" name=\"state\" value=\"" + state + "\" />";
        upload_form += "<input type=\"hidden\" name=\"venue\" value=\"" + venue + "\" />";
        upload_form += "<input type=\"hidden\" name=\"setNum\" value=\"" + setNum + "\" />";
        upload_form += "<input type=\"hidden\" name=\"songNum\" value=\"" + songNum + "\" />";
        upload_form += "<input type=\"hidden\" name=\"songId\" value=\"" + songId + "\" />";
        upload_form += "<input type=\"hidden\" name=\"showId\" value=\"" + showId + "\" />";
        upload_form += "<input type=\"hidden\" name=\"songName\" value=\"" + songName + "\" />";
        upload_form += "<input type=\"file\" name=\"upload[]\" value=\"" + songLoc + "\" />";
        upload_form += "<input type=\"hidden\" name=\"partOfASegue\" value=\"" + partOfASeuge + "\" />";
        upload_form += "<input type=\"hidden\" name=\"addInfo\" value=\"" + addInfo + "\" />";
        upload_form += "<input type=\"submit\" name=\"submit_btn\" value=\"submited\" />";
        upload_form += "</form>";

        $('#upload_form').html(upload_form);

        alert(upload_form);

        $('form .upload_form').submit();

        $('form .upload_form').remove();

我有一个像这样的 html 目标：

`<iframe id="upload_form"></iframe>

我正在尝试重复上传一系列文件，有人知道为什么这不起作用吗？

【问题讨论】：

删除 'form' 和 '.upload_form' 之间的空格没有帮助:(

标签： javascript html forms submit

【解决方案1】：

已经有一段时间了，但是我认为浏览器安全设置通常不允许您以编程方式设置的内容，导致提交时出现一些安全异常。

【讨论】：

为什么这被否决了？这是一个有效的担忧，尽管可能不是影响 OP 当前问题的原因

【解决方案2】：

我看到唯一不起作用的是提交调用的选择器。

你有：

$('form .upload_form').submit();
$('form .upload_form').remove();

应该是什么：

$('form.upload_form').submit().remove();

另外，从代码中的这一行开始：

$('#upload_form').html(upload_form);

我会推断你有一个 id 为 upload_form 的容器，但你的 iframe 也有相同的 id。我建议您更改其中一个 id，否则您可能会出现故障行为。

总结一下我的变化如下：

HTML：

<div id="uploadFormContainer"></div>
<iframe id="upload_form"></iframe>

Javascript：

var upload_form = ... /* your form string unchanged - excluded for brevity */

$('#uploadFormContainer').html(upload_form);

alert(upload_form);

$('form.upload_form').submit().remove();

【讨论】：

或者$('#upload_form').html(upload_form).children().submit().remove() ...如果你真的想要
我正在尝试将表单添加到中，这样会不正确吗？
哦，我的印象是你只是在 iframe 上发帖。在这种情况下，您无需重命名任何内容，只需更改选择器即可。并确保在添加表单之前 iframe 存在于 DOM 中。并且您在表单周围拥有所有正确的 HTML，例如： your form here
哎呀错过了结束但你明白了

【解决方案3】：

您的 jquery 选择器错误。您需要删除空格字符，如下所示：

$('form.upload_form')

【讨论】：

【解决方案4】：

您可能会考虑稍微重写代码以避免使用不必要的选择器。示例：

//assuming upload_form is defined as it is in the question

//build a DOM/jQuery node from the html string
upload_form = $(upload_form);

//set the contents of #upload_form to the upload form
$('#upload_form').empty().append(upload_form);

//submit the form
upload_form.submit();

//delete the form
upload_form.remove();

正如其他人所提到的，您也可以链接 jQuery 调用，并使用类似upload_form.submit().remove();

【讨论】：