php - 一起使用 onclick 和 onsubmit

Question

我想同时执行onclick和onsubmit，这可以吗？或者，如果这是不好的做法，我如何合并两个代码来执行这两个事件？

我有这段代码检查表单标记上的必填字段:

onsubmit="return formCheck(this);"

然后我在同一表单的提交按钮上添加了这段代码:

onClick="jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&country=\' + this.form.country.value + \'&email=\' + this.form.email.value + \'&department=\' + this.form.department.value) }); return false;"

我遇到的问题是，单击提交按钮后，它完全忽略了 onsubmit 代码。如何将它们合并在一起？

更新我希望它首先检查必填字段，然后在一切正常的情况下发送表单。

更新:我已经粘贴了整个代码 here ，我真的很挣扎，因为这是由以前的开发人员完成的。如果有人能够将解决方案真正地放入代码中，那就太好了。我会提高奖励。

Answer 1

将 onClick 代码放在与 onSumbit 代码相同的函数中。

更新

在 onClick 代码末尾返回 false;，这会停止事件的正常传播并停止触发 onSubmit 事件。因此，如果您希望提交按钮提交表单，请从其 onClick 处理程序中删除 return false;。

当您单击提交按钮时，您将在该按钮上触发一个 click 事件，并在嵌套该按钮的表单上触发一个 submit 事件(除非您停止该按钮)使用诸如 return false; 之类的内容传播事件。

因此，您实际上只需要一个 submit 事件处理程序来完成当前两个处理程序的工作。

此外，由于您的页面中似乎包含 jQuery Core，因此您可以附加如下事件处理程序:

$(function () {
    $('#form-id').on('submit', function () {
        var $this = $(this);//$this refers to the form that is being submitted
        jQuery.facebox({
            ajax : 'wishlist.php?emailme=true&name=' + $this.find('#name').val() + '&country=' + $this.find('#country').val() + '&email=' + $this.find('#email').val() + '&department=' + $this.find('#department').val()
        });

        //now we run your normal onSubmit code and return it's return value of this event handler
        return formCheck(this);
    });
});

如果您要将整个表单发送到 jQuery.facebox 函数，那么您可以使用 jQuery 的 .serialize() 函数来创建必要的查询字符串:

$(function () {
    $('#form-id').on('submit', function () {
        jQuery.facebox({
            ajax : 'wishlist.php?' + $(this).serialize()
        });

        return formCheck(this);
    });
});

这是一个演示:http://jsfiddle.net/vAFfj/

.serialize() 的文档:http://api.jquery.com/serialize

请注意，.on() 是 jQuery 1.7 中的新增功能，在本例中与旧版本的 .bind() 相同。

更新

如果您想在运行 facebox 插件之前检查 formCheck() 函数的返回值，那么您可以这样做:

$(function () {
    $('#form-id').on('submit', function () {

        //check if the form data is valid
        if (formCheck(this) === true) {

            //if the form data is valid then run the facebox plugin
            jQuery.facebox({
                ajax : 'wishlist.php?' + $(this).serialize()
            });

            //also return true to stop running this function
            return true;
        }

        //if the form data is not valid then return false to stop the submission of the form
        return false;
    });
});