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

Posted 2021-04-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：我的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: ---

答案

也许这就是你想要的;如果你填写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>

另一答案

那么使用$.serialize()呢？

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

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

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

以上是关于如何使用JavaScript / JQuery显示表单中所有HTML输入值的摘要？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 Javascript/jquery 将字符串中的数组显示为表行

如何在 jQuery / javascript 中使用 each() 进行迭代或循环

如何使用 javascript/jquery 编写 onshow 事件？

使用 jquery 或 javascript 在顶部显示菜单

如何使用 jquery/javascript 捕获页面上的所有回发？

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