it-swarm.com.de

Übermittelte Formulareingabe ohne serverseitige Skripte anzeigen

Gibt es eine Möglichkeit, Formulareingaben zu akzeptieren und die Ausgabe mit HTML oder JavaScript/AJAX und ohne PHP/Perl/serverseitige Skripte auf die Webseite zurückzudrucken?

2
user92272

Aus meinem Kopf heraus könnten Sie so etwas tun wie ...

<form class="dump" action="#" method="post">
<fieldset>
    <legend>Dump inputs</legend>
    <label for="name">Name</label>
    <input id="name" type="text" size="25" />
    <label for="email">email</label>
    <input id="email" type="text" size="25" />
    <input type="submit" id="submit" value="Send" />
</fieldset>

und dann ein bisschen JavaScript (ich verwende jQuery, aber ich bin mir sicher, dass Sie dies mit normalem JS tun können). Dies wird ausgelöst, wenn das Formular gesendet wird, erstellt Variablen aus den Werten und gibt sie dann auf dem Bildschirm aus (nach dem unteren Rand des Formulars).

$(document).ready(function() {
$('form.dump').each(function() {
    $(this).children('fieldset').children('input#submit').click(function() {

        //Clear any previous outputs
        $(this).parent('fieldset').parent('form.dump').siblings('.output').remove();

        //Create the value vars
        var nameVal = $(this).siblings('input[id="name"]').val();
        var emailVal = $(this).siblings('input[id="email"]').val();

        //Output after form
        $(this).parent('fieldset').parent('form.dump').after(
            '<p class="output">Name is ' + nameVal + '</p>' +
            '<p class="output">email is ' + emailVal + '</p>'
            );
        return false;//Stops browser trying to actually submit the form
    });
});

});

Natürlich gibt es ein paar Dinge zu beachten

  • Stellen Sie sicher, dass es einen geeigneten Nicht-JS-Fallback gibt
  • Dies hat nichts mit den Daten zu tun, außer sie auf der Seite auszugeben
  • Dies führt zu keiner Validierung/Desinfektion usw
  • Es mag einen schlankeren/besseren Weg geben, aber es ist Montagmorgen und dies ist das erste, was ich auf Anhieb tun könnte; o)
2
Simon Hudson

Anzeigen von Formularergebnissen nur mit HTML und CSS

Mit dem Selektor :target können Formularergebnisse nur in HTML und CSS angezeigt werden. Eine Erklärung finden Sie unter dem Code.

Klicken Sie für eine Live-Demo. (Geben Sie das Kästchen im Fenster 'Ergebnis' ein und klicken Sie auf "Senden".)

<!doctype html>
<html>
    <head>
        <title>CSS form submission</title>
        <style type="text/css">
        /* Place an invisible link over the submit button that will
           change the page target when the submit button is clicked.
           N.B. The submit button is never actually triggered;
           it exists only to act as a hit target for the user
           and to conform to the user's expectations of what
           a form should look like. */      
        a#submit{ position:absolute; top:0; left:0; height:100%; width:70px; }

        /* Hide the 'You typed:' text upon initial page load */
        #page p{ display:none }

        /* When #page becomes the target (on form submission),
           show the 'You typed:' text, hide the submit button,
           and redisplay the input box in plain text. */        
        #page:target p{display:inline}
        #page:target input[type="submit"]{display:none}
        #page:target input{display:inline-block;border:0px}
        </style>
    </head>
    <body>
        <div id="page">
            <form action="" method="post">
            <p>You typed:</p>
            <input type="text" />
            <div style="position:relative">
                <input type="submit">
                <a id="submit" href="#page"></a>
            </div>
            </form>
        </div>
    </body>
</html>

Wie es funktioniert

Möglicherweise können Sie es anhand des oben angegebenen kommentierten CSS-Codes verstehen. Wenn Sie jedoch eine vollständige Erläuterung wünschen, lesen Sie weiter.

Zunächst befindet sich über der Senden-Schaltfläche des Formulars ein unsichtbarer Link, den wir mit CSS gestalten:

<div style="position:relative">
    <input type="submit">
    <a id="submit" href="#page" ></a>
</div>

a#submit{ position:absolute; top:0; left:0; height:100%; width:70px; }

Wenn der Benutzer auf die Schaltfläche "Senden" klickt, klickt er tatsächlich auf den unsichtbaren Link darüber. Der Benutzer klickt niemals auf die Schaltfläche "Senden" und das Formular selbst wird niemals gesendet.

Stattdessen ändert sich die URL von site.com/form.html zu site.com/form.html#page, wenn Sie auf den Link über die Senden-Schaltfläche klicken. Es ist nicht bekannt, aber Sie können den Teil #page der URL als CSS-Selektor mit der Pseudoklasse :target verwenden ( Dokumentation hier ). Auf diese Weise können wir die Seite anders formatieren, wenn sich in der Adressleiste des Browsers ein #page -Element befindet.

Wenn Sie also auf den Link klicken und der Benutzer zu #page umgeleitet wird, wird der Text "Sie haben Folgendes eingegeben:" angezeigt, die Schaltfläche "Senden" ausgeblendet und das Eingabefeld so geändert, dass angezeigt wird, was sie eingegeben haben. All dies erfolgt mit dem Selektor :target.

Die CSS-Regel, die aussieht wie #page:target p{display:inline}, besagt: "Wenn die Seite # das Ziel ist, wird der Absatztext in einer Zeile angezeigt." Dadurch befindet sich das Eingabefeld in der gleichen Zeile wie der Absatz und nicht darunter.

Als nächstes verbirgt die Zeile, die wie #page:target input[type="submit"]{display:none} aussieht, die Senden-Schaltfläche, wenn die Seite das Ziel ist.

Schließlich zeigt die Zeile, die wie #page:target input{display:inline-block;border:0px} aussieht, das Eingabefeld neben dem Absatztext an und entfernt den Rand. Wir zeigen dem Benutzer genau dasselbe Eingabefeld, das er gerade eingegeben hat! Wir stylen es einfach anders.

Dies könnte bei Bedarf mit mehreren Eingängen erweitert werden, aber ich habe einen verwendet, um es einfach zu halten.

Beachten Sie, dass die Browserunterstützung für den CSS-Selektor :target ziemlich gut ist, der IE8 und einige andere Browser jedoch Probleme haben. ( Vollständige Liste hier. )

2
Nick
  • Setzen Sie id = "myform" auf das Element
  • Fügen Sie id = "mysubmitbutton" zum Submit-Button des Formulars hinzu
  • Stellen Sie sicher, dass Sie jQuery in Ihre Seite aufnehmen
  • fügen Sie diesen Code irgendwo auf Ihrer Seite hinzu

    <script type="text/javascript">
        $('#mysubmitbutton').on('click', function() {
            console.log($('#myform').serializeArray());
            return false; // Prevent the submition of the form
        });
    </script>
    

Nach diesen Schritten sollten Sie die Ausgabe des Formulars in der Konsole Ihres Browsers sehen. Sie können dann die Ausgabe von $('#myform').serializeArray() in einem HTML-Container mit nur Javascript-Code rendern, ohne PHP zu durchlaufen.

0
Thyamarkos