Question

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

Answer 1

正如其他用户所建议的那样，

以下是您现在可以做的一个简单示例：

<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路数据绑定:)（正如@David Espino所提到的）

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

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

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

HTML表单操作链接在无线电选择上动态更改

1 个答案: