Choosing page depending on users choices

JavaScript
1

I’m trying to create a webpage where a user asked their name(textbox) and gender(radio buttons) on the front page. This will then link to a new page will be dependent on whether they chose if they are male or female, it will also need to display their name as entered in the text box.

So far I have the name part working using javascript this is on the front page with the form action directed to a new page:

// Called on form's `onsubmit`
function tosubmit() {
    // Getting the value of your text input
    var mytext = document.getElementById("mytext").value;

    // Storing the value above into localStorage
    localStorage.setItem("mytext", mytext);

    return true;
}

and this is on the other page:

 // Called on body's `onload` event
 function init() {
  // Retrieving the text input's value which was stored into localStorage
  var mytext = localStorage.getItem("mytext");

// Writing the value in the document
document.getElementById("name").innerHTML = mytext;

}

The HTML form I am currently using is:

        <input  id="mytext" type="text" name="data" placeholder="Enter name" maxlength="12">

        Male:  <input type="radio" name="gender" value="male" /><br />
        Female: <input type="radio" name="gender" value="female" /><br />
        <input id="name-submit" type="submit" value="">

        </form>

The main problem here is that this always directs to the same page. Can anyone tell me how I could solve this problem and add in the option for a user to choose their gender and the next page would be dependant on this choice?

Many Thanks

2

You could always change the action of the form on the fly:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <form action="http://www.google.com">
      <label><input type="radio" name="url" data-url="http://google.com" checked> Google</label><br>
      <label><input type="radio" name="url" data-url="http://yahoo.com"> Yahoo</label><br>
      <button>Off we go!</button>
    </form>
    <script>
      var buttons = document.querySelectorAll("input[type='radio']");
      [].forEach.call(buttons, function (button) {
        button.addEventListener("click", function(){
          document.forms[0].action = this.getAttribute("data-url");
        });
      });
    </script>
  </body>
</html>
3

Thanks for your reply.

With this method, how would I also encorporate sending across the name as I do already?

4

Thinking about it, it’s probably easier to have your form submit to one PHP script, then from that PHP script redirect to wherever you need to go.

You can do this using PHP’s header() function:

$gender = $_POST["gender"];
// Do some stuff here
// Then when you're finished processing your data
if ($gender=="male"){
  header('Location: http://www.example.com/page1.html');
} else {
  header('Location: http://www.example.com/page2.html');
}
5

You can set PHP variables by $var gender? Or is that your JS crossing over into your PHP code?

Speaking as a semi noob.

1 Like
6

Oops. You obviously can’t do that.
I corrected it. Thanks.

7

Thank you very much!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.