jQuery - Display radio button seleted label value -
i working on voting application. how can display, user selected value?
detailed description: default, selected value div (<div class="your-answer">) hidden, if user selects of answer, div visible text :
<div class="your-answer"> <h3>you answer is: <span></span></h3> </div> inside <span></span> tag, want display user selected radio label.
i able achieve first half minimal knowledge in jquery, not able display selected value inside span tag, though getting value alert :(
html structure
<div id="livepoll"> <div class="question"> <h1>lorem ipsum dolar sit amet lieu?</h1> </div> <div class="question-options"> <ul> <li> <input type="radio" name="radiog" id="radio1"> <label for="radio1">terrible</label> </li> <li> <input type="radio" name="radiog" id="radio2"> <label for="radio2">needs improvement</label> </li> <li> <input type="radio" name="radiog" id="radio3"> <label for="radio3">average</label> </li> <li> <input type="radio" name="radiog" id="radio4"> <label for="radio4">good</label> </li> <li> <input type="radio" name="radiog" id="radio5"> <label for="radio5">excellent</label> </li> </ul> <div class="your-answer"> <h3>you answer is: <span></span></h3> </div> </div> <div class="vb-container"> <input type="submit" value="vote now" id="votenow" class="btn btn-vote"> </div> </div> jquery
$(document).ready(function() { $('.btn').addclass("disabled"); $(".question-options .your-answer").hide(); $('input[type="radio"]').click(function() { if($(this).attr('name') == 'radiog') { $('.btn').removeclass("disabled").addclass("reddy"); $(".question-options .your-answer").slidedown("slow"); //alert( $(this).next('label').text() ); $(".question-options .your-answer h3 span").text = $(".question-options li input[type='radio']").next('label').text(); } }); });
you can like
$(document).ready(function() { var $btn = $('.btn').addclass("disabled").prop('disabled', true); //also set disabled property true var $yans = $(".question-options .your-answer"); //add name element selector $('input[type="radio"][name="radiog"]').click(function() { $btn.removeclass("disabled").addclass("reddy").prop('disabled', false); $yans.slidedown("slow"); //you need set content text of next sibling elemnet of radio $yans.find("h3 span").text($(this).next().text()) }) });/*use simple css rule set initial display status*/ .question-options .your-answer { display: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="livepoll"> <div class="question"> <h1>lorem ipsum dolar sit amet lieu?</h1> </div> <div class="question-options"> <ul> <li> <input type="radio" name="radiog" id="radio1"> <label for="radio1">terrible</label> </li> <li> <input type="radio" name="radiog" id="radio2"> <label for="radio2">needs improvement</label> </li> <li> <input type="radio" name="radiog" id="radio3"> <label for="radio3">average</label> </li> <li> <input type="radio" name="radiog" id="radio4"> <label for="radio4">good</label> </li> <li> <input type="radio" name="radiog" id="radio5"> <label for="radio5">excellent</label> </li> </ul> <div class="your-answer"> <h3>you answer is: <span></span></h3> </div> </div> <div class="vb-container"> <input type="submit" value="vote now" id="votenow" class="btn btn-vote"> </div> </div>
Comments
Post a Comment