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代码return false;的末尾，这会阻止事件的正常传播并阻止onSubmit事件触发。因此，如果您希望提交按钮提交表单，请从return false;处理程序中删除onClick。

当您点击提交按钮时，您将触发按钮上的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()相同。

<强>更新

如果要在运行formCheck()插件之前检查facebox函数的返回值，则可以执行以下操作：

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

Answer 2

让onclick函数提交表单。

Answer 3

不确定您是否有同时使用onSubmit()和onclick()的要求，但这可能有所帮助。

这是HTML：

<form id="my_form">
    Name: <input type="text" id="name" size="20" />
    <br />Country: <input type="text" id="country" size="20" />
    <br />Email: <input type="text" id="email" size="20" />
    <br />Department: <input type="text" id="dept" size="20" />
    <br /><input type="submit" id="submit" value="Login" />
</form>

这是JS：

$(document).ready(function() {
    $('#my_form').submit(function() {

        var name = $('#name').val();
        var country = $('#country').val();
        var email = $('#email').val();
        var dept = $('#dept').val();

        /* Validate everything */
        if (name != '' && country != '' && email != '' && dept != '') {

            /* Validation succeeded. Do whatever. */
            jQuery.facebox({
                ajax : 'wishlist.php?emailme=true&name=' + name + '&country=' + country + '&email=' + email + '&department=' + dept
            });
        }

        else {

            alert('Validation failed.');
        }

        return false;
    });
});

现在，你可以做两件事：

1）如果您使用AJAX来处理表单，可能需要将return false;保留在倒数第二行，因为这会阻止您的表单提交。

2）如果您想要发布表单，只需删除return false;即可。您也可以随时使用$('#my_form').submit()发布表单。

这是小提琴： http://jsfiddle.net/vAFfj/1/

希望这有帮助。

Answer 4

我建议你编写一个单独的函数，它执行与onClick事件相同的任务。

首先检查是否已在onSubmit事件中输入所有必填字段，如果没有返回false则返回false如果已输入所有必填字段，则调用与'onClick'事件中的函数执行相同作业的函数。

Answer 5

首先，您不需要同时执行这两项操作。在您的方案中，您只需要在表单标记上使用onSubmit属性。

其次，如果对属性的操作包含对函数的引用而不是内联代码，则会更好（因为太多原因）。

那就是说，我会改变代码如下：

//some js file included in the page's header
function formSubmitActions(element) {
     if (formCheck(element)) {
         jQuery.facebox({
                ajax : 'wishlist.php?emailme=true&name=' + element.name.value 
                       + '&country=' + element.country.value 
                       + '&email=' + element.email.value
                       + '&department=' + element.dept.value
         });
         return true;
     }
     return false;
}

//the form
<form [...] onsubmit="return formSubmitActions(this)">
[...]

希望它有所帮助！

Answer 6

您的代码中有2个问题，

1 - 可以通过在任何输入字段上按“输入”提交表单。所以onclick事件不会被触发。

2 - 如果用户点击按钮（假设您添加了一些黑客并且触发了onclick和onsubmit事件），但是formcheck返回false，则表单将不会被提交，但是click事件将会成功（你会发送一个请求发送到wishlist.php）

我的建议如下，

onsubmit = "readyToSubmit(this); return false"

function readyToSubmit(a){
    if(formCheck(a)){
        jQuery.ajax({
                    url : ...,
                    success : function(data){a.submit()}
        })
    }
}

Answer 7

您现在在onclick事件中提交表单（jQuery.facebox（{ajax :)，这样简单的移动到提交事件处理程序（在所有验证通过后在formCheck函数的底部）

Answer 8

.click(function(e)
{
    e.preventDefault();
    // click code
});

.submit(function(e)
{
    // submit code
});

和ajax async param为FALSE

Answer 9

为什么不把它们组合在一起？提交将在提交和点击时发生，以便您可以

onsubmit="return formCheck(this);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;"

Answer 10

您可以做一件事，只需编写用于提交表单的代码，例如$('#form_id').submit();，而不是return false;。因此，在完成.onclick()代码功能后，它将提交表单。

Answer 11

尝试将两者结合起来：

onClick="if (formCheck(this)) { 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;"

一起使用onclick和onsubmit

11 个答案: