根据选择值更改表单操作 - 使用 JavaScript答案

【问题标题】：Changing form action based on select value - with JavaScript根据选择值更改表单操作 - 使用 JavaScript
【发布时间】：2018-03-11 15:01:30
【问题描述】：

我有一个表单，我希望根据用户在下拉框中选择的值来更改其操作。

下面的示例代码显示了每个选项值，我想将表单操作更改为按下按钮时选择的任何选项值，如何使用 JavaScript 做到这一点？

 <form name ="form1" action="VariableFormAction" method ="post" target="_blank">

<select name="formchoice">



<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>

</select>
<input type="submit" value="Go" class="button">
</form>

【问题讨论】：

How to set form action through JavaScript?的可能重复

标签： javascript html forms

【解决方案1】：

为此，您需要在表单上指定一个 onSubmit JavaScript 事件处理程序，以检索选择列表的值并更新表单操作。

您可以使用以下代码执行此操作。

//Add onSubmit() event handler to form to call JavaScript method when the form is submitted.
<form name ="form1" onSubmit="actionOnSubmit()" method ="post" target="_blank">

<select id="formchoice" name="formchoice">

<option value="/formaction1">function 1</option>
<option value="/formaction2">function 2</option>
<option value ="/formaction3">function 3</option>

</select>
<input type="submit" value="Go" class="button">
</form>


<script>

function actionOnSubmit()
{

//Get the select select list and store in a variable
var e = document.getElementById("formchoice");

//Get the selected value of the select list
var formaction = e.options[e.selectedIndex].value;

//Update the form action
document.form1.action = formaction;

}
</script>

注意，要使其正常工作，您需要确保选择列表具有 id，因为您正在使用 document.getElementById[] JavaScript 方法来检索控件的值。

您也可以在控件的 OnChange() 事件中调用 JavaScript。问题在于它意味着在提交表单之前该值已更改。如果用户只是保留默认选择列表值，则 OnChange() 事件可能永远不会触发。

【讨论】：

【解决方案2】：

你可以尝试如下。

 function selectChanged(ctrl) {
    var val = ctrl.value;
    var frm = document.getElementById('form1');
    frm.action = val;
  }

<form id="form1" name="form1" action="/formaction1" method="post" target="_blank">
  <select name="formchoice" onchange="selectChanged(this)">
    <option value="/formaction1">function 1</option>
    <option value="/formaction2">function 2</option>
   <option value ="/formaction3">function 3</option>
 </select>
  <input type="submit" value="Go" class="button">
</form>

【讨论】：

【解决方案3】：

用于更改属性。

<select name="forma" onchange="location = this.value;">
    <option value="Home.php">Home</option>
    <option value="Contact.php">Contact</option>
    <option value="Sitemap.php">Sitemap</option>
</select>

【讨论】：

您能否提供相关的 JavaScript 和您的答案？
这是一个简单的代码，没有使用关联的javascript。