Javascript HTML表单操作链接在选择单选时动态更改_Javascript_Html

Javascript HTML表单操作链接在选择单选时动态更改

javascript html

Javascript HTML表单操作链接在选择单选时动态更改,javascript,html,Javascript,Html,当我点击提交按钮时，我希望能够“获取”输入值（productID和styleID），并且能够根据我选择的单选按钮重定向到页面到目前为止，我已经尝试了这个方法，它将我的输入值正确地输入到URL参数中，但是操作链接并没有动态地更改到我的选择中，因为我不知道如何更改。如您所见，例如，我希望value=“999”替换我的操作链接中的“value OF RADIO”，使链接看起来像这样http://test.ascension.systems/product/999/?productid=2095&st

当我点击提交按钮时，我希望能够“获取”输入值（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>


1.
2.
3.

正如其他用户所建议的

以下是您目前可以做的一个快速示例：

<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>


单击我
函数myFunction（clr）{
控制台日志（clr）；
document.getElementById（“myForm”）。操作=
"http://test.ascension.systems/product/“+clr；
log（document.getElementById（“myForm”）.action）；
//然后做你需要做的事
}

但将来使用双向数据绑定可能会更好：）（正如@davidespino所提到的）

这将允许您使用以下内容：

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

这里有一个小jsbin可供使用

如果在单击submit时表单已经呈现，并且值来自用户操作，那么我唯一能想到的方法就是在jquery上手动调用

submit

，并将该参数附加到url。或者，您也可以将您的范例更改为更MVVM的样式，如击出或角度，支持双向绑定。相信我，第一个选项可能会更简单…可能会重复，特别是检查感谢您的建议，现在就看。我认为这不会有帮助，因为OP希望知道如何使用所选的

收音机设置动作url。“我希望能够获得输入值（productID和styleID），并且能够根据我选择的单选按钮重定向到页面”@NewToJS这不完全是我想要的，但它很有用。现在，对于这个问题，我不确定我应该如何根据单击哪个来更改“999”值。也许再加上一些逻辑条件？不确定。@pkmangg我认为这更接近您要查找的内容打开浏览器控制台查看完整url。@Rose如果有帮助，请看一下我的示例。它实际获取要在url中使用的选定的单选元素值，而不是在函数调用中传递静态值/参数。@pkmangg产品ID是否与元素ID
匹配？我假设是这样的，如果是这样，您可以设置一个隐藏的输入，并将set name属性设置为productid
，并在设置表单url时设置值。。。这是让表单在查询中提交的一种方法。示例记住使用浏览器控制台查看URL，因为JSFIDLE无法发布到该URL。