0

我想同时执行 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 代码。我怎样才能将它们合并在一起？

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

更新：我在这里粘贴了整个代码，我真的很挣扎，因为这是由以前的开发人员完成的。如果有人可以将解决方案真正放入代码中，那就太好了。我会加分的。

4

11 回答 11

12

将您的 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;
    });
});
于 2012-01-12T17:05:47.787 回答
2

使 onclick 函数提交表单。

于 2012-01-12T17:08:57.523 回答
1

不确定您是否对同时使用onSubmit()and有特定要求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/

希望这可以帮助。

于 2012-01-16T13:09:43.180 回答
1

我建议你编写一个单独的函数来完成与 onClick 事件相同的任务。

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

于 2012-01-17T17:00:40.513 回答
1

首先，你不需要这两个动作。在您的场景中，您只需要在表单标签上使用 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)">
[...]

希望能帮助到你！

于 2012-01-18T19:22:08.600 回答
1

您的代码中有两个问题，

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

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

我的建议如下，

onsubmit = "readyToSubmit(this); return false"

function readyToSubmit(a){
    if(formCheck(a)){
        jQuery.ajax({
                    url : ...,
                    success : function(data){a.submit()}
        })
    }
}
于 2012-01-22T09:03:34.017 回答
0

您现在在 onclick 事件中提交表单（jQuery.facebox({ ajax:) 如此简单地将其移至提交事件处理程序（在所有验证通过后在 formCheck 函数的底部）

于 2012-01-18T22:43:29.340 回答
0 
.click(function(e)
{
    e.preventDefault();
    // click code
});

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

和 ajax 异步参数为 FALSE

于 2012-01-22T16:36:57.047 回答
0

为什么不把它们放在一起呢？提交将在提交和点击时发生，因此您可以执行

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;"
于 2012-01-23T03:43:05.047 回答
0

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

于 2012-01-23T08:30:42.777 回答
-1

尝试像这样将两者结合起来：

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;"
于 2012-01-12T17:12:43.477 回答