html - how to make a loop and if statement that loops through a different groups of radio buttons (javascript) -
**html** <li class="option"> <input type="radio" name="answer1" value="a">a</input><br> <input type="radio" name="answer1" value="b">b</input><br> <input type="radio" name="answer1" value="c">c</input><br> <input type="radio" name="answer1" value="d">d</input><br> </li> <li class="option"> <input type="radio" name="answer2" value="a">a</input><br> <input type="radio" name="answer2" value="b">b</input><br> <input type="radio" name="answer2" value="c">c</input><br> <input type="radio" name="answer2" value="d">d</input><br> </li> <li class="option"> <input type="radio" name="answer3" value="a">a</input><br> <input type="radio" name="answer3" value="b">b</input><br> <input type="radio" name="answer3" value="c">c</input><br> <input type="radio" name="answer3" value="d">d</input><br> i creating online survey. @ end of survey there submit button alert of either "please answer questions" or "submitted". alert used dependant on whether user has answered questions or not. im not sure how create loop. please help.
here, take @ demo boootply. since you're using bootstrap, jquery should part of page. here's relevent code:
$(document).ready(function(){ $('#submitbtn').click(function(e){ e.preventdefault(); if($('li.option :radio:checked').length == $('li.option').length){ // enter code here submit form alert('submitted'); }else{ alert('please answer questions'); } }); }); and html corrected to:
<ul class="list-unstyled"> <li class="option"> <label> <input type="radio" name="answer1" value="a">a </label> <br> <label> <input type="radio" name="answer1" value="b">b </label> etc..
and in case, here's link markup bootstrap/jquery files:
<!-- latest compiled , minified jquery--> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Comments
Post a Comment