gpt4 book ai didi

javascript - HTML 表单操作链接在单选时动态更改

转载 作者:行者123 更新时间:2023-12-03 03:21:36 26 4
gpt4 key购买 nike

当我点击提交按钮时,我希望能够“获取”输入值(productID 和 styleID),并且还能够根据我选择的单选按钮选择重定向到页面。

到目前为止,我已经尝试过此操作,它可以将我的输入值正确地输入到 URL 参数中,但操作链接不会动态更改为我的选择,因为我不知道如何更改。正如您所看到的,我希望例如 value="999"替换我的操作链接中的“VALUE OF RADIO”,以便该链接看起来像这样 http://test.ascension.systems/product/999/?productid=2095&styleid=888

<form action="http://test.ascension.systems/product/<VALUE OF RADIO>/" method="get">
<input name="productid" type="hidden"/>
<div class="row">
<div class="third-row"><input id="1" class="input-hidden" name="styleid" type="radio" value="999" />1</input>
<div class="third-row"><input id="2" class="input-hidden" name="styleid" type="radio" value="888" />2</input>
<div class="third-row"><input id="3" class="input-hidden" name="styleid" type="radio" value="777" />3</input>
</div>
<input class="submit-button" type="submit" value="Book an Appointment Now!" />
</form>

最佳答案

正如其他用户所建议的,

以下是您现在可以执行的操作的快速示例:

<html>
<body>
<form id="myForm" action="#" method="get">
<p id="demo" value = "999" onclick ="myFunction('999')">Click me.</p>
</form>
<script>
function myFunction(clr) {
console.log(clr);
document.getElementById("myForm").action =
"http://test.ascension.systems/product/"+clr;

console.log(document.getElementById("myForm").action);

//then do whatever you need to do
}
</script>

</body>
</html>

但是将来您可能会更好地使用 2 路数据绑定(bind):)(正如 @David Espino 提到的)

这将允许你使用类似的东西:

<form id="myForm" action={{actionUrl}} method="get">

这是一个可以使用的小 jsbin https://jsbin.com/kezomejixo/edit?html,js,console,output

关于javascript - HTML 表单操作链接在单选时动态更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46555140/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com