使用onclick和onsmit一起提交 [英] Using onclick and onsubmit together

问题描述

我想同时执行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; 
  

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

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

更新：我粘贴了这里，我真的很挣扎，因为这是由以前的开发人员完成的。如果有人能够将解决方案从字面上加入到代码中，那将是非常棒的。 / b>

更新

onClick 代码您返回false; ，这会停止事件的正常传播并停止 onSubmit 事件从射击。因此，如果您想要提交按钮来提交表单，请从 onClick 处理程序中删除 return false; 。

当您点击一个提交按钮时，您将在该按钮上触发一个点击事件并且一个提交事件在按钮嵌套的窗体上（除非你停止使用类似于 return false; 的事件传播）。

所以你真的只需要一个 submit 事件处理程序来完成当前处理程序的工作。

另外，由于看起来您的页面中包含jQuery Core，因此您可以附加如下事件处理程序：

 <$ c $（$）$ $ $（'＃form-id'）。on（'submit'，function（）{
 var $ this = $（this）; // $ this指的是提交的表单
 jQuery.facebox（{
 ajax：'wishlist.php？emailme = true& name ='+ $ this.find（'＃name'）。val（） +'& country ='+ $ this （'＃country'）。val（）+'& email ='+ $ this.find（'＃email'）。val（）+'& department ='+ $ this.find（'＃department '）.val（）
}）; 
 
 //现在我们运行你的普通onSubmit代码并返回这个事件处理函数的返回值
 return formCheck（this）; 
}）; 
}）; 
  

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

<$ （'submit'，function（）{
jQuery.facebox（{$（$'$'$'$'$'$'$'$' b $ b ajax：'wishlist.php？'+ $（this）.serialize（）
}）;

返回formCheck（this）;
}）;
}）;

以下是一个演示： http://jsfiddle.net/vAFfj/

文件为 .serialize（）： http://api.jquery.com/serialize

请注意， .on（）在jQuery 1.7中是新的，在这种情况下与 .bind（）

更新

如果你想在运行 facebox 插件之前检查 formCheck（）函数的返回值，那么你可以这样做：

$ b $

  $（function（）{
 $（'＃form-id'）。on（'submit'，函数（）{
 
 //检查表单数据是否有效
 if（formCheck（this）=== true）{
 
 //如果表单数据是有效的，然后运行facebox插件
 jQuery.facebox（{
 ajax：'wishlist.php？'+ $（this）。 serialize（）
}）; 
 
 //也返回true来停止运行这个函数
 return true; 
} 
 
 //如果表单数据无效，则返回false以停止提交表单
 return false; 
}）; 
}）; 
  

I want to perform an onclick and onsubmit at the same time, is this possible? Or if this is bad practice how can I merge the two codes to perform both events?

I have this piece of code checking a mandatory field on the form tag:

onsubmit="return formCheck(this);"

I then have this piece of code on the submit button for the same form:

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

The problem I have is that on clicking the submit button it completely ignores the onsubmit code. How can I merge them together?

UPDATE I want it to check the mandatory fields first then send the form if all is ok.

UPDATE: I've pasted the whole code here, I'm really struggling as this was done by a previous developer. If someone could literally put the solutions into the code that would be great. I'll up the reward.

解决方案

Put your onClick code in the same function as the onSumbit code.

UPDATE

At the end of your onClick code you return false;, this stops the normal propagation of events and stops the onSubmit event from firing. So if you want the submit button to submit the form, remove return false; from it's onClick handler.

When you click a submit button you will fire a click event on the button and a submit event on the form in which the button is nested (unless you stop the propagation of events with something like return false;).

So you really only need a submit event handler that does the job of both of your current handlers.

Also since it appears that you have jQuery Core included in your page you can attach event handlers like this:

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

If you are sending the whole form to the jQuery.facebox function then you can use jQuery's .serialize() function to create the necessary query-string:

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

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

Here is a demo: http://jsfiddle.net/vAFfj/

Docs for .serialize(): http://api.jquery.com/serialize

Note that .on() is new in jQuery 1.7 and in this case is the same as .bind() of older versions.

UPDATE

If you want to check the return value from the formCheck() function before running the facebox plugin then you can do this:

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

这篇关于使用onclick和onsmit一起提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！