Dynamisch ausblenden Formular auf "Absenden"?

Bin ich kein großer web-Programmierer, und habe einen Freund, der will mich, ihm zu helfen mit etwas.

Er will in der Lage sein, um die form haben, dass, sobald es eingereicht ist, verpasst etwas sagen wie "vielen Dank für die Einreichung" und haben die form info verschwinden. Er will es einfach für jedermann zu benutzen, damit er es geben kann, um verschiedene Menschen, um auf Ihren Seiten verwenden.

Ich dachte, ich könnte die javascript verwenden, um es zu tun, aber nicht wirklich zu 100% sicher. Ich will vermeiden, alles, was nicht HTML so viel wie möglich, so dass es verwendet werden kann, von so vielen Menschen wie möglich.

Dank.

InformationsquelleAutor Alex Baranosky | 2009-03-17

dhtml html

4

Was soll geschehen, um die Informationen in das Formular? Egal?

Wenn Sie wollen, dass es Reine HTML gibt es nur eine gute Lösung: Schreiben Sie eine HTML-Seite mit dem Formular, und eine andere, fast identisch mit der Erfolgsmeldung, und die Formulardaten versteckt. Einfach.

Auf der Abgabe-Seite:
```
<h1>Email Subscription:</h1>
<form action="successForm.html">
<input type="text" name="emailAddress" />
<button type="submit">Send Info</button>
</form>
```
Auf der empfangenden Seite (successForm.html)
```
<h1>Email Subscription:</h1>
<p>Great job, you submitted!</p>
```
Allerdings, wenn Sie brauchen, etwas zu ändern auf der selben Seite, du gehst zu haben, um mit etwas, was nicht HTML. HTML einfach nicht entscheiden über was angezeigt werden soll. Es ist dumm... es zeigt nur.

Ist es sehr einfach, JavaScript zu verwenden, um zu erkennen, wenn das Formular abgesendet wurde, und dann verstecken die Elemente, die Sie benötigen, zu verbergen, und zeigen die Erfolgsmeldung:
```

<script type="text/javascript">
    var theSubmitButton = document.getElementById('formSubmit');

    theSubmitButton.onclick = function() {
        var theFormItself = 
            document.getElementById('theForm');
        theFormItself.style.display = 'none';
        var theSuccessMessage = 
            document.getElementById('successMessage');  
        theSuccessMessage.style.display = 'block';          
    }
</script>


<h1>Email Subscription:</h1>
<p id="successMessage">You submitted the form, good job!</p>
<form id="theForm" action="successForm.html">
    <input type="text" name="emailAddress" />
    <button id="formSubmit" type="submit">Send Info</button>
</form>
```
Natürlich, dieses Beispiel ist stark vereinfacht. Es hat nichts mit der Daten, und es folgt nicht die best practices, oder überprüfen Sie, dass die Daten gültig sind, in keiner Weise. Ich versuche nur, zu geben eine grundlegende Vorstellung davon, wie die Verwendung von JavaScript für diesen Zweck. Wenn Sie nicht ein Programmierer, dann ein kleines, ausführbares Stück software könnte ein guter job für jemand anderes.

Allerdings müssen Sie noch einige Mechanismus zum speichern, E-Mail oder sonst etwas zu TUN mit der form. Fügen Sie ein edit zu deiner Frage und ich werde glücklich sein, zu klären, meine Antwort mit einem konkreten Beispiel.

(Noch ein Hinweis, ich habe nicht versucht zu laufen, dass Javascript, also, wenn Sie einen Fehler bemerken, bitte nur beachten, und ich werde es beheben)

Daniel, das Ding ist, das bedeutet, dass der Benutzer den code für alle machen Sie mehrere Kopien Ihrer Seiten. Ideal wäre es, wenn wir mit javascript ein-und ausblenden von verschiedenen Sachen. Siehe mein edit oben...
Ja, ich arbeite an einem edit mit einem javascript-Beispiel
Super!!!
Danke, dieser code davon aus, dass die "successMessage" auf display: none zu Beginn?
Ahh Mist, ja, es funktioniert. Es übernimmt eine Menge Dinge. Beachten Sie, dass dies nicht ERNSTHAFT ein funktionales Beispiel. Es wird das ein - /ausblenden, aber DANN lassen Sie das Formular Absenden. Wenn Sie wollte es tun, ausblenden/einblenden, NACHDEM das Formular eingereicht zu sich selbst, die Sie würde tun müssen, anders.

InformationsquelleAutor danieltalsky
1

Versuchen die jquery form plugin. Dies wird erreicht, was Sie nach einer eleganten Art und Weise mit minimaler Codierung. Zusätzlich zu diesem müssen Sie zum download jquery.

Dies ist eine javascript-Lösung, aber es ist sicher anzunehmen, dass jeder mit einem javascript-fähigen browser.

InformationsquelleAutor Bayard Randel
0

Den standard-Weg, dies zu tun ist, schicken Sie das Formular an eine andere Seite (submit.php zum Beispiel), die eine neue Seite mit dem Dankeschön-Nachricht. Kein javascript, kein DHTML.

Könntest du javascript verwenden, ersetzen Sie die innerHTML-eine riesige, div, das alles, oder entfernen Sie alle Elemente, aber ich würde davon abraten.

InformationsquelleAutor Phil H
0

Gibt es 2 Optionen:
1. Old-school-Formen:
  Person senden, klickt und die Daten in das Formular gesendet wird, der server-Seite per GET oder POST,
  die Seite lädt erneut und zeigt "vielen Dank für die Einreichung"
2. New-school-javascript-AJAX
  Person senden, klickt und javascript sendet die Formulardaten an server-Seite per AJAX und entfernt die Elemente bilden, um dann hinzuzufügen, "vielen Dank für die Einreichung"
Alles andere ist einige hybride aus diesen beiden Techniken.

InformationsquelleAutor srmark
0

Ich weiß, Sie wollen, um zu vermeiden, etwas anderes als html, aber dieses einfache php-code kann helfen. Sie könnte den Einsatz von php in die Seite
- füllen Sie das Formular und drücken Sie auf senden zum senden von Daten an Formular-handler
- In form-handler, der die Daten verarbeitet und dann die Umleitung zurück auf die Formularseite mit einer header('Location: yourwebaddresshere?form=submited');
Dann in der ursprünglichen form-Seite, fügen Sie eine php-IF-Anweisung oben im Formular-code:
```
$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 

if(strpos($url, 'form=submited')) {
echo 'Your thank you message here';
exit(); //Use this to stop code after this statement from loading
}
```
InformationsquelleAutor Liam

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.