HTML, CSS — я хочу создать кнопку & quot; Предварительный просмотр & quot; который покажет пользователю его вклад
Допустим, у нас есть простая форма, например:
<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 ??
Решение
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>Другие решения
Других решений пока нет …