一起使用onclick和onsubmit

Question

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

我有这段代码检查form标记上的必填字段：

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代码。 如何将它们合并在一起？

更新我希望它首先检查必填字段，然后如果一切正常，则发送表单。

更新：我已经将整个代码粘贴到了这里 ，我真的很努力，因为这是由以前的开发人员完成的。 如果有人可以将解决方案真正地放入代码中，那将是很好的。 我将奖励。

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 : .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;
    });
});

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，否则，如果输入了所有必需字段，则调用与在onClick事件中执行相同功能的函数。

Answer 5

首先，您不需要这两个动作。 在您的方案中，您只需要在form标记上使用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异步参数为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;"