Using onclick and onsubmit together

Question

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.

Answer 1

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

Answer 2

Make the onclick function submit the form.

Answer 3

Not sure if you have a specific requirement for using both onSubmit() and onclick(), but this might help.

Here's the 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>

And here's the 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;
    });
});

Now, you can do two things:

1) If you're using AJAX to do your form stuff, you might want to keep the return false; in the second-last line, as this will prevent your form from submitting.

2) If you want to post your form anyway, just remove return false;. You can also post your form using $('#my_form').submit() whenever you want.

Here's the fiddle: http://jsfiddle.net/vAFfj/1/

Hope this helps.

Answer 4

I suggest you to write a separate function which do the same task as onClick event.

First check if all required fields have been entered on onSubmit event, if no return false else if all required fields have been entered call the function which perform the same job as function in 'onClick' event.

Answer 5

First of all, you don't need both actions. In your scenario you only need to use the onSubmit attribute on the form tag.

Second, it would be a lot better (for too many reasons) if the actions on the attributes would contain references to functions, and not inline code.

That said, I would change the code as follows :

//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)">
[...]

Hope it helps!

Answer 6

there are 2 issues in your code,

1 - form can be submitted by pressing "enter" on any input field. so the onclick event wouldn't be triggered.

2 - if the user clicks the button (assuming you've added a few hacks and both the onclick and onsubmit events are triggered), but the formcheck returns false, the form wouldn't be submitted, but the click event will be successful (you'll have a request sent to wishlist.php)

my suggestion would be as below,

onsubmit = "readyToSubmit(this); return false"

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

Answer 7

You submit form in the onclick event now (jQuery.facebox({ ajax:) so simple move this to on submit event handler (in the bottom of formCheck function after all validations passed)

Answer 8

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

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

and ajax async param to FALSE

Answer 9

Why not just make put them together? the submit will occur on submit and on click so you can do

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

You can do one thing, just write code for submitting your form, like $('#form_id').submit();, instead of return false;. So it will submit the form, after completion of .onclick() code functionality.

Answer 11

Try combining the two like this:

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