Question

我的表单末尾有一个提交按钮，标记如下：

<button id="sendbutton" style="margin-left:25px;" class="btn btn-large btn-primary" type="submit">Send Responses</button>

此按钮调用此脚本：

<script type="text/javascript">
        $(function() {
            $('form').unbind('submit').bind('submit', function(){
                $.ajax({
                    type: 'post',
                    url: 'chapter.php',
                    data: $("form").serialize(),
                    success: function() {
                        alert('Your answers have been saved.');
                    }
                });
                return false;
            });
        });

    </script>

如何在此表单结构之外创建一个调用相同函数的按钮？

Answer 1

您可以将单击处理程序写入新按钮，并在处理程序中使用脚本

触发表单提交

<button id="test" style="margin-left:25px;" class="btn btn-large btn-primary" type="button">Send Responses</button>

然后

jQuery(function($){
    $('#test').click(function(){
        $('form').submit()
    })
})

Answer 2

您可以创建自己喜欢的任何按钮，即使它位于表单之外。然后，要使该按钮执行相同的操作，您只需执行

$('#yourNewButton').click(function(){
    $('form').submit();
});

或者，为什么不将原始逻辑包装到自己的函数中

function submitMyForm(){
    $.ajax({
        type: 'post',
        url: 'chapter.php',
        data: $("form").serialize(),
        success: function() {
            alert('Your answers have been saved.');
        }
    });
    return false;
 }

然后

$('#yourNewButton').click(submitMyForm);
$('form').submit(submitMyForm);

Answer 3

不是让提交处理程序成为匿名函数，而是使其成为命名函数

function submitHandler() {
    $.ajax({
        type: 'post',
        url: 'chapter.php',
        data: $("form").serialize(),
        success: function () {
            alert('Your answers have been saved.');
        }
    });
    return false;
}

然后将代码更改为

$('form').unbind('submit').bind('submit', submitHandler);

通过编写submitHandler();

，您可以随时调用该函数

在表单提交之外调用此函数

3 个答案: