[英]submitting dynamically created form with javascript
I'm attempting to submit a form I've created out of an html string, like this: 我正在尝试提交使用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();
And I have a target for the html like this: 我有这样的html目标:
`<iframe id="upload_form"></iframe>
I'm trying to repetitively upload a series of files, Does anyone see why this wouldn't work? 我正在尝试重复上传一系列文件,有人看到为什么这行不通吗?
已经有一段时间了,但是我认为浏览器的安全设置通常不允许您以编程方式设置<input type =“ file” />的内容,从而导致在提交时出现一些安全异常。
The only thing i see that wouldn't work is the selector for the submit call. 我唯一看不到的是提交调用的选择器。
you have: 你有:
$('form .upload_form').submit();
$('form .upload_form').remove();
what it should be: 应该是什么:
$('form.upload_form').submit().remove();
Also, from this line in your code: 另外,从代码中的这一行开始:
$('#upload_form').html(upload_form);
I would infer that you have a container with the id of upload_form
, but your iframe also has the same id. 我推断您有一个ID为
upload_form
的容器,但您的iframe也具有相同的ID。 I suggest you change one of the id's otherwise you might get glitchy behaviour. 我建议您更改ID之一,否则可能会出现故障现象。
To summarize my the changes would look like: 总结一下我所做的更改将如下所示:
HTML: HTML:
<div id="uploadFormContainer"></div>
<iframe id="upload_form"></iframe>
Javascript: 使用Javascript:
var upload_form = ... /* your form string unchanged - excluded for brevity */
$('#uploadFormContainer').html(upload_form);
alert(upload_form);
$('form.upload_form').submit().remove();
Your jquery selector is wrong. 您的jquery选择器错误。 You need to remove the space character, like so:
您需要删除空格字符,如下所示:
$('form.upload_form')
You might consider rewriting your code a bit to avoid the use of needless selectors. 您可能会考虑重写代码以避免使用不必要的选择器。 Example:
例:
//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();
As others have mentioned, you can chain the jQuery calls as well, and use something like upload_form.submit().remove();
正如其他人所提到的,您也可以链接jQuery调用,并使用诸如
upload_form.submit().remove();
类的东西upload_form.submit().remove();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.