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（）事件可能永远不会触发。

Answer 2

您可以尝试以下内容。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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更改基于选择值的表单操作

3 个答案: