时间戳

首页 > 解决方案 > 从 HTML 表单中检索输入作为 URL

javascript - 从 HTML 表单中检索输入作为 URL

问题描述

基于 w3schools 教程 ( https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit )，下面的表单将以下列格式提交其输入：firstname=Mickey&lastname=Mouse。有没有办法使用 javascript 或 JQuery 提取这种格式的输入？谢谢！

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

标签： javascriptjqueryformsget

解决方案

为了将输入字段值发送到 URL，您必须使用 JavaScript 将所有字段值收集到 FormData 或 Array 中。然后您可以将该变量发送到 URL 中的下一页

检查这个：

function getFieldArray()
{
	console.log('Example : 1	Get all fields in FormData Array');
	var formData = new FormData();
	var elements = document.getElementById("myForm1").elements;
	for (var i = 0, element; element = elements[i++];) {
		if (element.type === "text")
		{
			console.log('This is textbox id = ' + element.id + ', Value = ' + element.value);
			formData.append(element.id, element.value);
		}
	}
	
	//Example : 1  END
	console.log('\n-----------------------------\n\n');
	
	
	console.log('Example : 2	Get all fields in Array');
	var fieldsArr = [];
	var frmElements = document.getElementById("myForm1").elements;
	for (var i = 0, element; element = frmElements[i++];) {
		if (element.type === "text")
		{
			fieldsArr[i] = element.value;
		}
	}
	console.log('Fields Length : ' + fieldsArr.length);

	return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm1">
		First name:<br>
		<input id="firstname" type="text" name="firstname" value="Mickey">
		<br>
		Last name:<br>
		<input id="lastname" type="text" name="lastname" value="Mouse">
		<br><br>
		<button onclick="return getFieldArray()">Submit</button>
	</form>

稍后您可以将 FormData 发送到另一个页面。

$.ajax({
    type: "POST",
    url: 'new_page.html',
    data: formData,
    processData: false,
    contentType: false,
    dataType: 'html',
    success: function (response) {
        //alert('done')
    },
    error: function (error) {
        //alert('fail');
    }
});

推荐阅读