![](/img/trans.png)
[英]How to access checkbox form values after hitting the submit button with Javascript?
[英]JavaScript/HTML: How to display all input values before hitting “submit” button?
我有一個多步驟表單,在最后一頁上,我想顯示前幾頁中用戶的所有輸入(在單擊“提交”按鈕之前)。 如何使用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>
$(function() { $('#my_form').change(function(){ var str = "<em>First name:</em><strong> " + $( "#name" ).val() + "</strong><br><em>Last name:</em><strong> " + $( "#surname" ).val() + "</strong><br><em>My car:</em><strong> " + $( "select#cars option:selected" ).text() + "</strong><br><em>My country:</em><strong> " + $( "select#countries option:selected" ).text() + "</strong>"; $('#check_before_submit').html( str ); }); $( "#my_form" ).on( "submit", function( event ) { event.preventDefault(); var str = "<em>First name:</em><strong> " + $( "#name" ).val() + "</strong><br><em>Last name:</em><strong> " + $( "#surname" ).val() + "</strong><br><em>My car:</em><strong> " + $( "select#cars option:selected" ).text() + "</strong><br><em>My country:</em><strong> " + $( "select#countries option:selected" ).text() + "</strong><br><em>Form's query-string:</em><strong> " + $( this ).serialize() + "</strong>"; // the query-string will use the "name" attribute as key and the "value" attribute as value $('#check_before_submit').html( str ); }); });
@import url('https://fonts.googleapis.com/css?family=Roboto'); * { border: 0; margin: 0; padding: 0; } body { padding: 20px; background: #e2e1e0; font-family: 'Roboto', sans-serif; } form { margin: 20px; } /*https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002*/ select { width: 70px; padding: 5px; border: none; border-bottom: 1px solid rgba(0,0,0, 0.12); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); color: #5c616c; color: rgba(0,0,0,0); text-shadow: 0 0 0 #5c616c; -webkit-transition: box-shadow 0.6s ease-in-out; -moz-transition: box-shadow 0.6s ease-in-out; -ms-transition: box-shadow 0.6s ease-in-out; -o-transition: box-shadow 0.6s ease-in-out; transition: box-shadow 0.6s ease-in-out; } @-moz-document url-prefix() { ::-moz-focus-inner {border: none} select:-moz-focusring { color: transparent; text-shadow: 0px 0px 0px #5c616c; } } a, a:visited, a:focus, a:active { text-decoration: none; color: #718e9e; outline: 0; } .sliding-middle-out { display: inline-block; position: relative; padding-bottom: 1px; } .sliding-middle-out:after { content: ''; display: block; margin: auto; height: 1px; width: 0px; background: transparent; -webkit-transition: width 250ms ease-in-out, background-color 250ms ease-in-out; -moz-transition: width 250ms ease-in-out, background-color 250ms ease-in-out; -ms-transition: width 250ms ease-in-out, background-color 250ms ease-in-out; -o-transition: width 250ms ease-in-out, background-color 250ms ease-in-out; transition: width 250ms ease-in-out, background-color 250ms ease-in-out; } .sliding-middle-out:hover:after { width: 100%; background: #718e9e; outline: 0; } select, select:active, select:focus, select:hover { outline: 0; } select:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } /* Use custom arrow */ .mdl-selectfield select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .mdl-selectfield { position: relative; } .mdl-selectfield:after { position: relative; top: 1em; right: 1em; /* Styling the down arrow */ width: 0; height: 0; padding: 0; content: ''; border-left: .25em solid transparent; border-right: .25em solid transparent; border-top: 0.375em solid rgba(0,0,0, 0.12); pointer-events: none; } input { padding: 5px; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-transition: box-shadow 0.6s ease-in-out; -moz-transition: box-shadow 0.6s ease-in-out; -ms-transition: box-shadow 0.6s ease-in-out; -o-transition: box-shadow 0.6s ease-in-out; transition: box-shadow 0.6s ease-in-out; } input:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } label, input, form, select { margin-bottom: 10px; } h6 { 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"> <label for="name">First name: </label> <input type="text" id="name" name="Firstname" value="" placeholder="Type your name here..."> <br> <label for="surname">Last name: </label> <input type="text" id="surname" name="Lastname" value="" placeholder="Type your surname here..."> <br> <div class="mdl-selectfield"> <span> My car: <select id="cars" name="Cars"> <option value="Volvo">Volvo</option> <option value="Saab">Saab</option> <option value="Fiat">Fiat</option> <option value="Audi">Audi</option> </select> </span> </div> <div class="mdl-selectfield"> <span> My country: <select id="countries" name="Countries"> <option value="USA">USA</option> <option value="UK">UK</option> <option value="Spain">Spain</option> <option value="Italy">Italy</option> </select> </span> </div> <br> <input type="submit" value="Submit" title="Get form's query-string"> </form> <span id="check_before_submit"></span>
提交時,最終的查詢字符串可用於操縱用戶的選擇
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.