how to do page redirection with two drop down menus selections with javascript

Question

I am a total beginner to JavaScript and appreciate your help with my question.

I need to have two drop down menus, each with URL values, when selected, would append together and redirect to the selected URL after hitting a submit button.

It is similar to the live example from a similar article: http://www.jsfiddle.net/Yxw7k/13

If the value of the second option in the first drop down was lets say: /a/something1 , and the value of the third option in the second drop down was /3/index.html, after hitting submit you'd be redirected to www.somesite.com/a/something1/3/index.html I am hoping to achieve this without the use of jQuery. How could I use regular JS to achieve this?

There's a good q&a already on SE that may help you get there: stackoverflow.com/questions/2423868/… — Sean
– Sean, Commented Nov 2, 2012 at 18:15

David Thomas · Accepted Answer · 2012-11-02 18:15:25Z

I'd suggest something like the following:

function makePath(directory, file, domain) {
    if (!directory || !file) {
        return false;
    }
    else {
        directory = directory.nodeType == 1 ? directory.value : document.getElementById(directory).value;
        file = file.nodeType == 1 ? file.value : document.getElementById(file).value;
        return newURL = [domain || 'http://' + location.hostname, directory, file].join('/');
    }
}

document.getElementById('fileName').onblur = function(){
    // using console.log() in the demo
    document.location = makePath('directoryPath', this, 'http://example.com');
}

JS Fiddle demo.

The above is used with the following HTML:

<select id="directoryPath">
    <option>directoryA</option>
    <option>directoryB</option>
    <option>directoryC</option>
</select>


<select id="fileName">
    <option>file1.html</option>
    <option>file2.html</option>
    <option>file3.html</option>
</select>

fpilee · Accepted Answer · 2012-11-02 18:21:08Z

0

with jquery is more easy select the values, you could make a function who detect the values selected and then update the redirection link when the user press the submit button. So you need add the function to the onclick event of the button.

answered Nov 2, 2012 at 18:21

fpilee

2,1183 gold badges26 silver badges40 bronze badges

Collectives™ on Stack Overflow

how to do page redirection with two drop down menus selections with javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related