Verwenden von Onclick und OnSubmit zusammen

Question

Ich möchte gleichzeitig einen Onclick und Onsubmit ausführen. Ist das möglich? Oder wenn dies eine schlechte Praxis ist, wie kann ich die beiden Codes zusammenführen, um beide Ereignisse durchzuführen?

Ich habe dieses Code, das ein obligatorisches Feld auf dem Formular -Tag überprüft:

onsubmit="return formCheck(this);"

Ich habe dann diesen Code auf der Schaltfläche Senden für dasselbe Formular:

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

Das Problem, das ich habe, ist, dass beim Klicken auf die Schaltfläche Senden den ONSUBMIT -Code vollständig ignoriert wird. Wie kann ich sie miteinander verschmelzen?

Update Ich möchte, dass es zuerst die obligatorischen Felder überprüfen und dann das Formular senden, wenn alles in Ordnung ist.

Update: Ich habe den gesamten Code eingefügt hier, Ich habe wirklich Probleme, wie dies von einem früheren Entwickler gemacht wurde. Wenn jemand die Lösungen buchstäblich in den Code stecken könnte, wäre das großartig. Ich werde die Belohnung erhöhen.

Answer 1

Setzen Sie Ihren Onclick -Code in die gleiche Funktion wie den Onsumbit -Code.

AKTUALISIEREN

Am Ende deines onClick codieren Sie return false;, Dies stoppt die normale Ausbreitung von Ereignissen und stoppt die onSubmit Ereignis vom Schießen. Wenn Sie also möchten, dass die Schaltfläche Senden Sie das Formular einreichen, entfernen Sie return false; von seinem onClick Handler.

Wenn Sie auf eine Schaltfläche Senden klicken, werden Sie a abfeuern click Ereignis auf der Schaltfläche und a submit Ereignis auf dem Formular, in dem die Taste verschachtelt ist (es sei denn, Sie stoppen die Ausbreitung von Ereignissen mit so etwas wie return false;).

Sie brauchen also wirklich nur eine submit Event -Handler, der die Aufgabe Ihrer beiden aktuellen Handler erledigt.

Auch da es sich anscheinend um JQuery Core in Ihrer Seite befindet, können Sie Event -Handler wie folgt anschließen:

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

Wenn Sie das gesamte Formular an die senden jQuery.facebox Funktion dann können Sie JQuery's verwenden .serialize() Funktion zum Erstellen der erforderlichen Abfragestring:

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

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

Hier ist eine Demo: http://jsfiddle.net/vaffj/

Dokumente für .serialize(): http://api.jquery.com/serialize

Beachten Sie, dass .on() ist neu in JQuery 1.7 und in diesem Fall dasselbe wie .bind() von älteren Versionen.

AKTUALISIEREN

Wenn Sie den Rückgabewert aus dem überprüfen möchten formCheck() Funktion vor dem Ausführen der facebox Plugin dann können Sie das tun:

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

Machen Sie die Onclick -Funktion das Formular ein.

Answer 3

Ich bin mir nicht sicher, ob Sie eine bestimmte Anforderung für die Verwendung beider haben onSubmit() und onclick(), aber das könnte helfen.

Hier ist die 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>

Und hier ist der 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;
    });
});

Jetzt können Sie zwei Dinge tun:

1) Wenn Sie AJAX verwenden, um Ihre Formulare zu machen, möchten Sie die vielleicht behalten return false; In der zweitletzten Linie verhindern Sie, dass Ihr Formular eingereicht wird.

2) Wenn Sie Ihr Formular sowieso posten möchten, entfernen Sie einfach return false;. Sie können Ihr Formular auch verwenden $('#my_form').submit() wann immer du willst.

Hier ist die Geige:http://jsfiddle.net/vaffj/1/

Hoffe das hilft.

Answer 4

Ich empfehle Ihnen, eine separate Funktion zu schreiben, die dieselbe Aufgabe wie das Onclick -Ereignis erledigt.

Überprüfen Sie zunächst, ob alle erforderlichen Felder auf einem Onsubmit -Ereignis eingegeben wurden. Wenn keine Rückgabe falsch zurückgibt.

Answer 5

Zunächst brauchen Sie nicht beide Aktionen. In Ihrem Szenario müssen Sie nur das Onsubmit -Attribut für das Formular -Tag verwenden.

Zweitens wäre es viel besser (aus zu vielen Gründen), wenn die Aktionen in den Attributen Verweise auf Funktionen und nicht auf Inline -Code enthalten würden.

Trotzdem würde ich den Code wie folgt ändern:

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

Ich hoffe es hilft!

Answer 6

Es gibt 2 Probleme in Ihrem Code.

1 - Das Formular kann eingereicht werden, indem auf "Eingabetaste" auf jedem Eingabefeld gedrückt wird. Das Onclick -Ereignis würde also nicht ausgelöst.

2 - Wenn der Benutzer auf die Schaltfläche klickt (vorausgesetzt, Sie haben einige Hacks hinzugefügt und sowohl die Onclick- als auch die Onsubmit -Ereignisse werden ausgelöst), aber der Formcheck gibt falsch zurück, das Formular würde nicht eingereicht, aber das Click -Ereignis ist erfolgreich (erfolgreich (erfolgreich (erfolgreich Sie haben eine Anfrage an wishlist.php gesendet)

Mein Vorschlag wäre wie unten,

onsubmit = "readyToSubmit(this); return false"

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

Answer 7

Sie senden das Formular im Onclick -Event jetzt (jQuery.faceBox ({AJAX :) So einfach bewegen Sie dies auf den Submit -Event -Handler (im unteren Bereich der FormCheck -Funktion, nachdem alle Validierungen bestanden haben).

Answer 8

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

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

und Ajax asynchronischer Param zu falsch

Answer 9

Warum nicht einfach zusammenstellen? Der Einreichung erfolgt auf Senden und Klick, damit Sie dies tun können

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

Sie können eine Sache tun und einfach Code schreiben, um Ihr Formular zu senden, wie $('#form_id').submit();, Anstatt von return false;. So wird es das Formular nach Fertigstellung von einreichen .onclick() Codefunktionalität.

Answer 11

Versuchen Sie, die beiden wie diese zu kombinieren:

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