Question

我有这个发布表格的功能：

function post_form(form_id, type, redir_url) {
    $( form_id ).submit(function(e) {
        CheckRequired(e);
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        LoadModalBody('<h2 align="center">Loading...</h3><p align="center"><i class="fa fa-refresh fa-spin fa-5x"></i></p>', 'Loading');
        $.ajax({
            url : '/section' + formURL,
            type: "POST",
            data : postData,
            success:function(data, textStatus, jqXHR) {
                //alert(type);
                if(type === 'modal') {
                    if(redir_url === '') {
                        LoadModal('/section' + formURL, '');
                    } else {
                        LoadModal('/section' + redir_url, '');
                    }
                } else if(type === 'reload') {
                    if(redir_url === '') {
                        location.reload();
                    } else {
                        //
                    }
                } else {
                    //close the loading modal
                    CloseModal();
                    //location.reload();
                    //$("body").html(data);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                //if fails
            }
        });
        e.preventDefault();
    });
}

可以正常调用它：

<form method="post" action="/users/mileage" id="form1" onsubmit="post_form('#form1', 'modal');">

<input="submit" />
</form>

我正在尝试使用此代码：

<form id="invoices" action="/accounting/dashboard" method="post">

</form>

<script type="text/javascript">
$(document).ready(function() {
    var timeoutId;
    $('#invoices input, #invoices textarea').on('input propertychange change', function() {    
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
            // Runs 1 second (1000 ms) after the last change   
            //saveToDB();
            post_form('#invoices', '', '');
        }, 1000);
    });
});
</script>

但它只是没有发布，并且控制台中没有显示错误

使用表单标记中的onSubmit的所有其他表单工作正常，但我无法使用上面的jquery代码在超时时发布

Answer 1

您确实意识到，在您的代码中，您有＆＃34; propertychange change＆＃34;。

如果您想要点击，则必须执行以下操作：

$("#form1").submit(function(){ "your code"});

Answer 2

删除提交处理程序$( form_id ).submit(function(e)在两种使用情况下都不需要。

在第一种情况下，您会触发内联onsubmit="postform(...)"。

在第二种情况下，它不起作用，因为您不会触发提交事件。

编辑以获得更清晰的示例

如果你想移动AJAX调用，那么它会触发输入更改......

让我们从表单元素中删除onsubmit。

<form id="invoices" action="/accounting/dashboard" method="post">
    <input type="text" />
    <button type="submit">Submit</button>
</form>

设置提交处理程序，以便浏览器不会进行正常的表单提交，这可能会导致您的页面离开。

$("#invoices").on("submit", function(e) {
    e.preventDefault();
    postForm("#invoices");
});

处理属性更改事件

var timeoutId;
$("#invoices input").on("input propertychange change", function() {
   clearTimeout(timeoutId);
   timeoutId = setTimeout(function() {
       postForm("#invoices");
   }, 1000); 
});

执行AJAX帖子

function postForm(formId) {
    var form = $(formId);
    $.ajax({
        url: form.attr("action"),
        type: form.attr("method"),
        data: form.serializeArray(),
        success: function(data) {
            console.log(data);
        },
        error: function(jqxhr, status, error) { }
    });
}

一个JSFiddle示例。

有什么不同？

在第二种情况下，您已在表单提交事件中包装了AJAX请求。但它永远不会触发，因为你处于变革事件中。我建议您删除提交处理程序，因为您实际上是在内联onsubmit中设置提交处理程序。

您触发更改事件
您致电post_form() 设置提交处理程序
完成。提交未被触发。

jquery ajax post表单函数在超时时没有提交

2 个答案: