用javascript提交动态创建的表单

Question

我正在尝试提交使用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>

我正在尝试重复上传一系列文件，有人看到为什么这行不通吗？

Answer 1

已经有一段时间了，但是我认为浏览器的安全设置通常不允许您以编程方式设置<input type =“ file” />的内容，从而导致在提交时出现一些安全异常。

Answer 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();

Answer 3

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

$('form.upload_form')

Answer 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();类的东西upload_form.submit().remove();