javascript - 单击表单的提交按钮后获取 URL

标签 javascript html window.location

我有一个表单,我想在单击“提交”按钮后检索它的 URL。

到目前为止我所做的是提交 <form>通过 JavaScript .submit()方法,然后使用 window.location.search 存储 URL进入一个变量然后我也是alert()它。

当我第一次填写表格时,警报没有显示任何内容,当我第二次填写时,它返回我第一次填写的值。

注意:我需要在点击“提交”按钮后停留在同一页面上。

编辑:首先发出警报,然后提交表单并将变量附加到 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: https://stackoverflow.com/a/24964658/7448536
  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>

关于javascript - 单击表单的提交按钮后获取 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55970957/

相关文章:

javascript - IndexedDB:使用方法 add 执行函数多次 - 没有新的数据库条目

javascript - 复选框选中所有选项

javascript - coinbase oauth 授权返回 html,如何与我的网络应用程序集成

javascript - 为什么悬停时背景图像有时不显示

java - JSP 或 JavaScript 相当于 PHP 的 $_SERVER ["HTTP_HOST"]?

javascript - 为什么 Javascript 按钮不起作用?

html - 正则表达式 - 仅在 HTML 中匹配标签名称

html - CSS 技能栏动画

php - 在 ajax 调用上设置 window.location.hash

javascript - 在全局范围内分配 `var location` 重定向到不存在的文件