提交表格并检查是否完整，没有提交按钮
[英]submit form and check for complete without submit button
问题描述
I need to submit a form and check for its completion without using the submit button. 
我需要提交表单并检查其完成情况，而无需使用提交按钮。
I managed to submit it trough document.getElementById('logoForm').submit(); 我设法通过document.getElementById('logoForm').submit();提交了它document.getElementById('logoForm').submit(); , but now I need to call a function if the form was successfully submitted. ，但是现在如果表单提交成功，我需要调用一个函数。
My form: 我的表格：
<form name="logoForm" id="logoForm" method="POST" target="frame" enctype="multipart/form-data" action="includes/uplLogo.php">
Submit function: 提交功能：
$("#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');
});
The function I want to be called on a successful submit: 我想在成功提交时调用的函数：
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
You need to submit the form using AJAX, otherwise you will have a page reload, rendering all your JS void. 您需要使用AJAX提交表单，否则将重新加载页面，从而使所有JS都无效。
This is how you could do it with jQuery 这就是使用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
ok i got it working!! 好吧，我得到它的工作！
$("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;
});
}
but once i click the file input i have to reload the page to make it work again... any ideas how to work around this? 但是，一旦我单击文件输入，我就必须重新加载页面以使其再次正常工作。有什么想法可以解决此问题吗？
解决方案3
0 2014-09-11 18:04:20
As Regent said: "Amazing mix of pure JavaScript and jQuery" 正如Regent所说：“纯JavaScript和jQuery的惊人结合”
if you will be using jquery first of all you will need to include the jquery library, I don't know if you did that. 如果首先要使用jquery，则需要包括jquery库，但我不知道您是否这样做。 Also, if you are working with jquery try to use all that jquery provide you to write less code. 另外，如果您正在使用jquery，请尝试使用所有jquery提供的代码来减少编写代码。
Seeing your code I am assuming that you have a form with a input type file into. 看到您的代码，我假设您有一个带有输入类型文件的表单。 And when a file is loaded to the field, you want to submit the form. 当文件加载到该字段时，您要提交表单。 Also the form is targetted to a frame, so I am assuming that you have an iframe element there too. 表单也以框架为目标，因此我假设您那里也有一个iframe元素。
To know if the form was successfully submitted you can use an ajax request but in this case your are sending files with the form, so you can not use an ajax request. 要知道表单是否成功提交，可以使用ajax请求，但是在这种情况下，您将使用表单发送文件，因此您不能使用ajax请求。 You can return a javascript code in your response that will be executed from into the iframe so, you can access to the parent element to do that you want 您可以在响应中返回一个JavaScript代码，该代码将从iframe中执行，因此，您可以访问父元素以执行所需的操作
I have modified a little bit your code to integrate jQuery at all. 我已经稍微修改了您的代码以完全集成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>
Then in your includes/uplLogo.php you need to return the javascript code to execute a similar of reloadImg() 然后在includes / uplLogo.php中，您需要返回javascript代码以执行类似的reloadImg（）
So, in your includes/uplLogo.php you could have: 因此，在您的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 } ?>
I have not tested it because I just wrote it but I think that works. 我没有测试过它，因为我只是写了它，但我认为可以。
解决方案4
0 2014-09-12 11:26:26
Try to comment this line: e.unbind(); 尝试对此行添加注释：e.unbind（）;
Try also to add a log just after the input file changes, and verify if you can see the log in the js console: 还尝试在输入文件更改后立即添加日志，并验证是否可以在js控制台中看到该日志：
...
$("#file1").change(function() {
console.log('input file changed');
//bind to submit
...
解决方案5
0 2014-09-12 11:46:06
for those who will need this in the future the problem was: 对于那些将来会需要的人来说，问题是：
$("#file1").change(function()
i just changed that to: 我只是将其更改为：
function changed()
and add it to input on onchange method! 并将其添加到onchange方法的输入中！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.