jquery - Hide and show text boxes, based on previous text boxes being filled -
i'm completely new jquery , javascript apologize in advance obvious misconceptions. currently, i'm looking way have 2 text boxes shown user, , once filled out, remaining however-many text boxes show below them.
i've looked dynamic validation bit, couldn't quite figure out how integrate it.
my environment visual studio 2013, in mvc project/asp.net approach.
here jsfiddle found that's somewhat related i'm trying do.
html:
<p>show textboxes <input type="radio" name="radio1" id="r1" value="show" onclick="getresults()">do nothing <input type="radio" name="radio1" id="r2" value="nothing"> </p>wonderful textboxes: <div class="text"> <p>textbox #1 <input type="text" name="text1" id="text1" maxlength="30"> </p> </div> <div class="text"> <p>textbox #2 <input type="text" name="text2" id="text2" maxlength="30"> </p> </div>
javascript
$(document).ready(function () { $(".text").hide(); $("#r1").click(function () { $(".text").show(); }); $("#r2").click(function () { $(".text").hide(); }); });
the code above found is, said, similar i'm trying accomplish, i'm trying make radio buttons textboxes, , once filled (not empty), reveals other textboxes (maybe 3 or 4 more) under it, hidden. i'm doing pretty simple , straightforward, said, i'm brand new this.
any ideas on solution? resources on subject appreciated.
thanks!
edit: great answers, helpful. unfortunately can't vote answers because i'm new.. thank though!
you have use blur
event , check if both textboxes not empty show other textboxes else hide them.
you need this:
$(document).ready(function () { $(".text").hide(); $("#r1").click(function () { $(".text").show(); }); $("#r2").click(function () { $(".text").hide(); }); }); var flag = false; $(".text input:text").on('blur', function () { $(".text input:text").each(function () { if ($(this).val() != "") { flag = true; } else { flag = false; } }) if (flag) $(".remaining").show(); else $(".remaining").hide(); })
Comments
Post a Comment