HTML, CSS - I want to create a button "Preview" which will show user his input

Question

Let's say we have a simple form for example:

<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>

This is just a simple form for example. Now, what I can't figure out is next thing: When user clicks on that button "PREVIEW", I want it to show him how will it look like when he clicks on submit. I guess I will need additional CSS, and probably some PHP??

Answer 1

With JS it is easy. Try like this:

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>