CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
user3383503
user3383503

Reputation: 35

Getting Radio button work

I need a jQuery function that when I select the fifth radio button and then click next button to send me to another html page.

$jquery('#5').click(function() {
  //when 5 is selected and then i click next go to another html page
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type="radio" name="answer" value="1s">first<br>
  <input type="radio" name="answer" value="2s">2<br>
  <input type="radio" name="answer" value="3s">3<br>
  <input type="radio" name="answer" value="4">4<br>
  <input type="radio" name="answer" value="5">5 (if this is selected go to another html page)<br>
  <input type="button" id="button" onclick="" value="Next">
</form>

Upvotes: 0

Views: 150

Answers (7)

Akhil
Akhil

Reputation: 471

$('#button').click(function() {
  var rvalue=$('input[type=radio]:checked').val();
  if(rvalue==5) {
    $("#myform").attr('action','http://jsfiddle.net/' );
    $("#myform").submit();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="">
  <input type="radio" name="answer" value="1s">first<br>
  <input type="radio" name="answer" value="2s">2<br>
  <input type="radio" name="answer" value="3s">3<br>
  <input type="radio" name="answer" value="4">4<br>
  <input type="radio" name="answer" value="5">5 <br>
  <input type="button" id="button" value="Next">
</form>

Upvotes: 1

aelor
aelor

Reputation: 11116

i will suggest you to get the data from the form and use it for the subsequent actions :

$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
    if ($( this ).serialize().split("=")[1] == 5){
        location.href= "http://www.facebook.com";
    }
});

this will get the value of your selected radio button on form submit and redirect on selecting 5 and clicking next.

fiddle demo here : http://jsfiddle.net/GrL9a/

Upvotes: 0

Jai
Jai

Reputation: 74748

You can try this:

$('#button').on('click', function(){
   if($(':radio[value="5"]:checked').length){
      $(this).closest('form').submit();
   }
});

or:

$('#button').on('click', function(){
   if($(':radio[value="5"]').prop('checked')){ // .prop() resutls in true/false
      $(this).closest('form').submit();
   }
});

Upvotes: 0

MrPk
MrPk

Reputation: 2940

$('#button').on('click', function(){
   if($(':radio[value="5"]:checked').length){ //jquery to understaind if element exist
      window.location.href="myurl";
   }
});

Upvotes: 1

shereifhawary
shereifhawary

Reputation: 461

you can check on the radio button while clicking

so your code can be something like

$("#button").click(function(){
   if($(this).parent('form').children('input:radio:checked').val() == '5'){
      window.location.href="http://google.com"; // replace it with your url
      return false;
   }
});

Upvotes: 0

Chris Mann
Chris Mann

Reputation: 48

Just put this into your function

window.location.replace("INSERT HTML PAGE URL");

or you can do

window.location.href("INSERT HTML PAGE URL");

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

see if selected radio button has value 5 on next click. if yes then redirect,else return. write below code in next button click handler.

if ($('input[name="answer"]:radio:checked').val()=="5"){
   //redirect 
}

Upvotes: 0

Related Questions