HTML, CSS - Ich möchte eine Schaltfläche „Vorschau“ erstellen, die Benutzer seine Eingabe

Question

die zeigen wir an, wir ein einfaches Formular zum Beispiel haben:

<form> 
    Enter title here: 
    <input type="text" name="title" /> 
    Gender: 
    <select name="gender"> 
     <option value="male">M</option> 
     <option value="female">F</option> 
    </select> 
    Say something about yourself: 
    <textarea name="aboutMe"></textarea> 
    Click on button to see how will your form look like for submit. 
    <button>PREVIEW</button> 
</form> 

Dies zum Beispiel nur eine einfache Form ist. Nun, was ich nicht herausfinden kann, ist das nächste: Wenn der Benutzer auf den Knopf "VORSCHAU" klickt, möchte ich ihm zeigen, wie es aussehen wird, wenn er auf "Senden" klickt. Ich denke, ich brauche zusätzliches CSS und wahrscheinlich etwas PHP ??

Answer 1

Mit JS ist es einfach. Versuchen Sie wie folgt aus:

function formAlert() { 
 
     alert_string = ''; 
 
     alert_string = alert_string + document.getElementById('title').value; 
 
     alert_string = alert_string + ', '; 
 
     alert_string = alert_string + document.getElementById('gender').value; 
 
     alert_string = alert_string + ', '; 
 
     alert_string = alert_string + document.getElementById('about_me').value; 
 
     
 
     alert(alert_string); 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form onsubmit="formAlert(); return false;" method"POST"> 
 
    Enter title here: 
 
    <input type="text" name="title" id="title" /><br><br> 
 
    Gender: 
 
    <select name="gender" id="gender"> 
 
     <option value="male">M</option> 
 
     <option value="female">F</option> 
 
    </select><br><br> 
 
    Say something about yourself:<br><br> 
 
    <textarea name="aboutMe" id="about_me"></textarea><br><br> 
 
    Click on PREVIEW to see how will your form look like for submit.<br><br> 
 
    <button>PREVIEW</button> 
 
    <input type="submit" value="Submit"/> 
 
</form>