CODEWITHSUNDEEP
javascriptjqueryhtml
Filip
Filip

Reputation: 147

If radio box is checked go to link

I am doing a quote website and i want if a user want to see most recent quotes to press the radio button and the page will display most recent quotes . I can not figure it out how to make the radio box to send to a certain page.

<input type="radio" name="order" id="noi" value="noi">
<label for="noi">Most Recent</label>
<input type="radio" name="order" id="vechi" value="vechi" >
<label for="vechi">Most Old</label>
<input type="radio" name="order" id="aprec" value="aprec" >
<label for="aprec">Most Liked</label>

Fiddle

I want to make something like this but without be need to press the submit button, but when radio box is checked be sent automaticaly to a link. Don`t know if this is right or not but i have seen to other websites this kind of sort.

Is this possible without javascript or jquery?

Upvotes: 0

Views: 632

Answers (5)

ProllyGeek
ProllyGeek

Reputation: 15836

http://jsfiddle.net/ryBs6/47/ - Update jsfiddle

$("input[type='radio']").on("click",function(){window.open($(this).attr("href"))})

anyway this would work , because if i right click and open link in new tab it works , but single click doesnt work, i dont know if this is disabled for security reasons or what !

http://jsfiddle.net/prollygeek/6vCdX/

<a href="http://www.google.com"><input type="radio" name="order" id="noi"  value="noi"></a>
    <label for="noi">Most Recent</label>

Upvotes: 1

Just code
Just code

Reputation: 13801

 <input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="noi" value="noi">
    <label for="noi">Most Recent</label>
     <input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="vechi" value="vechi" >
    <label for="vechi">Most Old</label>
    <input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="aprec" value="aprec" >
    <label for="aprec">Most Liked</label>

This should be your html

$('input[type='radio']').click(function()
                 {

                 window.location=$(this).attr('data-href')
                 });

You js here

Demo

Now without javascript or jquery

<a href="http://stackoverflow.com"><input type="radio" name="order" id="vechi" value="vechi" ></a>

Upvotes: 0

Gilberto Avalos
Gilberto Avalos

Reputation: 512

Without jquery:

var inputs = document.getElementsByTagName('input');

Array.prototype.forEach.call(inputs, function(item){
    item.addEventListener('change', function(e){;
        location.href = e.srcElement.value; // Redirect to value
    });
});

Upvotes: 0

Dimag Kharab
Dimag Kharab

Reputation: 4519

   <script>
    $(function(){
        $("input").change(function() {
           if(this.checked) {
             window.location = this.value;
          }
      });
    });
    </script>


    <input type="radio" name="order" id="noi" value="http://stackoverflow.com">
    <label for="noi">Most Recent</label>
    <input type="radio" name="order" id="vechi" value="http://stackoverflow.com" >
    <label for="vechi">Most Old</label>
    <input type="radio" name="order" id="aprec" value="http://stackoverflow.com" >
    <label for="aprec">Most Liked</label>

FIDDLE DEMO

Upvotes: 0

WackyWalrus
WackyWalrus

Reputation: 324

If you REALLY don't want to use Javascript, try wrapping the input and the label in an anchor

<a href="http://google.com"><input type="radio" /></a>

If you want to use some javascript, do

<input onclick="window.open('http://google.com');" />

Or if you don't want to use the onclick attribute, use ProllyGeek's answer (I like his answer the best):

$("input[type='radio']").on("click",function(){window.open($(this).attr("href"))})

Upvotes: 0

Related Questions