客户端（html）

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

在您的更改功能上，您可以使用以下方式获取当前选定的元素： -

var currentValue = $（“＃recipient option：selected”）。val（）;

然后应用这些如果您在此currentValue var上指定的检查，如下所示： -

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

Answer 4

试试这个

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

Answer 5

替换：

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

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

5 个答案:

客户端（html）

服务器端（php）