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

Question

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

下面的示例代码显示了每个选项值，我想将表单操作更改为按下按钮时选择的任何选项值，如何使用 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>

Answer 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() 事件可能永远不会触发。