CODEWITHSUNDEEP
javascriptjqueryhtml
Ashraful Islam Nayeem
Ashraful Islam Nayeem

Reputation: 3

How to add multiple dropdown form with submit button combine value and make another html page name to go to it

I want the submit button to act on the combined values in the two didferent dropwdown menu's in the form.Which will be a html page name.

For example... west and winter is a different option which will creat "westwinter.html" then west and summer is a different option which will make "westsummer.html" . and clicking submit button the created page will load.I have already created such types of html page named (ex. westwinter.html).

I'm struggeling for days to make this work. I feel some how this must be possible. Please help!

This is the code I use. When I replace the value to a page name (ex. westsummer.html) . The page will be loaded on submit (go). I want the values of the first dropdown and second dropdown to be counted and the result should be a page name on submit. Finaly there should be 16 different html page name. Iwant this solution with jQuery or javascript.

  <div class="selCont">
  <h2>pick an option</h2>

  <select id="selection" name="selection">
  <option value="1">West</option>
  <option value="2">East</option>
  <option value="3">North</option>
  <option value="4">South</option>
  </select>

  <select id="selection" name="selection">
  <option value="1">Winter</option>
  <option value="2">Spring</option>
  <option value="3">Summer</option>
 <option value="4">Fall</option>

 </select>
 <button class="go-btn" type="submit">Go</button>
 </div>

Upvotes: 0

Views: 981

Answers (1)

Jon Warren
Jon Warren

Reputation: 857

Firstly, let's set unique IDs for the select tags, and lets set the values to the actual strings (we could keep them numeric and perform a switch on them later to determine their value, but it's easier this way):

<select id="direction" name="selection">
    <option value="west">West</option>
    <option value="east">East</option>
    <option value="north">North</option>
    <option value="south">South</option>
</select>

<select id="season" name="selection">
    <option value="winter">Winter</option>
    <option value="spring">Spring</option>
    <option value="summer">Summer</option>
    <option value="fall">Fall</option>
</select>

Next, let's write a function to compose a link using the values from those select tags. I've used document.querySelector here, but you can easily change it out for jQuery if you'd like:

function getLink() {
    var direction = document.querySelector("#direction").value;
    var season = document.querySelector("#season").value;
    //Assuming that the html files are in the same folder as the current page
    return "./" + direction + season + ".html";
}

Finally, let's update our button to change the page location to the new link when clicked:

<button class="go-btn" type="submit" onClick="window.location.href = getLink()">Go</button>

Here's everything altogether:

<!DOCTYPE html>
<html lang="en">
<body>
    <div class="selCont">
        <h2>pick an option</h2>
            
        <select id="direction" name="selection">
            <option value="west">West</option>
            <option value="east">East</option>
            <option value="north">North</option>
            <option value="south">South</option>
        </select>

        <select id="season" name="selection">
            <option value="winter">Winter</option>
            <option value="spring">Spring</option>
            <option value="summer">Summer</option>
            <option value="fall">Fall</option>
        </select>

        <button class="go-btn" type="submit" onClick="window.location.href = getLink()" >Go</button>
    </div>
</body>
<script>
    function getLink() {
        var direction = document.querySelector("#direction").value;
        var season = document.querySelector("#season").value;
        return "./" + direction + season + ".html";
    }
</script>
</html>

Upvotes: 1

Related Questions