0

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?

7
  • Not possible without js, BUT you can create a pseudo radio button using the a tag and css, that acts like you desire.
    – Eun
    Apr 9, 2014 at 14:50
  • and how should i resolve this?
    – Filip
    Apr 9, 2014 at 14:51
  • nope u have to use jquery ! Apr 9, 2014 at 14:51
  • by triggering an jquery event on check of a checkbox Apr 9, 2014 at 14:51
  • @CodingAnt A checkbox isn't a radio button ;) Apr 9, 2014 at 14:52

5 Answers 5

1

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>
6
  • this is javascript, author wanted it without.
    – Eun
    Apr 9, 2014 at 14:53
  • 3
    I would say this is jquery :)
    – Amit Joki
    Apr 9, 2014 at 14:54
  • exactly what was i thinking Thank you!
    – Filip
    Apr 9, 2014 at 14:55
  • but how can i make open in same page not in other tab
    – Filip
    Apr 9, 2014 at 14:56
  • use window.open(url, "_self")
    – ProllyGeek
    Apr 9, 2014 at 14:57
0

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"))})
0
   <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

0

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
    });
});
0
 <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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.