[JavaScript] formular und this.disabled = true

[Witzigerkiller]

Hallo leute, ich bin völliger js noob..hab zwar ein buch aber weiterbringen tut es mich nicht wirklich...

ich habe ein formuler das heißt post...
dann habe ich einen submit button der submit heißt...


wenn man draufklickt soll der submit button deaktiviert also disabled haben.. das habe ich mit

onclick="this.disabled = true";

geschafft, aber nun wird das formular nicht mehr abgeschickt... es soll dann aber noch abgeschickt werden... ich prüfe zwar mit php auf doppelposts..aber das bringt zumindestens optisch die wirkung: Oh das ist sicher hier kann ich nicht spamen...

wäre sehr dankbar um eine lösung....

[onemorenerd]

Mit onclick="disabled=true;form.submit();" würde das Formular abgeschickt. Allerdings kannst du dir das Deaktivieren des Buttons auch schenken, wenn du im selben Atemzug das Formular abschickst.

[Witzigerkiller]

echt wirklich? wenn der server mäl länger zum laden braucht habe ich das oft gesehen das leute dann ewiglang den submitbutton missbrauchen...

[Witzigerkiller]

nochmalpost weil ich keinr echt zum ändern habe... also dein js klappt nicht, da wenn ich unten im IE auf fehler auf der seite klicke und details anzeigen mache, kommt: das object unterstützt die eigenschaft oder methode nicht

[onemorenerd]

Wenn du das erneute Abschicken verhindern willst, dann besser mittels <form ... onsubmit="..">. Denn sonst kann der User - auch bei disabled Submit Button - in einem beliebigen Feld Enter drücken und ...

[Witzigerkiller]

wie müsste das mit onsubmit im form tag aussehen? bin js noob sry...

ich hab das große blaue franzi´s javascript buch, wenn du das kennst und weißt welche seiten ich da brauche guck ich auch selber... will nicht das ihr mir alles in den hintern schieben müsst xD

[onemorenerd]

Naja vielleicht wäre eine ausführlichere Betrachtung der Resubmit-Problematik angebracht ...

Problem: User sendet Form und bevor sich die neue Seite lädt, sendet er nochmal und nochmal und ...
Lösung: User darf einmal senden und dann nicht mehr, klar. Erneutes Absenden kann man auf unterschiedlichen Wegen verhindern:
1) Form mit einem Div überlagern, so dass der User nicht mehr rankommt
2) Alle Elemente disablen, die ein Senden auslösen können (Submitbuttons + Inputs, die bei Enter senden).
3) Onsubmit der Form prüfen, ob bereits gesendet wurde und ggf. nicht senden.

Beim 1. Ansatz muß man die Dimensionen der Form kennen oder ein Fullscreen-Div anzeigen - du hast sicher auch schon mal einen Ladebalken oder die Mac-Sanduhr gesehen.
Der 2. Ansatz erfordert besonders bei sich dynamisch erweiternden Formularen einiges an Javascript (ein wenig JS erfordern alle Ansätze), wohingegen
der 3. Ansatz mit einer Zeile auskommt:
<form ... onsubmit="if (!issent) {var issent=true; return true; } else return false;">

Zusätzlich kann man den Submit-Button disablen und mit "bitte warten" beschriften, damit der User informiert ist.

[Witzigerkiller]

ich komm da nicht mit... ein einziges script wäre mir hilfreicher..

hier mal mein form...

      <form name="post" action="index.php?action=posting" method="post">
      <table align="center">
        <tr>
          <td><b>{$L_name}:*</b></td>
          <td><input type="text" name="name" size="20" maxlength="40" /></td>
        </tr>
        <tr>
          <td><b>{$L_mail}:*</b></td>
          <td><input type="text" name="mail" size="20" maxlength="40" /></td>
        </tr>
        <tr>
          <td><b>{$L_homepage}:</b></td>
          <td><input type="text" name="homepage" size="20" maxlength="40" /></td>
        </tr>
      </table>
      <table cellpadding="0" cellspacing="0" class="outline" align="center">
        <tr>
          <td>
            <table cellpadding="2" cellspacing="0" class="inline">
              <tr>
                <td width="100%" colspan="2" align="center"><b>{$L_new_message_register}</b></td>
              </tr>
              <tr>
                <td width="22%"><b>{$L_title}:*</b></td>
                <td><input type="text" name="subject" size="45" maxlength="60" style="width:450px;" /></td>
              </tr>
              <tr>
                <td width="22%" valign="top"><b>{$L_message_text}:*</b><br /><br /><br /><br />
                <table width="80" align="center">
                  <tr>
                    <td>
                      {foreach item=smilie from=$smilie}
                      <img src="{$smilie.smilie}" alt="{$smilie.alt}" onclick="document.post.message.value +=' {$smilie.code} '" />
                      {/foreach}
                    </td>
                  </tr>
                </table>
                </td>
                <td valign="top">
                  bbcodes 
                <textarea name="message" rows="15" cols="35" style="width:450px;"></textarea></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td><b>{$L_confirmation_code}:*</b></td>
                <td><img src="includes/confirm.php" alt="Visuelle Confirmation" class="confirmation_code" /></td>
              </tr>
              <tr>
                <td><span style="font-size:x-small;">{$L_d_confirmation_code}</span></td>
                <td><input type="text" name="confirm" size="10" maxlength="8" /></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td colspan="2" align="center"><input type="submit" name="g" value="{$L_form_preview}" />&nbsp;&nbsp;<input type="submit" name="submit" value="{$L_form_add}" /></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      </form>