Question

我试图在表单的最后一页上显示所有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： 我定义用户输入的Form类

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输入值的摘要？

2 个答案: