javascript - jQuery 选择器 + 变量目标匹配

Question

HTML

<form id="myForm">
<input type="text" id="fname">
<input type="text" id="sname">
<input type="text" id="email">
<input type="tel" id="phone">
<select id="status">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<input type="submit" value="send">
</form>

...

<div id="output_fname"></div>
<div id="output_sname"></div>
<div id="output_email"></div>
<div id="output_phone"></div>
<div id="output_status"></div>

请求:
请帮我弄清楚如何传递 input, select, etc.. (what might show up in a form) 中的所有值进入“预览”(在本例中 - 进入 div )。

PS:
我已经尝试过这个(强制我粘贴脚本次数我有输入和匹配的output_ div - 至少根据我今天的知识):

$("#fname").on("focusout",function(){
    setTimeout($.proxy(function(){
         $("#output_fname").text(this.value);
    },this),10);
});

但是是否有可能做这样的事情:

<input type="text" class="grab-val" id="fname">

然后:

.val() from (all inputs)
.this class="grab-val" and 
send to (output_ + matching id)........ //something like that

或者(很抱歉所有的来回，但对于这个问题我想解决一个问题，但我也恳请教训......)

一个好的解决方案是在提交时创建预览 - 在将数据发送到数据库之前。
在“数据是否正确”-提交按钮后发送的数据。

Answer 1

你可以给你的预览 div 一个“预览”类

<div class="preview" id="output_fname"></div>
<div class="preview" id="output_sname"></div>
<div class="preview" id="output_email"></div>
<div class="preview" id="output_phone"></div>
<div class="preview" id="output_status"></div>

然后在预览按钮上提交

$('.preview').text(function(){
     return $('#' + this.id.replace('output_','')).val();
});