Skip to content

Instantly share code, notes, and snippets.

@shearichard

shearichard/jsbin.umECosOf.css

Forked from anonymous/jsbin.umECosOf.css
Created November 21, 2013 09:45
Show Gist options
  • Save shearichard/7578791 to your computer and use it in GitHub Desktop.
Save shearichard/7578791 to your computer and use it in GitHub Desktop.
Download ZIP
Using jQuery to fiddle around with FieldSets in response to radio button selections
Raw
jsbin.umECosOf.css
fieldset{
background-color:green;
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();
//alert(radioValue);
if($(this).is(":checked") && radioValue == "yes")
{
//$('#Question2Wrapper').hide();
$('form fieldset:eq(2)').hide();
//$('form fieldset:eq(2)').css("height", "3em");
//$('form fieldset:eq(2)').css("color", "red");
}
else
{
//$('#Question2Wrapper').show();
$('form fieldset:eq(2)').show();
//$('form fieldset:eq(2)').css("height", "10em");
//$('form fieldset:eq(2)').css("color", "blue");
}
}
$(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 paragraph into the cloned fieldset
$("form fieldset:eq(1)").append("<p>test</p>");
$("form fieldset:eq(1)").append('<input type="input" name="myfieldname" value="myvalue" />');
//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" checked="checked" />no <input type="radio" name="controlQuestion" value="no" /></div>');
//Disable all controls in the sysman fieldset
//$('form fieldset:eq(2) *').attr('disabled', true);
//Grey out all controls in the sysman fieldset
//$('form fieldset:eq(2) *').fadeTo(500, 0.2);
//$('form fieldset:eq(2)').css("display:none;");
//$('form fieldset:eq(2)').css("display", "none");
//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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment