如何使用 JavaScript/JQuery 在表单中显示所有 HTML 输入值的摘要？答案

【问题标题】：How to use JavaScript/JQuery to display summary of all HTML input values in a form?如何使用 JavaScript/JQuery 在表单中显示所有 HTML 输入值的摘要？
【发布时间】：2018-09-06 11:01:13
【问题描述】：

我试图在表单的最后一页（在点击“提交”按钮之前）显示我所有的 HTML 输入值，但是，我无法在页面上打印出这些值。

这是我迄今为止尝试过的，当我运行它时，值在最后一页上显示为空白。还有比这更好的方法吗？

HTML：

  <div class="tab">
    <label>Start Point</label>
    {{ form.start_point(placeholder="Start point..", oninput="this.className = ''", id="start_point") }}
    <label>QC</label>
    {{ form.qc(placeholder="QC...", oninput="this.className = ''", id="qc") }}
  </div>

  <div class="tab">
    <label>Input S3 Bucket</label>
    {{ form.input_uri(placeholder="(e.g. s3://pipeline-run/fastqs/)...", oninput="this.className = ''", id="input_uri") }}
    <label>Output S3 Bucket</label>
    {{ form.output_uri(placeholder="(e.g. s3://pipeline-run/results/)...", oninput="this.className = ''", id="output_uri") }}
  </div>

JavaScript：

<script>

$(function() {
    $('#start_point').change(function(){
        $('#start_point_label').text($(this).val());
    });
    $('#qc').change(function(){
        $('#qc_label').text($(this).val());
    });
    $('#input_uri').change(function(){
        $('#input_uri_label').text($(this).val());
    });
    $('#output_uri').change(function(){
        $('#output_uri_label').text($(this).val());
    });
});

</script>

更新 1：对输入标签之间的区域进行“检查”的 HTML 结果。

<input id="input_uri" name="input_uri" oninput="this.className = ''" placeholder="(e.g. s3://pipeline-run/fastqs/)..." required="" type="text" value="" class=""> == $0

更新 2： 我定义用户输入的表单类

from flask_wtf import FlaskForm
from wtforms import StringField, TextField, SubmitField, IntegerField, SelectField, validators
import boto3

s3_client = boto3.client('s3')
ec2_client = boto3.client('ec2')

class InputForm(FlaskForm):

    bucket_choices = [("", "---")] + [("", bucket["Name"]) for bucket in s3_client.list_buckets()["Buckets"]]

    stack_name = StringField('STACK NAME', validators=[validators.required()])
    deploy_bucket = SelectField('PIPELINE DEPLOYMENT BUCKET', validators=[validators.required()], choices=bucket_choices)

    input_uri = StringField('INPUT BUCKET', validators=[validators.required()])
    output_uri = StringField('OUTPUT BUCKET', validators=[validators.required()])

更新 3： 我有多个具有下拉选项的输入，但是当它们在最终表单页面上打印出来时，这些输入中的每一个都会打印出全部选定的选项。

外观：

Pipeline Deployment Bucket: CFNTemplateClaudia_Sandboxfastq---GRCh38-referencesGRCh38wgs---
Key Pair: CFNTemplateClaudia_Sandboxfastq---GRCh38-referencesGRCh38wgs---
Start Point: CFNTemplateClaudia_Sandboxfastq---GRCh38-referencesGRCh38wgs---
QC: CFNTemplateClaudia_Sandboxfastq---GRCh38-referencesGRCh38wgs---

它应该看起来如何：

Pipeline Deployment Bucket: CFNTemplate
Key Pair: Claudia_Sandbox
Start Point: fastq
QC: ---

【问题讨论】：

您使用的是 Angular.js 还是其他框架？即您的 HTML 中的大括号是什么？可能是qcforms.com，如果是这样，您应该相应地标记您的问题。
包括jQuery
@mb21：不，这实际上是我在另一个问题中得到的回答，作为我的问题的解决方案。我对 JavaScript 之类的东西还不是很熟悉。
@claudiadast 右键单击标签之间的区域（即 {{...}} 生成输入的位置），单击检查并发布该 HTML。
嗯，这当然不是纯 JavaScript ......但 @zer00ne 似乎知道你在说什么，即使没有其他人知道 ;-)

标签： javascript jquery html flask-wtforms

【解决方案1】：

也许这就是你想要的；如果您填写input 区域，span 标记会更新其内容：

$(function() {
  $('#my_form').change(function(){
    var str = "First name: " + $( "#name" ).val() + "<br>Last name: " + $( "#surname" ).val() +"<br>";

    $('#check_before_submit').html( str );
  });
});

* {
  border: 0;
  margin: 0;
  padding: 0;
}
form {
  margin: 20px;
}
label, input {
  margin-bottom: 10px;
}
#check_before_submit {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Form</h2>

<form id="my_form" action="/action_page.php">
  <label for="name">First name: </label><input type="text" id="name" name="firstname" value="" placeholder="Your name here...">
  <br>
  <label for="surname">Last name: </label><input type="text" id="surname" name="lastname" value="" placeholder="Your surname here...">
  <br>
  <input type="submit" value="Submit">
</form>

<span id="check_before_submit"></span>

JSFiddle demo

CodePen 上的样式布局

【讨论】：

谢谢！这完美地工作。唯一的问题是，它没有显示具有下拉选项的输入值。
谢谢！看这里（api.jquery.com/change）：有一个带有下拉菜单的示例；你的情况是这样吗？
查看这个：jsfiddle.net/mitma/5wn32Lzx 你需要通过select标签的ID属性来引用不同的标签，例如区分它们:)
太棒了，它现在可以工作了！非常感谢您的帮助:)
祝你快乐 :) 干杯

【解决方案2】：

使用$.serialize()怎么样？

这将为您提供表单中的所有变量及其值，并在提交表单时发送：

var Str=$('form').serialize();

字符串将采用 URL 语法（例如通过提交带有 method="get" 的表单生成）。

【讨论】：