How to empty a toggled text box that has focus on a change of check box?
Question
I have this https://jsfiddle.net/5ep34nj8/5/ and the toggle feature works great.
Aside, I'd like to empty the toggled text box when check box isn't checked. I've searched for about an hour now without any result.
I tried to take out the focus on the text box, and it doesn't change a thing. Text box won't empty itself as it is now.
function toggleOtherLanguagesTextBox() { var effect = 'slide'; $("#otherLanguagesPartial").toggle(effect, 0); } $("#otherLanguagesPartial").toggle(false); $("#other").click(function() { toggleOtherLanguagesTextBox(); if (!$("#other").is(":checked")) { $("#otherLanguages").focus(false); $("#otherLanguagesPartial").val(""); } if ($("#other").is(":checked")) $("#otherLanguages").focus(); });
body { background: #20262E; padding: 20px; font-family: Helvetica; color: #fff; }
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" /> </head> <body> <input type="checkbox" id="other" name="languages[]" value="Other" /> <label for="other">Other</label> <div id="otherLanguagesPartial"> <label for="otherLanguages">Please Specify:</label> <input type="text" id="otherLanguages" name="languages[]"> </div> </body> <footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> </footer>
1 answers
solution1
2 ACCPTED 2019-04-17 13:21:32
Currently you are trying to empty the div instead of input . So use $("#otherLanguages").val(""); instead of $("#otherLanguagesPartial").val(""); in your click method.
See the Snippet below:
function toggleOtherLanguagesTextBox() { var effect = 'slide'; $("#otherLanguagesPartial").toggle(effect, 0); } $("#otherLanguagesPartial").toggle(false); $("#other").click(function() { toggleOtherLanguagesTextBox(); if (!$("#other").is(":checked")) { $("#otherLanguages").focus(false); $("#otherLanguages").val(""); } if ($("#other").is(":checked")) $("#otherLanguages").focus(); });
body { background: #20262E; padding: 20px; font-family: Helvetica; color: #fff; }
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" /> </head> <body> <input type="checkbox" id="other" name="languages[]" value="Other" /> <label for="other">Other</label> <div id="otherLanguagesPartial"> <label for="otherLanguages">Please Specify:</label> <input type="text" id="otherLanguages" name="languages[]"> </div> </body> <footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> </footer>
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.