HTML Button Link to Website from Text

Question

I am trying to use an HTML button to link to a new website given a provided text field input.

I have choices like this:

Option: <br />
                One <input type="radio" value="Short"
                name="option" <br />: 
                Two <input type="radio" value="Long"
                name="option" <br />:
                Three <input type="radio" value="Zero"
                name="option" <br />:

And I want to have a button go to .../one if One is selected, .../two if Two is selected, etc...

<form> <input class="MyButton" type="button" value="Google"
         onclick=window.location.href='www.google.com' /> </form>

I know this is how I go to a specified link, but I want to go to a link based on my option choice, not a static choice. Thanks

Answer 1

Af first you have to fix your HTML Error. No input element has end tag.

Wrap one, two, three with span

Option: <br />
   <span>One</span> <input type="radio" value="Short" name="option" /> <br />
   <span>Two</span> <input type="radio" value="Long" name="option" /> <br />
   <span>Three</span> <input type="radio" value="Zero" name="option" /> <br />

<form> <input class="MyButton" type="button" value="Google" /> </form>

Then you can get your select value and set button onclick value

$(document).ready(function(){

   $("input[type='radio']").click(function(){
       var text = $(this).prev('span').text();
       $('form > input').attr('onclick',
            "javascript:window.location.href='https://www.google.com/" + text + "'");
   });

});

After that you click on Google button, you will redired to https://www.google.com/yourSelectValue

Answer 2

Use javascript for this.

Make a function call when the button is clicked. something like this...

<input type="button" onclick="myfunction()"/>

and inside the function get the values from text input and use appropriate methods to go to the link.

Answer 3

I personally wouldn't use javascript for this, you can just use a normal button with the URL in the formaction attribute.

<form>
    <button formaction="http://stackexchange.com">Stackexchange</button>
</form>

The form tags are required.

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction