Skip to content

Instantly share code, notes, and snippets.

/jsbin.umECosOf.css

Created November 22, 2013 00:00
Show Gist options
  • Save anonymous/7592231 to your computer and use it in GitHub Desktop.
Save anonymous/7592231 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.umECosOf.css
fieldset{
background-color:green;
font-family: sans-serif;
color: #123;
}
fieldset:nth-child(3){
background-color:red;
font-family: sans-serif;
color: #123;
}
Raw
jsbin.umECosOf.html
<!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>
Raw
jsbin.umECosOf.js
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