jquery - Razor Checkbox change visibility of text fields & dropdowns -
simple one!
i'm creating huge costing web application, contains huge input form loads of fields want checkbox
standard: @html.checkbox("standard", false) to when clicked change visibility of
my textfields
input id="kid" type="text" value=@viewbag.kammid name="kammid" />
& #2 dropdownlists
@html.dropdownlist("selectedfacing", (selectlist)viewbag.facingsheets)
ive checked tons of forums nothing seems work, think need use jquery, nothing when put code @ bottom of view.
<script type="text/javascript"> $(function () { $("#standard").click(function () { var checked = $(this).attr("checked"); if (checked) { $("kammid").show(); $("kammod").hide(); @viewbag.test = poo; } else { $("kammod").hide(); $("kammid").show(); @viewbag.test = wee; } }); }); </script> edited script (also not working)
<script type="text/javascript"> $(function () { $("#standard").click(function () { var checked = $(this).attr("checked"); if ($(this).is(':checked')) { $("#kid").show(); $("#kod").hide(); } else { $("#kod").hide(); $("#kid").show(); } }); }); </script> full view code is
@model ienumerable<webapplication4.models.coresheets> .... @using (html.beginform("iflexcst", "costing", formmethod.post)) { <form> <h2>enter dimensions:</h2> standard: @html.checkbox("standard", false) <br> special: @html.checkbox("special", false) <br> kamm id:<br> <input class="foo" id="kid" type="text" value=@viewbag.kammid name="kammid" /> <br> kamm od: <br> <input id="kod" type="text" value=@viewbag.kammod name="kammod" /> <br> spacer id:<br> <input type="text" name="spacerinnerdim" value=@viewbag.spacerid> <br> spacer/facing od:<br> <input type="text" name="spacerouterdim" value=@viewbag.spacerod> <br> washers od:<br> <input type="text" name="washouterdim" value=@viewbag.washod> <br> isolating washer id:<br> <input type="text" name="isowashinnerdim" value=@viewbag.isoid> <br> steel washer id:<br> <input type="text" name="steelwashinnerdim" value=@viewbag.steelid> <br> <h2>enter materials:</h2> <br> kamm core:<br> @html.dropdownlist("selectedcore", (selectlist)viewbag.coresheets) <br> spacer core:<br> @html.dropdownlist("selectedspacer", (selectlist)viewbag.spacersheets) <br> kamm , space facing:<br> @html.dropdownlist("selectedfacing", (selectlist)viewbag.facingsheets) <br> steel washer core:<br> @html.dropdownlist("selectedsteelcre", (selectlist)viewbag.coresheets) <br> isolating washer core:<br> special: @html.checkbox("bought in iso washers?", false) @html.dropdownlist("selectedisocre", (selectlist)viewbag.coresheets) <br> isolating washer facing:<br> @html.dropdownlist("selectedisofacing", (selectlist)viewbag.facingsheets) <br> <h2>washer , sleeve quantity , prices:</h2> <br> steel washer quantity:<br> <input type="text" name="steelwashquan" value=@viewbag.steelq> <br> <br> isolating washer quantity:<br> <input type="text" name="isowashquan" value=@viewbag.isoq> <br> <br> sleeve quantity:<br> <input type="text" name="sleevequan" value=@viewbag.sleeveq> <br> <br> sleeve price:<br> <input type="text" name="sleeveprice" value=@viewbag.sleevepr> <br> <br> isolating washer price:<br> <input type="text" name="isoprice" value=@viewbag.isopr> <br> <br> cost: <br> <input id="text3" type="number" value=@viewbag.result /> <input type="submit" value="submit" /> </form> } <script type="text/javascript"> $(function () { $("#standard").change(function () { if ($(this).is(":checked")) { $(".foo").show(); } else { $(".foo").hide(); } }); }) </script> here
enter dimensions:
standard: @html.checkbox("standard", false) <br> special: @html.checkbox("special", false) <br> kamm id:<br> <input class="foo" id="kid" type="text" value=@viewbag.kammid name="kammid" /> <br> kamm od: <br> <input class="foo" id="kod" type="text" value=@viewbag.kammod name="kammod" /> <br> <script type="text/javascript"> $(function () { $("#standard").change(function () { if ($(this).is(":checked")) { $(".foo").show(); } else { $(".foo").hide(); } }); }) </script> edit 5 billion
@model ienumerable<webapplication4.models.coresheets> @{ viewbag.title = "iflexcst"; layout = "~/views/shared/_layout.cshtml"; } @using (html.beginform("iflexcst", "costing", formmethod.post)) { <h2>enter dimensions:</h2> <h5> standard: </h5> @html.checkbox("standard", false); <br> <h5> special: </h5> @html.checkbox("special", false); <br> <h5> id:</h5> <br> <input class="foo" id="kid" type="text" value=@viewbag.kammid name="kammid" /> <br><h5>kamm od: </h5> <br> <input class="foo" id="kod" type="text" value=@viewbag.kammod name="kammod" /> <br> <h5> spacer id</h5><br> <input type="text" name="spacerinnerdim" value=@viewbag.spacerid> <br> <h5> spacer/facing od:</h5> <br> <input type="text" name="spacerouterdim" value=@viewbag.spacerod> <br> <h5>washers od: </h5> <br> <input type="text" name="washouterdim" value=@viewbag.washod> <br> <h5>isolating washer id: </h5> <br> <input type="text" name="isowashinnerdim" value=@viewbag.isoid> <br> <h5> steel washer id:</h5> <br> <input type="text" name="steelwashinnerdim" value=@viewbag.steelid> <br> <h2>enter materials:</h2> <br> <h5> kamm core: </h5> <br> @html.dropdownlist("selectedcore", (selectlist)viewbag.coresheets); <br> <h5> spacer core:</h5> <br> @html.dropdownlist("selectedspacer", (selectlist)viewbag.spacersheets); <br> <h5> kamm , space facing: </h5> <br> @html.dropdownlist("selectedfacing", (selectlist)viewbag.facingsheets); <br> <h5>steel washer core: </h5> <br> @html.dropdownlist("selectedsteelcre", (selectlist)viewbag.coresheets); <br> <h5> isolating washer core: </h5> <br> <h5> special:</h5> @html.checkbox("bought in iso washers?", false); @html.dropdownlist("selectedisocre", (selectlist)viewbag.coresheets); <br> <h5>isolating washer facing: </h5> <br> @html.dropdownlist("selectedisofacing", (selectlist)viewbag.facingsheets); <br> <h2>washer , sleeve quantity , prices:</h2> <br> <h5> steel washer quantity:</h5> <br> <input type="text" name="steelwashquan" value=@viewbag.steelq> <br> <br> <h5> isolating washer quantity:</h5> <br> <input type="text" name="isowashquan" value=@viewbag.isoq> <br> <br> <h5> sleeve quantity:</h5> <br> <input type="text" name="sleevequan" value=@viewbag.sleeveq> <br> <br> <h5> sleeve price:</h5> <br> <input type="text" name="sleeveprice" value=@viewbag.sleevepr> <br> <br> <h5> isolating washer price: </h5> <br> <input type="text" name="isoprice" value=@viewbag.isopr> <br> <br><h5> cost: </h5> <br> <input id="text3" type="number" value=@viewbag.result /> <input type="submit" value="submit" /> } <br><br><br><br> <h2>bom breakdown:</h2> <table class="table"> <tr> <th>component</th> <th>quantity</th> <th>cost</th> </tr> <tr> <td>@viewbag.kammcore</td> <td>@viewbag.kammbom</td> <td>@viewbag.kammprice</td> </tr> <tr> <td>@viewbag.facecore</td> <td>@viewbag.facebom</td> <td>@viewbag.faceprice</td> </tr> <tr> <td>@viewbag.spacercore</td> <td>@viewbag.spacerbom</td> <td>@viewbag.spacerprice</td> </tr> <tr> <td>@viewbag.steelwashcore</td> <td>@viewbag.steelwashbom</td> <td>@viewbag.steelwashprice</td> </tr> <tr> <td>@viewbag.isowashcore</td> <td>@viewbag.isowashbom</td> <td>@viewbag.isowashprice</td> </tr> <tr> <td>@viewbag.isowashface</td> <td>@viewbag.faceisobom</td> <td>@viewbag.faceisoprice</td> </tr> </table> <script type="text/javascript"> $(function () { $("#standard").change(function () { if ($("#standard").is(":checked")) { $(".foo").show(); $('#kid').show(); } else { $(".foo").hide(); $('#kid').hide(); } }); }) </script>
your problem seems if else clause in jquery doing same thing.
if ($(this).is(':checked')) { $("#kid").show(); $("#kod").hide(); } else { $("#kod").hide(); $("#kid").show(); } notice showing #kid in if , else , hiding #kod in both well. correct , should work.
if ($(this).is(':checked')) { $("#kod").show(); $("#kid").hide(); } else { $("#kod").hide(); $("#kid").show(); } you may want same labels (the correct way) or in case h5's don't have text on page without input. check above fiddle example.
Comments
Post a Comment