En utilisant onclick et onsubmit ensemble

Question

Je veux effectuer une en même temps onclick et onsubmit, est-ce possible? Ou si cela est une mauvaise pratique comment puis-je fusionner les deux codes pour exécuter les deux événements?

J'ai ce morceau de code de vérification un champ obligatoire sur la balise form:

onsubmit="return formCheck(this);"

J'ai alors ce morceau de code sur le bouton soumettre à la même forme:

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

Le problème est que je le cliquer sur le bouton soumettre, il ignore complètement le code onsubmit. Comment puis-je les fusionner?

Mise à jour je veux vérifier les champs obligatoires d'abord, puis envoyer le formulaire si tout est ok.

Mise à jour: J'ai collé tout le code , je suis vraiment du mal que cela était fait par un développeur précédent. Si quelqu'un pourrait littéralement mettre les solutions dans le code qui serait génial. Je vais la récompense.

Answer 1

Mettez votre code onClick dans la même fonction que le code onSumbit.

UPDATE

A la fin de votre code onClick vous return false;, cela empêche la propagation normale des événements et arrête l'événement onSubmit de tir. Donc, si vous voulez que le bouton Submit pour soumettre le formulaire, supprimer return false; de lui est gestionnaire de onClick.

Lorsque vous cliquez sur un bouton d'envoi vous déclencher un événement click sur le bouton et un événement submit sur la forme dans laquelle le bouton est imbriqué (sauf si vous arrêtez la propagation des événements avec quelque chose comme return false;).

Alors, vous avez vraiment besoin d'un gestionnaire d'événements submit qui fait le travail à la fois de vos gestionnaires actuels.

En outre, car il semble que vous avez inclus dans jQuery base de votre page, vous pouvez associer des gestionnaires d'événements comme celui-ci:

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

Si vous envoyez toute la forme à la fonction jQuery.facebox alors vous pouvez utiliser la fonction de .serialize() jQuery pour créer la chaîne de requête nécessaire:

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

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

Voici une démo: http://jsfiddle.net/vAFfj/

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

Notez que .on() est nouveau dans jQuery 1.7 et dans ce cas est le même que .bind() des anciennes versions.

UPDATE

Si vous voulez vérifier la valeur de retour de la fonction formCheck() avant de lancer le plugin facebox alors vous pouvez faire ceci:

$(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

Assurez-vous de la fonction onclick soumettre le formulaire.

Answer 3

Je ne sais pas si vous avez un besoin spécifique pour l'utilisation à la fois onSubmit() et onclick(), mais cela pourrait aider.

Voici le code 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>

Et voici la 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;
    });
});

Maintenant, vous pouvez faire deux choses:

1) Si vous utilisez AJAX pour faire vos trucs de formulaire, vous voudrez peut-être garder le return false; dans la deuxième dernière ligne, car cela empêchera votre formulaire de soumission.

2) Si vous voulez poster votre formulaire de toute façon, il suffit de retirer return false;. Vous pouvez également poster votre formulaire en utilisant $('#my_form').submit() chaque fois que vous voulez.

Voici le violon: http://jsfiddle.net/vAFfj/1/

Hope this helps.

Answer 4

Je vous suggère d'écrire une fonction distincte qui font la même tâche que l'événement onClick.

Vérifiez d'abord si tous les champs obligatoires ont été saisis sur l'événement onSubmit, si aucun faux retour d'autre si tous les champs obligatoires ont été entrés dans la fonction appel qui effectuent le même travail que la fonction dans l'événement « onClick ».

Answer 5

Tout d'abord, vous n'avez pas besoin des deux actions. Dans votre scénario, vous ne devez utiliser l'attribut onSubmit sur la balise form.

En second lieu, il serait beaucoup mieux (pour trop de raisons) si les actions sur les attributs contiendraient des références à des fonctions, et non le code en ligne.

Cela dit, je changerais le code comme suit:

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

it helps!

Answer 6

il y a 2 numéros dans votre code,

1 - formulaire peut être soumis en appuyant sur « enter » sur un champ de saisie. si l'événement onclick ne serait pas déclenché.

2 - si l'utilisateur clique sur le bouton (en supposant que vous avez ajouté quelques hacks et les deux événements onclick et onsubmit sont déclenchés), mais les retours de FormCheck faux, la forme ne seraient pas soumis, mais l'événement de clic réussissiez (vous aurez une ENVOYÉ demande à wishlist.php)

ma suggestion serait comme ci-dessous,

onsubmit = "readyToSubmit(this); return false"

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

Answer 7

Vous soumettez formulaire en cas onclick maintenant (jQuery.facebox ({ajax :) mouvement si simple que cela le soumettre gestionnaire d'événements (en bas de la fonction FormCheck après toutes les validations passés)

Answer 8

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

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

et ajax async à FAUX param

Answer 9

Pourquoi ne pas simplement faire les mettre ensemble? le soumettre aura lieu le présenter et cliquez afin que vous puissiez faire

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

Vous pouvez faire une chose, juste écrire du code pour soumettre votre formulaire, comme $('#form_id').submit();, au lieu de return false;. Ainsi, il soumettra la forme, après la fin de la fonctionnalité de code .onclick().

Answer 11

Essayez de combiner les deux comme ceci:

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