HTML-Formulare

flo96 · 25. August 2014

Liebe Mitcoder,

ich bin leidenschaftlicher HTML-Coder, der möglichst alles alleine machen möchte... Ich erstelle zudem viele HTML-Formulare mit PHP-Auswertung. Nun habe ich diesen Code:

HTML

<tr>
     <td><span class="pflichtfeld1">*</span> Spam-Schutz</td>
     <td colspan="3">
          <?php echo $Spam; ?>
          <input type="number" name="zip" size="4" autocomplete="off" >
          <input type="hidden" name="zip2" value="<?php echo $Schutz; ?>">
     </td>
</tr>
<tr>
     <td colspan="4" class="mitgliedsantrag_align">
          <input type="submit" name="senden" value="Absenden" id="login"/>&nbsp;<input type="reset" name="reset" value="Zurücksetzen" id="reset"/>
     </td>
</tr>

Alles anzeigen

Das "$Schutz" oder "$Spam" kann man hier mal vernachlässigen, worum es mir geht:
Ich hätte gerne einen Button für die Vorschau. Gibt es einen

HTML

<Input type="submit" />

mit der Funktion Vorschau oder muss ich das über PHP machen, damit auch die Werte die der Nutzer eingegeben hat beibehalten werden?

Bitte um Antwort. Danke.

wolf · 25. August 2014

Was meinst du mit Vorschau?

Das du als Client beim klicken darauf, vor dem Neuladen schon siehst das was falsch eingetragen ist?

Dazu benötigt man JavaScript ... JQuery ist hier ganz nett

JavaScript

//Beim klicken auf ein Input Tag mit der klasse »registerform« mach das zwischen den klammern
$("input.registerform").click(function(event){
    if( validateData() ){
        return true;
    }
    else{
        event.preventDefault(); //absenden verhindern
    }
});
function validateData(){
    var formElements = //alle elemente
    if( formElements['name'].lenght <= 3 ){
        formElements['name'].style.borderColor = 'red';
    }
}

Alles anzeigen

Die Validate funct. kann man mit jquery besser aufbauen, war nur kurz fürs Beispiel xD
Das mit dem absenden verhindern geht auch ohne jquery (ich weis nicht ob preventDefault() ne JQ funct ist, wenn ja geht es ohne mit »return false;«

Wenn du was anderes meintest... sag's

EDIT:
Übrigens, wenn du die richtigen input types einsetzt macht der Browser schon eine vorvalidierung von alleine!
interresanter Artikel zu HTML% input types

flo96 · 27. August 2014

mein Problem ist ja auch nicht das absenden, das hab ich ja schon vorher mit PHP gelöst...

ich wollte lediglich wissen, ob es so einen <Input type="submit" /> blos mit Vorschau gibt... also nicht absenden, sondern halt Vorschau
aber danke

wolf · 27. August 2014

Hääää

du meinst einen iput type der vroschau heißt?
-Nein, weil: woher soll der Browser denn Wissen was er vorschauen soll?
Bei »submit« ist klar - abesenden
bei »number« ist klar - ne numer
bei »email« ist klar - ne email
bei »previev« was soll er jetzt machen?!

Wenn du was anderes meinst...

cottton · 27. August 2014

Eine Vorschau musst Du Dir "selbst basteln".
Dürfte aber nicht so schwer sein.

Du baust 2 Buttons ein: Absenden | Vorschau

Bei Absenden - klar - verarbeitest Du in Deinem Script die Eingaben und handelst wie bisher.
Bei Vorschau ist der einzige Unterschied, dass Du nicht handelst und das Formular noch einmal mit den eingegebenen Benutzerdaten anzeigst.

Das Prinzip könnte das so aussehen:

PHP

<?php
// kontroll-vars:
$erster_aufruf = false;
$vorschau = false;
$fehlervorhanden = false;




// feld-values vordefinieren:
$titel = '';
$feld1 = '';
$feld2 = '';




if(!$_POST){
    // $_POST ist leer - das formular wurde zum erstenmal auf dieser seite aufgerufen
    $erster_aufruf = true;
}
elseif(isset($_POST['absenden']))
{
    // nutzer möchte das formular absenden
    // hier dann handeln ...
    // zB fehlerprüfung:
    if(/*deine checks*/0){
        $fehlervorhanden = true;
    }else{
        // keine fehler: also daten verarbeiten
    }
}
elseif(isset($_POST['vorschau']))
{
    // nutzer möchte das formular in der vorschau sehen
    $vorschau = true;




    if(isset($_POST['titel'])){
        $titel = $_POST['titel'];
    }
    if(isset($_POST['feld1'])){
        $feld1 = $_POST['feld1'];
    }
    if(isset($_POST['feld2'])){
        $feld2 = $_POST['feld2'];
    }
}







// vorschau anzeigen wenn benutzer "vorschau" gewählt hat:
if($vorschau)
{
?>
<h2>Vorschau:</h2>
<div><b>titel:</b> <?php echo htmlspecialchars($titel)?></div>
<div><b>feld1:</b> <?php echo htmlspecialchars($feld1)?></div>
<div><b>feld2:</b> <?php echo htmlspecialchars($feld2)?></div>
<?php
} // END if($vorschau){







// formular nur anzeigen, wenn:
//  vorschau gewählt wurde, das formular zum ersten mal aufgerufen wurde, oder fehler vorkamen
if($vorschau or $erster_aufruf or $fehlervorhanden)
{
?>
<h2>Formular:</h2>
<form name="" method="post">
    <input type="text" name="titel" value="<?php echo htmlspecialchars($titel)?>">
    <input type="text" name="feld1" value="<?php echo htmlspecialchars($feld1)?>">
    <input type="text" name="feld2" value="<?php echo htmlspecialchars($feld2)?>">
    <!-- ... -->
    <input type="submit" name="absenden" value="Absenden">
    <input type="submit" name="vorschau" value="Vorschau">
</form>
<?php
} // END if($vorschau or $erster_aufruf or $fehlervorhanden){
elseif(!$vorschau and !$erster_aufruf and !$fehlervorhanden)
{
    // keine vorschau, nicht der erste aufruf und keine fehler vorhanden.
    // hier könnte jetzt eine erfolgsmeldung ausgegeben werden
?>
<b>formular abschickt ... danke usw ...</b>
<?php
}

Alles anzeigen

flo96 · 29. August 2014

Danke, das ist was ich wissen wollte, dann muss ich das also über php machen

wolf · 29. August 2014

Kannst du genausogut über JS?

JavaScript

onklickVorschaudings
    felder auslesen
    und in eine Box schreiben? :?
    ret 0;

-spart aufjedenfall unnötigen Traffic bei einsetzung
- faalback könnte ja das PHP machen

HTML-Formulare

Jetzt mitmachen!

Teilen