根據下拉選擇更改表單操作

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>