单击表单的提交按钮后获得 URL
Get URL after clicking on Submit button of a form
我有一个表单,我想在单击“提交”按钮后检索它 URL。
到目前为止我所做的是通过 JavaScript .submit()
方法提交 <form>
,然后使用 window.location.search
将 URL 存储到一个变量中,然后我也alert()
它.
当我第一次填写表格时,警报没有显示任何内容,当我第二次填写时,它 returns 我第一次填写的值。
注意:单击“提交”按钮后我需要停留在同一页面上。
编辑: 警报首先发生,然后表单被提交,变量被附加到 URL。
这是我的代码供参考:
<html>
<body>
<div>
<h1>Form 1</h1>
<form id="form1" method="GET">
Number 1:<input type="text" id="num1" name="num1">
<br>
Number 2:<input type="text" id="num2" name="num2">
<br>
Number 3:<input type="text" id="num3" name="num3">
<br>
Number 4:<input type="text" id="num4" name="num4">
<br>
<button id="sub1" onclick="submitFunc()">Submit</button>
</form>
</div>
<script>
function submitFunc()
{
document.getElementById("form1").submit();
var loc = window.location.search;
alert(loc);
}
</script>
</body>
</html>
我认为 window.location.search
你不会成功。
相反,您可以随时直接从表单中获取数据和搜索查询,如下所示:
document.getElementById("myForm").addEventListener('submit', (ev) => {
//Optional, prevents redirect
ev.preventDefault()
//ev.currentTarget is the form element
var data = new FormData(ev.currentTarget);
//modification of the code from this answer:
var queryParts = [];
var entries = data.entries()
for(var pair of entries)
queryParts.push(encodeURIComponent(pair[0]) + "=" + encodeURIComponent(pair[1]))
var query = queryParts.join("&")
var loc = window.location;
//reassemble the url
var url = loc.protocol+'//'+loc.host+loc.pathname+'?'+query
console.log(url)
})
<form id="myForm">
<input name="test" type="text">
<input name="example" type="text">
<button type="submit">Submit</button>
</form>
我有一个表单,我想在单击“提交”按钮后检索它 URL。
到目前为止我所做的是通过 JavaScript .submit()
方法提交 <form>
,然后使用 window.location.search
将 URL 存储到一个变量中,然后我也alert()
它.
当我第一次填写表格时,警报没有显示任何内容,当我第二次填写时,它 returns 我第一次填写的值。
注意:单击“提交”按钮后我需要停留在同一页面上。
编辑: 警报首先发生,然后表单被提交,变量被附加到 URL。
这是我的代码供参考:
<html>
<body>
<div>
<h1>Form 1</h1>
<form id="form1" method="GET">
Number 1:<input type="text" id="num1" name="num1">
<br>
Number 2:<input type="text" id="num2" name="num2">
<br>
Number 3:<input type="text" id="num3" name="num3">
<br>
Number 4:<input type="text" id="num4" name="num4">
<br>
<button id="sub1" onclick="submitFunc()">Submit</button>
</form>
</div>
<script>
function submitFunc()
{
document.getElementById("form1").submit();
var loc = window.location.search;
alert(loc);
}
</script>
</body>
</html>
我认为 window.location.search
你不会成功。
相反,您可以随时直接从表单中获取数据和搜索查询,如下所示:
document.getElementById("myForm").addEventListener('submit', (ev) => {
//Optional, prevents redirect
ev.preventDefault()
//ev.currentTarget is the form element
var data = new FormData(ev.currentTarget);
//modification of the code from this answer:
var queryParts = [];
var entries = data.entries()
for(var pair of entries)
queryParts.push(encodeURIComponent(pair[0]) + "=" + encodeURIComponent(pair[1]))
var query = queryParts.join("&")
var loc = window.location;
//reassemble the url
var url = loc.protocol+'//'+loc.host+loc.pathname+'?'+query
console.log(url)
})
<form id="myForm">
<input name="test" type="text">
<input name="example" type="text">
<button type="submit">Submit</button>
</form>