【发布时间】：2019-02-06 22:35:09
【问题描述】：
我有一个多步骤表单，在最后一页上，我想显示之前页面的所有用户输入（在单击“提交”按钮之前）。我怎样才能用 JavaScript 做到这一点？我尝试了以下方法，但最后一页上的输入值仍然显示为空白。
HTML/JS
{% extends 'layout.html' %}
{% block body %}
<form method="POST" id="regForm" action="{{ url_for('pipeline') }}">
<div class="tab">
<label>Start Point</label>
{{ form.start_point(placeholder="Start point..", oninput="this.className = ''") }}
<label>QC</label>
{{ form.qc(placeholder="QC...", oninput="this.className = ''") }}
</div>
<div class="tab">
<label>Input S3 Bucket</label>
{{ form.input_uri(placeholder="(e.g. s3://pipeline-run/fastqs/)...", oninput="this.className = ''") }}
<label>Output S3 Bucket</label>
{{ form.output_uri(placeholder="(e.g. s3://pipeline-run/results/)...", oninput="this.className = ''") }}
</div>
<!-- Review page where I want all the input values to be displayed -->
<div class="tab">
<h3>Review</h3>
<label>Start Point: <span id="start_point_label">{{ START_POINT }}</span></label>
<label>QC: <span id="qc_label">{{ QC }}</span></label>
<label>Input S3 Bucket: <span id="input_uri_label">{{ INPUT_URI }}</span></label>
<label>Output S3 Bucket: <span id="output_uri_label">{{ OUTPUT_URI }}</span></label>
</div>
</form>
<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>
{% endblock %}
更新 1
i) 将输入更新为具有id：
<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>
ii) 更新了 JS 以将 # 放在引号内
<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>
【问题讨论】：
-
应该从显示的代码中看到浏览器控制台中的错误。修复选择器中的
#外部引号，它应该可以工作 -
@charlietfl：您是说
#需要在引号内还是引号外？ -
Inside... 选择器是字符串，字符串必须加引号。我还假设服务器端代码为输入生成显示的 id。在标记中看不到这些 ID
-
我试过了，但没有任何改变。 ID 来自 HTML 代码中的
<span id= >。 -
我看到了跨度 ID，但没有看到输入的
标签： javascript html