Question

我需要提交表单并检查其完成情况，而不使用提交按钮。

我设法通过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;
            });

}

Answer 1

您需要使用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

Answer 2

好吧，我让它工作了!!

$("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;
    });
}

但是一旦我点击文件输入，我必须重新加载页面以使其再次工作...任何想法如何解决这个问题？

Answer 3

正如Regent所说：“纯粹的JavaScript和jQuery的混合”

如果您将首先使用jquery，则需要包含jquery库，我不知道您是否这样做。此外，如果您正在使用jquery尝试使用所有jquery为您提供更少的代码。

看到你的代码我假设你有一个带有输入类型文件的表单。当文件加载到字段时，您要提交表单。此外，表单还是以框架为目标，所以我假设你也有一个iframe元素。

要知道表单是否已成功提交，您可以使用ajax请求，但在这种情况下，您正在使用表单发送文件，因此您无法使用ajax请求。您可以在响应中返回将从iframe执行的javascript代码，这样您就可以访问父元素来执行您想要的操作

我已经修改了一些代码来集成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 } ?>

我没有测试过它，因为我刚刚编写了它，但我觉得它很有用。

Answer 4

尝试评论此行：e.unbind（）;

尝试在输入文件更改后立即添加日志，并验证是否可以在js控制台中看到日志：

...
$("#file1").change(function() {
    console.log('input file changed');
    //bind to submit
...

Answer 5

对于那些将来需要这个问题的人来说，问题是：

    $("#file1").change(function()

我刚才改为：

function changed()

并将其添加到onchange方法的输入中！

提交表格并检查完整而无需提交按钮

5 个答案: