Question

我想在提交表单之前执行ajax请求，然后从我的ajax回调触发表单提交。但是当我尝试触发提交时，我收到以下错误：

未捕获的TypeError：对象＃的属性'submit'是不是一个功能

以下是整个代码：

    <form id="myform" method="post" action="http://www.google.com"  >
        <input type="text" name="email" id="test" size="20"  />
        <input id="submit" name="submit" type="submit" value="Submit"  />
    </form>

    <script>

    function do_ajax() {

        var jqxhr = $.get("#", function(){

            // Once the ajax function is complete, I want to submit my form:
            $('#myform').submit();

        });
    }

    $(function() {

        $('#submit').click(function (e) {


            // When the user clicks submit, I want to perform an ajax request first:
            e.preventDefault();
            do_ajax();

        });
    });

</script>

难住了。

Answer 1

我认为问题在于提交按钮会干扰其名称。我已经阅读了一些关于此的内容，谷歌将链接。

只需更改名称和ID即可：

    <input id="submit2" name="submit2" type="submit" value="Submit"  />

Answer 2

从示例中我还不清楚你想要做什么来处理提交事件：

$("#formId").submit(function() {
  // Do here whatever you want
  return false;
});

点击另一个对象（不是提交按钮）来点击提交。

$("#another").click(function() {
  $('#formId').submit();
});

我建议您为表单提供一个ID（一个页面可以包含多个表单），并使用get("#")检查您的行。该怎么办？

Answer 3

这应该可以作为你在ajax回调中调用函数，而不是经过测试，可能不是最优雅的解决方案，但这里有...

(function($){

    $(function(){

        var evtListner = function(){
            $("#submit").on('click', function(e){
                e.preventDefault();
                do_ajax($(this));
            });
        }

        var do_ajax = function(scope){
             var scope = scope;
             $.get('#', function(){
                 submit_it(scope);
             });
        }

        var submit_it = function(scope){
            scope.submit(function(){
                //
            });
        }

        evtListner();//initial call
    });

})(jQuery);

使用jQuery从AJAX回调中触发表单提交

3 个答案: