根据下拉选择更改表单操作

Question

需要表单以根据特定下拉菜单中的选择更改其操作。 更改应该触发脚本并在用户提交之前更改操作。说起来容易做起来难，当你刚接触JS时感谢你的帮助！

Javascript: 

<script type="application/javascript"> 

function chgAction(form1){ 

    if(recipient=="jordachedotcom_Advertising") 
    {document.form1.action = "/adv_contact.php";} 

    else if(recipient=="dept_Public_Relations") 
    {document.form1.action = "/pr_contact.php";} 

    else if(recipient=="dept_Manufacturing") 
    {document.form1.action = "/manuf_contact.php";} 

    else if(recipient=="dept_Brands") 
    {document.form1.action = "/brands_contact.php";} 

    else if(recipient=="dept_Holdings") 
    {document.form1.action = "/holdings_contact.php";} 

    else if(recipient=="dept_Vendor_Inquiry") 
    {document.form1.action = "/vend_contact.php";} 

    else if(recipient=="dept_Other_Inquiry") 
    {document.form1.action = "/misc_contact.php";} 

    } 
</script> 


FORM HTML: 

<form id="form1" name="form1" method="post" action="/"> 

Please choose a dept:<br/> 
     <select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()"> 
     <option value="" selected="selected">Select</option> 
     <option value="dept_Advertising">Advertising</option> 
     <option value="dept_Public_Relations">Public Relations</option> 
     <option value="dept_Manufacturing">Manufacturing</option> 
     <option value="dept_Brands">Brands</option> 
     <option value="dept_Holdings">Holdings</option> 
     <option value="dept_Vendor_Inquiry">Vendor Inquiry</option> 
     <option value="dept_Other_Inquiry">Other Inquiry</option> 
     </select> 

<input type="submit"> 
</form> 

Answer 1

您的代码缺少的部分，从选择框获得所选择的项目。

document.form1.recipient.selectedIndex 

其余的应该没问题，我已经创建了一个Fiddle

Answer 2

我猜为完整的意图，但我认为最好的方式来完成你在这里做什么是通过在服务器端PHP。让表单直接到一个特定页面，然后使用服务器端语言重定向到正确的URL。例如，如果你正在使用PHP做这样的事情：

客户端（HTML）

（注意形式的action属性是如何一个固定位置）

<form id="form1" name="form1" method="post" action="./form-handler.php"> 
    Please choose a dept:<br/> 
    <select name="recipient" id="recipient" size="1"> 
     <option value="" selected="selected">Select</option> 
     <option value="dept_Advertising">Advertising</option> 
     <option value="dept_Public_Relations">Public Relations</option> 
     <option value="dept_Manufacturing">Manufacturing</option> 
     <option value="dept_Brands">Brands</option> 
     <option value="dept_Holdings">Holdings</option> 
     <option value="dept_Vendor_Inquiry">Vendor Inquiry</option> 
     <option value="dept_Other_Inquiry">Other Inquiry</option> 
    <select> 
    <input type="submit"> 
</form> 

无需要JavaScript！

服务器端（PHP）

形式，hander.php：

<?php 
$recipient = $_POST['recipient']; 

//Based on the value of the $recipient value redirect to the correct page 
//using the header function 

switch($recipient) { 
    case 'dept_Manufacturing': 
     header('Location: ./manuf_contact.php'); exit; 
    case 'dept_Brands': 
     header('Location: ./brands_contact.php'); exit; 
    case 'dept_Holdings': 
     header('Location: ./holdings_contact.php'); exit; 
    //... etc, etc 
} 

Answer 3

替换：

function chgAction(form1){...} 

在

chgAction = function(form1) {....} 

代码会工作，但它是不是最终的梦想。最好使用类似的东西：

(function(){ 
var form = document.querySelector('#form1'), 
    select = form.querySelector('#recipient'), 
    action = { 
     'jordachedotcom_Advertising': '/adv_contact.php', 
     'dept_Public_Relations': '/pr_contact.php', 
     'dept_Manufacturing': '/manuf_contact.php', 
     'dept_Brands': '/brands_contact.php', 
     'dept_Holdings': '/holdings_contact.php', 
     'dept_Vendor_Inquiry': '/vend_contact.php', 
     'dept_Other_Inquiry': '/misc_contact.php' 
    }; 

select.addEventListener('change', function() { 
    var el = this, value = el.value; 
    if (action[value]) { 
     form.action = action[value]; 
    } 
}, false);}()); 

如jQuery：

(function($){ 
var form = $('#form1'), 
    select = $('#recipient'), 
    action = { 
     'jordachedotcom_Advertising': '/adv_contact.php', 
     'dept_Public_Relations': '/pr_contact.php', 
     'dept_Manufacturing': '/manuf_contact.php', 
     'dept_Brands': '/brands_contact.php', 
     'dept_Holdings': '/holdings_contact.php', 
     'dept_Vendor_Inquiry': '/vend_contact.php', 
     'dept_Other_Inquiry': '/misc_contact.php' 
    }; 

select.on('change', function() { 
    var el = $(this), value = el.val(); 
    if (action[value]) { 
     form.attr('action', action[value]); 
    } 
});}(jQuery)); 

Answer 4

在您的修改功能，您可以使用获得您当前选择的元素： -

VAR CurrentValue的= $（” #recipient option：selected“）。val（）;

然后，如果支票您在本CurrentValue的变种规定如下应用这些： -

if(currentValue == "dept_advertising"){ 
$("#form1").attr("action",customURL); 
} 

Answer 5

试试这个

<form id="form1" name="form1" method="post" action="/"> 
Please choose a dept:<br/> 
     <select name="recipient" id="recipient" size="1" onChange="javascript:chgAction()"> 
     <option value="" selected="selected">Select</option> 
     <option data-action="/adv_contact.php" value="dept_Advertising">Advertising</option> 
     <option data-action="/pr_contact.php" value="dept_Public_Relations">Public Relations</option> 
     <option data-action="/manuf_contact.php" value="dept_Manufacturing">Manufacturing</option> 
     <option data-action="/brands_contact.php" value="dept_Brands">Brands</option> 
     <option data-action="/holdings_contact.php" value="dept_Holdings">Holdings</option> 
     <option data-action="/vend_contact.php" value="dept_Vendor_Inquiry">Vendor Inquiry</option> 
     <option data-action="/misc_contact.php" value="dept_Other_Inquiry">Other Inquiry</option> 
     </select> 

<input type="submit"> 
</form> 

<script> 
function chgAction(){ 
    $('#form1').attr({'action':$('option:selected').attr('data-action')}); 
    $('#form1').submit(); 
} 
</script>