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

我在表格末尾有一个提交按钮，标签如下：

<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>

$（函数（）{
$（'form'）。解除绑定（'submit'）。绑定（'submit'，函数（）{
$.ajax({
键入：“post”，
url:'chapter.php'，
数据：$（“表单”）.serialize（），
成功：函数（）{
警报（'您的答案已保存'）；
}
});
返回false；
});
});

---

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

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

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

---

您可以创建任何您想要的按钮，即使它在表单之外。然后，让按钮做同样的事情，你可以简单地做

$('#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);

---

与其将提交处理程序设置为匿名函数，不如将其设置为命名函数

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（），您可以随时调用该函数

基本上，您想在单击表单外部的按钮时提交表单，对吗？为什么要执行

。解除绑定（“提交”）

？是否真的有其他代码在表单上注册了提交处理程序？

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