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

Question

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

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

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 在输入标签之间的区域上执行 "inspect" 的结果。

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

更新 2： 我的表单 class 我在其中定义了用户输入

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: ---

Answer 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

上的样式布局

Answer 2

使用 $.serialize() 怎么样？

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

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

字符串将采用 URL 语法（就像通过使用 method="get" 提交表单生成的一样）。

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

How to use JavaScript/JQuery to display summary of all HTML input values in a form?

html

javascript

jquery

flask-wtforms