-
-
Save shearichard/7592248 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| fieldset{ | |
| background-color:green; | |
| font-family: sans-serif; | |
| color: #123; | |
| } | |
| fieldset:nth-child(3){ | |
| background-color:red; | |
| font-family: sans-serif; | |
| color: #123; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> | |
| <meta name="description" content="Test of cloning framesets" /> | |
| <meta charset=utf-8 /> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="content" class="content-flexible"> | |
| <h1>Add account</h1> | |
| <input type="radio" name="group1" id="r1" value="1" /><label for="r1"> button one</label><input type="radio" name="group1" id="r1" value="1" /><label for="r1"> button one</label> | |
| <div class="container-flexible"> | |
| <div class="form-container"> | |
| <form enctype="multipart/form-data" action="" method="post" id="account_form"><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='2073452e2195a9757d4d7a3f90dac4ae' /></div> | |
| <div> | |
| <!-- Popup Hidden Field --> | |
| <!-- Submit-Row --> | |
| <!-- Errors --> | |
| <!-- Fieldsets --> | |
| <fieldset class="module wide"><h2 class="collapse-handler">OrganisationA</h2><div class="row cells-1 name "><div><div class="column span-4"><label for="id_name" class="required">Name:</label></div><div class="column span-flexible"><input id="id_name" type="text" name="name" maxlength="254" /></div></div></div><div class="row cells-1 ABN "><div><div class="column span-4"><label for="id_ABN" class="required">ABN:</label></div><div class="column span-flexible"><input id="id_ABN" type="text" name="ABN" maxlength="254" /></div></div></div><div class="row cells-1 phone_number "><div><div class="column span-4"><label for="id_phone_number" class="required">Phone number:</label></div><div class="column span-flexible"><input id="id_phone_number" type="text" name="phone_number" maxlength="254" /></div></div></div></fieldset> | |
| <fieldset class="module wide"><h2 class="collapse-handler">OrganisationB</h2><div class="row cells-1 name "><div><div class="column span-4"><label for="id_name" class="required">Name:</label></div><div class="column span-flexible"><input id="id_name" type="text" name="name" maxlength="254" /></div></div></div><div class="row cells-1 ABN "><div><div class="column span-4"><label for="id_ABN" class="required">ABN:</label></div><div class="column span-flexible"><input id="id_ABN" type="text" name="ABN" maxlength="254" /></div></div></div><div class="row cells-1 phone_number "><div><div class="column span-4"><label for="id_phone_number" class="required">Phone number:</label></div><div class="column span-flexible"><input id="id_phone_number" type="text" name="phone_number" maxlength="254" /></div></div></div></fieldset> | |
| <fieldset class="module wide"><h2 class="collapse-handler">OrganisationC</h2><div class="row cells-1 name "><div><div class="column span-4"><label for="id_name" class="required">Name:</label></div><div class="column span-flexible"><input id="id_name" type="text" name="name" maxlength="254" /></div></div></div><div class="row cells-1 ABN "><div><div class="column span-4"><label for="id_ABN" class="required">ABN:</label></div><div class="column span-flexible"><input id="id_ABN" type="text" name="ABN" maxlength="254" /></div></div></div><div class="row cells-1 phone_number "><div><div class="column span-4"><label for="id_phone_number" class="required">Phone number:</label></div><div class="column span-flexible"><input id="id_phone_number" type="text" name="phone_number" maxlength="254" /></div></div></div></fieldset> | |
| </form> | |
| </div> | |
| </div> | |
| </body> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function radioValueChanged() | |
| { | |
| radioValue = $(this).val(); | |
| if($(this).is(":checked") && radioValue == "yes") | |
| { | |
| $('form fieldset:eq(2)').hide(); | |
| } | |
| else | |
| { | |
| $('form fieldset:eq(2)').show(); | |
| } | |
| } | |
| $(document).ready(function() { | |
| //clone a fieldset and put it second in the list of fieldsets | |
| $("form fieldset:eq(0)").clone().insertAfter($("form fieldset:eq(0)")); | |
| //get rid of everythign that's currently in the cloned fieldset | |
| $("form fieldset:eq(1)").children().remove(); | |
| //Insert a pair of radio buttons | |
| $("form fieldset:eq(1)").append('<p>Is the CEO also the System Manager ?</p><div>yes <input type="radio" name="controlQuestion" value="yes" />no <input type="radio" name="controlQuestion" value="no" checked="checked" /></div>'); | |
| //Now hook up an event handler to hide/display the fieldset which contains the sysman information in response to the radio button changing state | |
| $("input[name='controlQuestion']").change(radioValueChanged); | |
| //Set the radio button to an initial "YES" default | |
| $('input:radio[name=controlQuestion]:nth(0)').trigger( "click" ); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment