JavaScript/HTML：如何在点击“提交”按钮之前显示所有输入值？

Posted 2023-03-06

技术标签:

【中文标题】JavaScript/HTML：如何在点击“提交”按钮之前显示所有输入值？【英文标题】：JavaScript/HTML: How to display all input values before hitting "submit" button? 【发布时间】：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，但没有看到输入的 【参考方案1】：

$(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://***.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>

最终的查询字符串，在提交时，可用于操纵用户的选择

【讨论】：

以上是关于JavaScript/HTML：如何在点击“提交”按钮之前显示所有输入值？的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript HTML DOM 事件

JavaScript HTML DOM事件

如何在视图中点击提交按钮而不必先关闭键盘？

如何点击提交按钮

如何防止表单提交在字段上点击输入？ [复制]

如何在点击时更改提交值