onclick auf input type image verursacht Formular Absenden

Szenario

Ich habe dieses Formular:

<form action="EditShippingInfo.asp" method="POST" id="frmShippingInfo">
  <!-- stuff -->
  <input type="image" id="EditShippingInfo" onclick="javascript:checkShippingInfo(this.form);" src="/img/btn_save.gif" />
</form>

Den checkShippingInfo - Funktion ausgeführt wird, einige Eingabe-überprüfung-Kontrolle. Schließlich läuft es eine serverseitige Kontrolle über AJAX:

  function checkShippingInfo(form){
        /* runs validation controls */

        var data = setDataForAjax;
        $.ajax({
            type: 'GET',
            url: '/include/checkAddresses.asp',
            data: data,
            async: false,
            success: function (m) {
                if (m == 0) {
                    /* I want to run form.submit only if m=0 */
                    form.submit();
                }
                else {
                    /* otherways I display a message */
                    alert(m);
                    return false;
                }
            }
        });
  }

Aber die form submit ausgelöst wird sowieso, auch wenn m!=0.

Frage

Will ich auslösen form.submit nur unter einer bestimmten Bedingung.
Tut input type="image" auslösen reichen in anycase?

InformationsquelleAutor Alberto De Caro | 2012-10-30
  1. 3

    Die Tatsache

    Das onclick-Ereignis auf ein submit-input ist immer auslösen das Formular Absenden.
    , Es sei denn, der onclick-event-handler explizit zurück FALSE.

    Danach zwei wichtige details fehlen in meinem code.

    Die Lösung

    1. Den return Schlüsselwort in der onclick-event-handler.

      onclick="javascript:return checkShippingInfo(this.form);"

    2. Den return Wert in der checkShippingInfo Funktion.

    .

    function checkShippingInfo(form)
{
      /* do the validation control... */

      /* do the ajax call... */

      /* I prevent the form submit */
      return false;
}
    • +1: Jetzt wirst du nie vergessen ;p
    • Es ist nicht ein submit-input-obwohl
    • Streng genommen hast du Recht, auch wenn das, was ich heraus gefunden, diese Lösung ist gültig für image und submit input geben, als auch. Wie auch immer, von MDN-Artikel: 'Bild: Einen grafischen submit-button.'. Und von W3C: 'Erstellt einen grafischen submit-button.'
    InformationsquelleAutor
  2. 0
    function checkShippingInfo(form){
        /* runs validation controls */

        var data = setDataForAjax;
        $.ajax({
            type: 'GET',
            url: '/include/checkAddresses.asp',
            data: data,
            async: false,
            success: function (m) {
                if (parseInt(m) == 0) { //use parseInt here to get integer value
                    /* I want to run form.submit only if m=0 */
                    form.submit();
                }
                else {
                    /* otherways I display a message */
                    alert(m);
                    return false;
                }
            }
        });
  }
    • Danke. Überprüfung der Daten zurückgeben ist ein guter Punkt. Aber es ist nicht die Lösung.
    InformationsquelleAutor Sibu
Schreibe einen Kommentar