提交表格并检查是否完整，没有提交按钮
[英]submit form and check for complete without submit button
问题描述
我需要提交表单并检查其完成情况，而无需使用提交按钮。
我设法通过document.getElementById('logoForm').submit();提交了它document.getElementById('logoForm').submit(); ，但是现在如果表单提交成功，我需要调用一个函数。
我的表格：
<form name="logoForm" id="logoForm" method="POST" target="frame" enctype="multipart/form-data" action="includes/uplLogo.php">
提交功能：
$("#file1").change(function() {
document.getElementById('logoForm').submit();
//setTimeout(reloadImg, 2000) this was how i called the next function but its not safe at all
alert('submited');
});
我想在成功提交时调用的函数：
function reloadImg(){
var exists = document.getElementById('AppId').value;
$.post("includes/step_img.php", {id: exists}, function(data){
document.getElementById('imgDiv').innerHTML=data;
});
}
5 个解决方案
解决方案1
0 2014-09-11 17:17:59
您需要使用AJAX提交表单，否则将重新加载页面，从而使所有JS都无效。
这就是使用jQuery的方法
//bind to submit
$("#logoForm").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
reloadImg();
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
alert("ERROR");
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#logoForm").submit(); //Submit the FORM
解决方案2
0 2014-09-11 17:29:27
好吧，我得到它的工作！
$("document").ready(function(){
$("#file1").change(function() {
//bind to submit
$("#logoForm").submit(function(e)
{
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data: new FormData( this ),
processData: false,
contentType: false,
success:function(data, textStatus, jqXHR)
{
reloadImg();
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
alert("ERROR");
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
$("#logoForm").submit(); //Submit the FORM
});
});
function reloadImg(){
var exists = document.getElementById('AppId').value;
$.post("includes/step_img.php", {id: exists}, function(data){
document.getElementById('imgDiv').innerHTML=data;
});
}
但是，一旦我单击文件输入，我就必须重新加载页面以使其再次正常工作。有什么想法可以解决此问题吗？
解决方案3
0 2014-09-11 18:04:20
正如Regent所说：“纯JavaScript和jQuery的惊人结合”
如果首先要使用jquery，则需要包括jquery库，但我不知道您是否这样做。 另外，如果您正在使用jquery，请尝试使用所有jquery提供的代码来减少编写代码。
看到您的代码，我假设您有一个带有输入类型文件的表单。 当文件加载到该字段时，您要提交表单。 表单也以框架为目标，因此我假设您那里也有一个iframe元素。
要知道表单是否成功提交，可以使用ajax请求，但是在这种情况下，您将使用表单发送文件，因此您不能使用ajax请求。 您可以在响应中返回一个JavaScript代码，该代码将从iframe中执行，因此，您可以访问父元素以执行所需的操作
我已经稍微修改了您的代码以完全集成jQuery。
<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js"></script>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function () {
jQuery("#file1").change(function() {
jQuery('#logoForm').submit();
});
});
</script>
</head>
<body>
<form name="logoForm" id="logoForm" method="POST" target="frame" enctype="multipart/form-data" action="includes/uplLogo.php">
<input type="file" name="file1" id="file1" />
</form>
<iframe name="frame"></iframe>
</body>
</html>
然后在includes / uplLogo.php中，您需要返回javascript代码以执行类似的reloadImg（）
因此，在您的includes / uplLogo.php中，您可以拥有：
<?php
...
Your code here
...
if($all_is_ok) { ?>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js"></script>
<script language="javascript" type="text/javascript">
jQuery(document).ready(function () {
var id = jQuery('#AppId', window.parent.document).val();
jQuery.post("includes/step_img.php", {id: id}, function(data) {
jQuery('#imgDiv', window.parent.document).html(data);
});
});
</script>
<?php } ?>
我没有测试过它，因为我只是写了它，但我认为可以。
解决方案4
0 2014-09-12 11:26:26
尝试对此行添加注释：e.unbind（）;
还尝试在输入文件更改后立即添加日志，并验证是否可以在js控制台中看到该日志：
...
$("#file1").change(function() {
console.log('input file changed');
//bind to submit
...
解决方案5
0 2014-09-12 11:46:06
对于那些将来会需要的人来说，问题是：
$("#file1").change(function()
我只是将其更改为：
function changed()
并将其添加到onchange方法的输入中！
jQuery表单提交而无需单击提交按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.