【问题标题】：HTML, CSS - I want to create a button "Preview" which will show user his inputHTML，CSS - 我想创建一个“预览”按钮，它将向用户显示他的输入
【发布时间】：2017-03-27 04:06:45
【问题描述】：

假设我们有一个简单的表格，例如：

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

这只是一个简单的例子。现在，我想不通的是下一件事：当用户单击该按钮“预览”时，我希望它向他展示单击提交时的外观。我想我需要额外的 CSS，可能还有一些 PHP？

【问题讨论】：

使用 jQuery 做这件事的最佳方式。
看看这个stackoverflow.com/a/17648063/5930557
您将需要 Js 来执行此操作...当您提交表单并在服务器上进行进一步处理时将需要 php...避免访问服务器以呈现简单的预览...
感谢您的帮助，我会尝试使用 js 并希望它能满足我的需求:)

标签： php html css forms preview

【解决方案1】：

使用 JS 很容易。试试这样：

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>

【讨论】：