编辑：

Question

我有一个包含以下字段的小表：

<input required="" type="text" data-field="fld_727838" class=" form-control" id="fld_727838_1" name="fld_727838" value="" data-type="text" aria-required="true" aria-labelledby="fld_727838Label">

<input required="" type="text" data-field="fld_171035" class=" form-control" id="fld_171035_1" name="fld_171035" value="" data-type="text" aria-required="true" aria-labelledby="fld_171035Label">

<input type="tel" data-field="fld_2575575" class="form-control parsely-error" id="fld_2575575_1" name="fld_2575575" value="" data-type="phone_better" aria-labelledby="fld_2575575Label" autocomplete="off" placeholder="(201) 555-0123">

我想创建一个摘要，收集用户输入的信息，如下所示：

您的姓名是:(显示用户的名字字段是什么）
你的姓氏是:(显示用户的姓氏）
您的电话号码是:(显示用户单元输入的内容）

我该怎么做？

Answer 1

这是使用一些jQuery函数的示例。看起来你正在使用一些表单构建插件或框架添加一些无用的id和数据属性，但我们只是忽略它们。你说你不确定要查找什么，所以我将解释javascript / jQuery的每一行。

附加一个事件处理函数，每次从（模糊）输入字段中移除焦点时都会调用该函数。

$('input').on('blur', function() {

以空白字符串开头。

let summary = '';

遍历所有输入

$('input').each( function() {

获取此输入的值并将其添加到末尾有空格的字符串中。

    summary += $(this).val() + ' ';

这是输入循环的结束

});

将id =“summary”的元素的html中的文本设置为我们构建的字符串。

$('#summary').text(summary);

这是事件处理函数的结束。

});

$('input').on('blur', function() {
    let summary = '';
    $('input').each( function() {
        summary += $(this).val() + ' ';
    });
    $('#summary').text(summary);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Form</h3>

<input required="" type="text" data-field="fld_727838" class=" form-control" id="fld_727838_1" name="fld_727838" value="" data-type="text" aria-required="true" aria-labelledby="fld_727838Label">

<input required="" type="text" data-field="fld_171035" class=" form-control" id="fld_171035_1" name="fld_171035" value="" data-type="text" aria-required="true" aria-labelledby="fld_171035Label">

<input type="tel" data-field="fld_2575575" class="form-control parsely-error" id="fld_2575575_1" name="fld_2575575" value="" data-type="phone_better" aria-labelledby="fld_2575575Label" autocomplete="off" placeholder="(201) 555-0123">

<hr>

<h3>Summary</h3>
<div id="summary"></div>

Answer 2

您应该在html中使用tag来收集用户输入数据

<form id="myForm">
  <input required="" type="text" data-field="fld_727838" class=" form-control" id="fld_727838_1" name="fld_727838" value="" data-type="text" aria-required="true" aria-labelledby="fld_727838Label">
  <input required="" type="text" data-field="fld_171035" class=" form-control" id="fld_171035_1" name="fld_171035" value="" data-type="text" aria-required="true" aria-labelledby="fld_171035Label">
  <input type="tel" data-field="fld_2575575" class="form-control parsely-error" id="fld_2575575_1" name="fld_2575575" value="" data-type="phone_better" aria-labelledby="fld_2575575Label" autocomplete="off" placeholder="(201) 555-0123">
  <input type="submit">

jQuery代码

$(document).ready(function(e){
  $('#myForm').on('submit',function(){
    alert( $('#fld_727838_1').val() );
  });
});

编辑：

了解用例后，您可以使用onBlur（）方法

function myFunction() {
  var x = document.getElementById("name");
  x.value = x.value.toUpperCase();
}

Enter your name: <input type="text" id="name" onblur="myFunction()">

如何从表单中显示数据作为摘要？

2 个答案:

编辑：