将输入值传递给变量数组以创建 URL 字符串

Passing values of inputs to variable array to create a URL string

提问人:junglist 提问时间:1/24/2023 更新时间:1/24/2023 访问量:85

问:

我试图解决的问题是,我希望在一个页面上有一个简单的阶梯表单,该表单收集一些基本数据以创建一个 URL 字符串,然后在另一个页面上填充计算器。

我有以下代码:

'var 参数 = { 用户: 500, 长度: 24, 路由器:“按月支付”, };

var queryString = $.param(params);
var myurl = "/calculator/?" + queryString ;

$( ".results" ).click(function() {  
    window.history.pushState('', "", myurl);
});`

在上面的例子中,用户数量(500)、长度(24)和路由器(按月付费)是我想传递到上面代码中的变量,以便创建一个附加到URL上的字符串。

原则上,上述内容适用于我给出的静态值,但我只是坚持如何从 HTML 输入中获取值。

谁能帮忙?

谢谢

我尝试将上述内容传递到要解析的数组中,但它没有给出预期的结果。

JavaScript jQuery 数组 URL 参数传递

评论


答:

0赞 Unmitigated 1/24/2023 #1

您可以将 $.serialize 与包含所有输入的元素一起使用。<form>

let queryString = $('form').serialize();
let myurl = "/calculator/?" + queryString;
console.log(myurl);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input name="users" value="500"/>
  <input name="length" value="24"/>
  <input name="router" value="Pay Monthly"/>
</form>

评论

0赞 junglist 1/24/2023
嘿 - 谢谢你。这是一个非常巧妙的解决方案!它似乎正在创造我需要的东西。一件事,我如何让浏览器真正进入链接?目前,当我点击“结果”时,它正在替换地址栏中的 URL,但保留在现有页面上......
0赞 Unmitigated 1/24/2023
@junglist 你可以使用location.replace(newUrl)
0赞 junglist 1/24/2023
如果其中一个输入是<选择>而不是标准文本输入,我将如何改变这一点?
0赞 Unmitigated 1/24/2023
@junglist 是一样的。只需记住设置选择的名称即可。
0赞 junglist 1/24/2023
我已经这样做了 - 但是它只是返回第一个选项:'<select class=“length-select” name=“length”> <option value=“12”>12</option> <option value=“24”>24</option> <option value=“36”>36</option> </select>'