I have this simple html form. with 3 radio box options. The last radio box option is 'others' I want the text box to input other reasons to appear only when then 'other's combo box is selected. is there any way to do that?
<html>
<body>
<div class="form-group">
<input type="radio" name="option" value="a"> Missing deadline.<br>
<input type="radio" name="option" value="b"> Unsatisfied with the work.<br>
<input type="radio" name="option" value="c"> No response from Accountant.<br>
<input type="radio" name="option" value="d"> Other reasons. <br>
<input autofocus type="text" id="reason" name="reason" placeholder="Please key in the reasons.">
</div>
<body>
</html>
Give it a try.
function showTextbox() { document.getElementById("reason").style.display = "block"; }
<html> <body> <div class="form-group"> <input type="radio" name="option" value="a"> Missing deadline.<br> <input type="radio" name="option" value="b"> Unsatisfied with the work.<br> <input type="radio" name="option" value="c"> No response from Accountant.<br> <input type="radio" name="option" value="d" onclick="showTextbox()"> Other reasons. <br> <input autofocus type="text" id="reason" name="reason" placeholder="Please key in the reasons." style="display:none"> </div> <body> </html>
Here is a solution using jQuery, by setting an on-change event to the checkbox:
$("#test").change(function(){ $("#hidden").show() });
#hidden {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Click Me <input type="checkbox" id="test"> <div id="hidden">alec</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.