From Multiple Select - When Button is clicked it should concatenate the strings and Go to the URL

When user selects the option from following Select and clicks the button ... the values should be concatenate and should go to specific url !

for example, if user selects the product2 & product6 & product8, then on clicking the button, the values should be concatenated and create & go to that url, like example.com/268

<select id="one">
    <option value="default">Select Product</option>
    <option class="s" value="1">product1</option>
    <option class="q" value="2">product2</option>
    <option class="q" value="3">product3</option>
</select>

<select id="two">
    <option value="default">Select Version</option>
    <option class="l" value="4">product4</option>
    <option class="l" value="5">product5</option>
    <option class="c" value="6">product6</option>
</select>

<select id="three">
    <option value="default">Select OS</option>
    <option class="o" value="7">product7</option>
    <option class="o" value="8">product8</option>
    <option class="o" value="9">product9</option>
</select>

Thanks in Advance !

Answers


Here's a working example using your code :)

html:

<form id="myForm">
    <select id="one">
        <option value="default">Select Product</option>
        <option class="s" value="1">product1</option>
        <option class="q" value="2">product2</option>
        <option class="q" value="3">product3</option>
    </select>

    <select id="two">
        <option value="default">Select Version</option>
        <option class="l" value="4">product4</option>
        <option class="l" value="5">product5</option>
        <option class="c" value="6">product6</option>
    </select>

    <select id="three">
        <option value="default">Select OS</option>
        <option class="o" value="7">product7</option>
        <option class="o" value="8">product8</option>
        <option class="o" value="9">product9</option>
    </select>
        <input type="submit" value="Post" />
    </form>

javascript:

var myForm = document.getElementById("myForm");

myForm.addEventListener('submit', function(e) {
    e.preventDefault();
    var val1 = document.getElementById("one").value;
    var val2 = document.getElementById("two").value;
    var val3 = document.getElementById("three").value;
    if(val1 != "default" && val2 != "default" && val3 != "default")
        window.location.href = "http:www.example.com/" + val1 + val2 + val3;
    else
        alert("Fill out everything please!");
}, false);

And a JSFiddle to see it in action:

http://jsfiddle.net/KfH9m/1


Need Your Help

PHP how to split an array in variables

php arrays input field var

Hi everybody i need help! I've starting to learn php some week ago.

Using Thread with paint java

java multithreading swing switch-statement event-dispatch-thread

I'm developing a checkers game in Java, and I stumbled on a problem.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.