Question

我有5个这样的表格

<p>
    Form1:
    <form action='Form1.php' method='POST'>
        <input name='charname' id='charname' placeholder='Charname'>
        <input name='server' id='server' placeholder='Server'>
        <input name='region' id='region' placeholder='Region'>
        <input type='submit' name='submit'>        
    </form>
</p>

现在我想用单个表单替换5个表单，其中action取自下拉列表，如下所示：

<select name="dropdown" size="5">
   <option value="form1.php">Form1</option>
   <option value="form2.php">Form2</option>
   <option value="form3.php">Form3</option>
   <option value="form4.php">Form4</option>
   <option value="form5.php">Form5</option>
</select>

我怎样才能做到这一点？

提前致谢

Answer 1

您应该使用jQuery

实施例 -

<强> HTML

<select name="dropdown" id="formaction" size="5">
   <option value="form1.php">Form1</option>
   <option value="form2.php">Form2</option>
   <option value="form3.php">Form3</option>
   <option value="form4.php">Form4</option>
   <option value="form5.php">Form5</option>
</select>

jQuery代码

<script>
$("#formaction").on("change", function() {
  var getVal = $(this).val();
        $("#YourFormId").attr("action", getVal); //replace #YourFormId with your form id
});
</script>

Answer 2

尝试使用javascript，

<强> HTML ：

<form action='Form1.php' method='POST' id="form_main">
     <input name='charname' id='charname' placeholder='Charname'>
     <input name='server' id='server' placeholder='Server'>
     <input name='region' id='region' placeholder='Region'>
     <input type='submit' name='submit'>        
</form>

<select name="dropdown" size="5" id="form_test" onchange="if (this.selectedIndex) func();">
   <option value="form1.php">Form1</option>
   <option value="form2.php">Form2</option>
   <option value="form3.php">Form3</option>
   <option value="form4.php">Form4</option>
   <option value="form5.php">Form5</option>
</select>

<强>的Javascript ：

function func(){
   var elem = document.getElementById("form_test");
   var form_val = elem.options[elem.selectedIndex].value;
   document.getElementById('form_main').setAttribute("action", form_val);
}

Answer 3

我认为一旦下拉列表被更改并且在提交表单之前，您将不得不使用JavaScript来更改表单的action属性。虽然这有点哈哈！

您是否可以将数据发布到单个处理程序，然后根据下拉列表的值处理其中的逻辑？它会更强大。

Answer 4

var url = $( "select[name=dropdown] option:selected" ).val();

您可以使用.val()功能

来获取它

Answer 5

你可以这样做，

首先，如果您的页面中有多个表单，请为您的主表单提供名称或ID或任何标识符，否则确定

$(document).on("change","select[name='dropdown']", function(){
   var cur_action = $(this).val();
   // $("form[name='Yourwish']").attr("action",cur_action);
   //OR
   //  $("#yourid").attr("action",cur_action);
   //OR 
   //$(form).attr("action",cur_action);
});

我已经给出了你可以尝试的所有尝试组合

使用下拉列表中的操作表单

5 个答案: