在提交表单之前显示在表单中输入的数据
我有一个表单,其中有多个输入需要由用户输入,但在提交表单之前,我希望向用户显示他们的i / p将如何显示。
i have a form where there are multiple input that needs to be entered by the user, but before submitting the form i wish to show the users how their i/p will get displayed.
我的页面分为两部分,一部分包含表格,两部分包含布局
My page is divided into 2 parts, one part contains the form and 2 contains the layout
<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,这需要完成在提交按钮之前例如:
Now the place that i want to display the above data will be different div and this needs to be done before submit button eg:
当用户输入时我希望
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>,
目前我只使用单输入的代码
Currently the code that i have works just for single input
<input type="text" value="">
<p></p>
$( "input" )
.keyup(function() {
var value = $( this ).val();
$( "p" ).text( value );
})
.keyup();
但我想要一些可以适用于任意数量输入的东西,如上例所述。任何人都可以帮助我吗
but i want something that can work for any number of input as explained in above example. Can anyone please help me with it
你可以添加特殊的数据
- 归属于输入
,以便澄清输入文本的放置位置。您可以按照自己的意愿调用它,前缀数据 -
,让我们称之为 data-view-id
。然后将此属性添加到输入
:
You can add special data
-attribute to your input
so as to clarify where the entered text should be placed. You can call it like you want, prefixing data-
, let's call it data-view-id
. Then you add this attribute to your input
:
<input type="text" class="form-control" name="location" id="input01" data-view-id="#location">
下一步 - 修改你的js:
Next - modify your 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的ID与 name 输入 - 然后你甚至不需要数据
-attribute:
Even further - if ids of divs, where you want to place text are same as name
s of inputs - then you don't even need a data
-attribute:
$( "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
的多个元素是违法的。
And by the way - id
property should be unique on a page. So it's illegal to have several elements with same id
, as you currently have.