Change Form “action” on selection

Question

I am still learning javascript and need some help changing form "action" based selected option value. Please see html code below:

<form method="post" title="myForm" id="myForm" name="myForm" action="test_auth.php">
<fieldset>
    <legend>Request Details</legend>
    <p><label>Brand: </label>
        <select id="Brand" name="Brand">
            <option value"">Select...</option>
            <option value="brand">Brand 1</option>
            <option value="brand">Brand 2</option>
            <option value="brand">Brand 3</option>
            <option value="brand">Brand 4</option>
            <option value="brand">Brand 5</option>
        </select> 
    </p>
    <br />
<p class="submit"><input class="button" name="Submit" type="submit" value="Submit" onclick="actionDetermine();" /></p>

So basically when option "Brand 1" is selected, I want to change the form "action" to test.php. I have written some javascript, see below, but the forms errors on submitting when "Brand 1" is submitted

function actionDetermine() {
var thisform = document.myForm;
if (thisform.elements["brand"] [1].selectedIndex) {
        thisform.action ="test.php";
} else if (thisform.elements["brand"] [2].selectedIndex) {
        thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [3].selectedIndex) {
        thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [4].selectedIndex) {
        thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [5].selectedIndex) {
        thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [0].selectedIndex) {
        thisform.action="test_auth.php";
}
return true;
};

Obviously there is something wrong with the above, can anyone help me out?

Cheers!

Answer 1

You could also have the actions defined in a dataset:

<form method="post" title="myForm" id="myForm" name="myForm" onsubmit="submit_function(this)"    action="test_auth.php">
    <fieldset>
    <legend>Request Details</legend>
    <label>Brand: </label>
    <select id="Brand" name="Brand">
        <option value"">Select...</option>
        <option value="brand 1" data-action="test.php">Brand 1</option>
        <option value="brand 2">Brand 2</option>
        <option value="brand 3">Brand 3</option>
        <option value="brand 4">Brand 4</option>
        <option value="brand 5">Brand 5</option>
    </select> 
    <button class="button" name="Submit" value="Submit">Submit</button>
    </fieldset>
</form>

In your javascript code, you could have:

function submit_function(form) {
    var selected = document.getElementById('Brand');
    var dataset = selected[selected.selectedIndex].dataset;

    if (dataset.action) {
        form.action = dataset.action;
    }
    return true;
};

Answer 2

I would swap the

<input class="button" name="Submit" type="submit" value="Submit" onclick="actionDetermine();" />

to

<input class="button" type="button" value="Submit" onclick="actionDetermine();" />

And then I would make the <select> tags <options> have the values of 1, 2, 3, 4. Then do the following with your code.

var actions = ['brand1_process.php', 'brand2_process.php', 'brand3_process.php', 'brand4_process.php'];
//actions correspond to the values of the selector

var brand = document.getElementById('Brand').value;
brand = brand-1;

document.getElementById('myForm').setAttribute('action', actions[brand]);
document.getElementById('myForm').submit();

I'm pretty sure that's what you need to do though I haven't messed around with forms in a long time.