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