0

I am developing a html page in which the user submit a form which icludes a dropdown box to choose a value from. Once the user submit the form i want to submit the form and redirect users to different pages based on what they have chooses in the dropdown box.

HTML form code

<form action="#" method="post" class="form-group" id="dtls">
          <label for="sp">Choose one:</label><select name="sp" id="sponsor" class="form-control">
            <option value="mark" id="s1">Mark</option>
            <option value="markus" id="s2">Markus</option>
          </select>
          <label for="mail">Your Email:</label><input type="email" name="mail" class="form-control" placeholder="Email Address...">
          <input type="submit" name="sub" class="btn form-control btn-success" id="but">
        </form>

Can anyone suggest me a good way to tackle this challenge? Thanks

Ashan
  • 31
  • 1
  • 6
  • In PHP (since you've tagged that), do whatever you need with the form values and then perform some logic (a basic `if` or `switch`) and redirect them to the relevant page. – Reinstate Monica Cellio Aug 17 '17 at 15:28

2 Answers2

0

Sure, something like this in your JS:

redirectPage() {
  // Gets value of dropdown
  var selectedOption = $("#sponsor option:selected").val();

  // Picks correct url to go to
  var url;
  switch(selectedOption) {
    case "mark":
      url = "your link #1 here";
      break;
    case "markus":
      url = "your link #2 here";
      break;
    default:
      url = "";
      break;
  }

  // Changes current page and keeps back history
  window.location.assign(url);
}

An easy way to get rid of the big switch statement is to just have the value of each option be the url, if you're not using the dropdown values for anything else. You can replace .val() with .text() at any time to get "Mark" and "Markus" out of the dropdowns.

References:

Get the value of a dropdown in jQuery

How to redirect to another webpage in JavaScript/jQuery?

mintychai
  • 281
  • 3
  • 10
0

Php

if(isset($_POST["sub"])) {
    $value = $_POST["sp"];
    header("location: /$value");
}

You could do if statements with the value or you can directly redirect user with setting a header like I did or echo javascript window.location

jQuery

$("#dtls").submit(function() {
    var value = $("#sponsor").val();
    if(value == "mark") {
        window.location.href = "/mark";
    } elseif(value == "markus") {
        window.location.href = "/markus";
    }
});
Toni Isotalo
  • 57
  • 5