Radio buttons validation while clicking on “continue” button Javascript

Question

I have create a template containing 4 radio buttons and 1 "continue" button with effects as shown below

I am trying to add a javascript code while clicking on "continue" :

1. if any radio button is selected it will pop up an alert that you need to select one buton
2. if radio 1 is selected, it will open the page choice1.php, if radio 2 is selected then it will open the page choice2.php and so on...

I was following some tutorials and test it on basic examples, it works for me but usually I see

<form onsubmit="return validateSubmit();" action="#"> 

and

<input type="submit" value="Submit">

When i change my button to submit type i lose the effect i added with css.

Here is my code snippet

  @import url('https://fonts.googleapis.com/css?family=Lato'); .container{ font-family: 'Lato', sans-serif; display: block; position: relative; margin: 40px auto; height: auto; width: 500px; padding: 20px; } h1 { color: #000000; } .container ul{ list-style: none; margin: 0; padding: 0; overflow: auto; } ul li{ color: #696969; display: block; position: relative; float: left; width: 100%; height: 100px; border-bottom: 1px solid #333; } ul li input[type=radio]{ position: absolute; visibility: hidden; } ul li label{ display: block; position: relative; font-weight: 300; font-size: 1.35em; padding: 25px 25px 25px 80px; margin: 10px auto; height: 30px; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; } ul li:hover label{ color: #1E90FF; } ul li .check{ display: block; position: absolute; border: 5px solid #696969; border-radius: 100%; height: 25px; width: 25px; top: 30px; left: 20px; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear; } ul li:hover .check { border: 5px solid #1E90FF; } ul li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 15px; width: 15px; top: 5px; left: 5px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; } input[type=radio]:checked ~ .check { border: 5px solid #1E90FF; } input[type=radio]:checked ~ .check::before{ background: #1E90FF; } input[type=radio]:checked ~ label{ color: #1E90FF; } @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700"; .flex { font-family: "Source Sans Pro", sans-serif; -webkit-font-smoothing: antialiased; min-height: 50vh; display: flex; align-items: center; justify-content: center; } a.bttn { color: #1E90FF; text-decoration: none; -webkit-transition: 0.3s all ease; transition: 0.3s ease all; } a.bttn:hover { color: #FFF; } a.bttn:focus { color: #FFF; } .bttn { font-size: 18px; letter-spacing: 2px; text-transform: uppercase; display: inline-block; text-align: center; width: 270px; font-weight: bold; padding: 14px 0px; border: 3px solid #1E90FF; border-radius: 2px; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1); } .bttn:before { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content: ''; background-color: #1E90FF; z-index: -2; } .bttn:hover:before { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; left: 0; right: 0; opacity: 1; } .bttn:focus:before { transition: 0.5s all ease; left: 0; right: 0; opacity: 1; } a.bttn{ top: -110px; } 

 <div class="container"> <h1 lign="center">Select the Type :</h1> <br/> <ul> <li> <input type="radio" id="f-option" name="selector"> <label for="f-option">Shipment</label> <div class="check"></div> </li> <li> <input type="radio" id="s-option" name="selector"> <label for="s-option">Canceled</label> <div class="check"><div class="inside"></div></div> </li> <li> <input type="radio" id="t-option" name="selector"> <label for="t-option">Ordered</label> <div class="check"><div class="inside"></div></div> </li> <li> <input type="radio" id="u-option" name="selector"> <label for="u-option">Other</label> <div class="check"><div class="inside"></div></div> </li> </ul> </div> <div class="flex"> <a class="bttn" >Continue</a> </div> 

can anyone help me please how to keep the same design of "continue" button and add to it the javascript part.

Thank you very much.

Answer 1

If you just want to switch to a different page instead of submitting a form you can simply perform a check for the value of the radio button and then redirect to the specific page directly like this:

When you uncomment the window.location.href line you would be redirected to the file that you see in the console output.

 $(function(){ $('.bttn').on('click', function(){ if($('input[name="selector"]').groupVal() === undefined){ alert('Please select an option!'); } else { console.log('choice' + $('input[name="selector"]').groupVal() + '.php'); //window.location.href = 'order' + $('input[name="selector"]').groupVal() + '.php'; } }); }); jQuery.fn.extend({ groupVal: function() { return $(this).filter(':checked').val(); } }); 

 @import url('https://fonts.googleapis.com/css?family=Lato'); .container{ font-family: 'Lato', sans-serif; display: block; position: relative; margin: 40px auto; height: auto; width: 500px; padding: 20px; } h1 { color: #000000; } .container ul{ list-style: none; margin: 0; padding: 0; overflow: auto; } ul li{ color: #696969; display: block; position: relative; float: left; width: 100%; height: 100px; border-bottom: 1px solid #333; } ul li input[type=radio]{ position: absolute; visibility: hidden; } ul li label{ display: block; position: relative; font-weight: 300; font-size: 1.35em; padding: 25px 25px 25px 80px; margin: 10px auto; height: 30px; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; } ul li:hover label{ color: #1E90FF; } ul li .check{ display: block; position: absolute; border: 5px solid #696969; border-radius: 100%; height: 25px; width: 25px; top: 30px; left: 20px; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear; } ul li:hover .check { border: 5px solid #1E90FF; } ul li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 15px; width: 15px; top: 5px; left: 5px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; } input[type=radio]:checked ~ .check { border: 5px solid #1E90FF; } input[type=radio]:checked ~ .check::before{ background: #1E90FF; } input[type=radio]:checked ~ label{ color: #1E90FF; } @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700"; .flex { font-family: "Source Sans Pro", sans-serif; -webkit-font-smoothing: antialiased; min-height: 50vh; display: flex; align-items: center; justify-content: center; } a.bttn { color: #1E90FF; text-decoration: none; -webkit-transition: 0.3s all ease; transition: 0.3s ease all; } a.bttn:hover { color: #FFF; } a.bttn:focus { color: #FFF; } .bttn { font-size: 18px; letter-spacing: 2px; text-transform: uppercase; display: inline-block; text-align: center; width: 270px; font-weight: bold; padding: 14px 0px; border: 3px solid #1E90FF; border-radius: 2px; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1); } .bttn:before { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content: ''; background-color: #1E90FF; z-index: -2; } .bttn:hover:before { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; left: 0; right: 0; opacity: 1; } .bttn:focus:before { transition: 0.5s all ease; left: 0; right: 0; opacity: 1; } a.bttn{ top: -110px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <h1 lign="center">Select the Type :</h1> <br> <ul> <li> <input type="radio" id="f-option" value="1" name="selector"> <label for="f-option">Shipment</label> <div class="check"></div> </li> <li> <input type="radio" id="s-option" value="2" name="selector"> <label for="s-option">Canceled</label> <div class="check"><div class="inside"></div></div> </li> <li> <input type="radio" id="t-option" value="3" name="selector"> <label for="t-option">Ordered</label> <div class="check"><div class="inside"></div></div> </li> <li> <input type="radio" id="u-option" value="4" name="selector"> <label for="u-option">Other</label> <div class="check"><div class="inside"></div></div> </li> </ul> </div> <div class="flex"> <a class="bttn" >Continue</a> </div>