How do I use a radio button to send a user to a new website in JavaScript?

What I want the program to do is make a form and have 2 radio buttons and 1 text. Then I want it to collapse the text and radio value together into one and take me to that page:

If I input text with like "facebook" and the radiobutton value is .com I want it to take facebook + .com and send me to that page.

<!doctype html>
<html>

<head>
<title>A Basic Form</title>
<style type="text/css">
</style>
</head>

<body onunload="Bye()">

<form>
    <fieldset>
        <legend>Redirection: </legend>
        <div>
            <label>Where do you want to go?</label>
            <input type="text" id="input" name="input" size="7">
            <input type="submit" id="submit" name="submit" value="Submit" onclick="go()">
        </div>
        <div>
            <input type="radio" id="no" name="end" value=".no">
            <label for=".no">.no</label>
            <br />
            <input type="radio" id="com" name="end" value=".com">
            <label for=".com">.com</label>
        </div>
    </fieldset>
</form>
<script type="text/javascript">
    function go() {
        var end = "";
        if (document.getElementById("no").checked) {
            end = document.getElementById("no").value;
        } else {
            end = document.getElementById("com").value;
        }

        var input = document.getElementById("input").value;
        var together = input + end;
        window.location.replace("http://www." + together);
    }
</script>
</body>

</html>

Answers:

Answer

Alternatively, return false from the onclick handler to prevent the form submit.

Try this code:

<html>
<head>
</head>
<body>
  <form>
    <fieldset>
        <legend>Redirection: </legend>
        <div>
            <label>Where do you want to go?</label>
            <input type="text" id="input" name="input" size="7">
            <input type="submit" id="submit" name="submit" value="Submit" onclick="return go()">
        </div>
        <div>
            <input type="radio" id="no" name="end" value=".no">
            <label for=".no">.no</label>
            <br />
            <input type="radio" id="com" name="end" value=".com">
            <label for=".com">.com</label>
        </div>
    </fieldset>
  </form>
  <script type="text/javascript">
    function go() {
        var end = "";
        if (document.getElementById("no").checked) {
            end = document.getElementById("no").value;
        } else {
            end = document.getElementById("com").value;
        }

        var input = document.getElementById("input").value;
        var together = input + end;
        window.location.replace("http://www." + together);
        return false;
    }
  </script>
</body>
</html>

brso05's analysis seems to be spot on... But I can't really explain it. It seems that Chrome is delaying the side effects of the location.href.replace (which should be navigating away from the page) until after the form submit... I have a feeling you have hit a browser bug here. I can't imagine this is spec-compliant.

Answer

Change type="submit" to type="button".

Change this line:

<input type="submit" id="submit" name="submit" value="Submit" onclick="go()">

to:

<input type="button" id="submit" name="submit" value="Submit" onclick="go()">

In this case you don't need to submit a form. You are just trying to redirect the url. You didn't specify where to submit the form so it is submitting to itself that is your problem.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.