Change form action based on drop down selection

Question

Need form to change it's action depending on the selection from a specific drop down menu. On change should trigger the script and change the action before user submits. Easier said than done when you're new to JS.. thanks for any help!

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

Your code is missing the part to get the selected item from the selectbox.

document.form1.recipient.selectedIndex

The rest should be ok and i have created a Fiddle

Answer 2

I'm guessing as to your full intent, but I think that the best way to accomplish what you're doing here would be via php on the server side. Have the form direct to one particular page and then using your server-side language redirect to the proper url. For example, if you're using php do something like this:

client-side (html)

(note how the action property of the form is one fixed location)

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

No javascript required!

server-side (php)

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

On your on change function, you can obtain your currently selected element using:-

var currentValue = $("#recipient option:selected").val();

And then apply these if checks as you specified on this currentValue var as shown below:-

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

Answer 4

Try this

<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

Replace:

function chgAction(form1){...}

in

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

Code will work but it is not the ultimate dream. Better to use something like that:

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

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