У меня есть форма, где есть несколько входных данных, которые должны быть введены пользователем, но перед отправкой формы я хочу показать пользователям, как их i / p будет отображаться.
Моя страница разделена на 2 части, одна часть содержит форму и 2 содержит макет
<form class="form-horizontal" enctype="multipart/form-data" role="form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST"> <div class="form-group"> <label for="input01" class="col-sm-2 control-label">First Name</label> <div class="col-sm-4"> <input type="text" class="form-control" name="firstname" id="input01"> </div> </div> <div class="form-group"> <label for="input01" class="col-sm-2 control-label">Last Name</label> <div class="col-sm-4"> <input type="text" class="form-control" name="lastname" id="input02"> </div> </div> <div class="form-group"> <label for="input01" class="col-sm-2 control-label">Location</label> <div class="col-sm-4"> <input type="text" class="form-control" name="location" id="input03"> </div> </div> </form> Теперь место, которое я хочу отобразить выше, будет отличаться от div, и это нужно сделать до отправки кнопки, например:
Я хочу чтобы
when user types firstname, at the same instance it should be displayed under <div id="firstname"></div>, when user types lastname , at the same instance it should be displayed under <div id="lastname "></div>, when user types location, at the same instance it should be displayed under <div id="location"></div>,
В настоящее время код, который у меня есть, работает только для одного входа
<input type="text" value=""> <p></p> $( "input" ) .keyup(function() { var value = $( this ).val(); $( "p" ).text( value ); }) .keyup();
но я хочу что-то, что может работать для любого количества ввода, как описано в приведенном выше примере. Может кто-нибудь, пожалуйста, помогите мне с этим
Вы можете добавить специальный атрибут data к своему input чтобы уточнить, куда должен быть помещен введенный текст. Вы можете называть его так, как вы хотите, префикс data- – назовем его data-view-id . Затем вы добавляете этот атрибут к своему input :
<input type="text" class="form-control" name="location" id="input01" data-view-id="#location">
Далее – измените js:
$( "input" ) .keyup(function() { var value = $( this ).val(), dataViewId = $( this ).data( "view-id" ); // get your data-attribute value // use this value as a selector: $( dataViewId ).text( value ); }) .keyup();
Еще дальше – если идентификаторы div, где вы хотите разместить текст, совпадают с name входов – тогда вам даже не нужен атрибут data :
$( "input" ) .keyup(function() { var value = $( this ).val(), dataViewId = $( this ).attr( "name" ); // get your value using `name` // use this value as a selector: $( "#" + dataViewId ).text( value ); }) .keyup();
И к слову – свойство id должно быть уникальным на странице. Таким образом, незаконно иметь несколько элементов с одинаковым id , как у вас в настоящее время.