I have a form that has repeating demographic info in 5 separate sections. I want to copy all the demographic info from one section to another if the user clicks yes on a radio and then selects the appropriate section to copy the info from.
I've got this working with text inputs without issue however it fails completely with check boxes. I managed to create a working demo of what I'd like in jsfiddle however the checkbox portion does not work on my form so I was wondering if anyone had any other suggestions.
The demographic info sections mirror each other 100% but it is possible someone would want to put different demographic info in different sections, hence why we're not just duplicating or cloning the input.
<div id="toolSet1">
<h3>
Tool Set 1 (complete all fields then select 'Yes' radio)
</h3>
Name:
<input type="text" name="name1" id="name1">
<br>
<input type="checkbox" name="race1" id="race1">Check this box!
<br>
<input type="textarea" class="textBlock1" name="textBlock1" id="textBlock1">
</div>
<br>
<br>
Will the demographic information for this tool set be identical to another tool set you have already completed?
<input type="radio" name="demoInfoSame" value="yes">Yes
<input type="radio" name="demoInfoSame" value="no">No
<br>
<br>
<div class="hidden" name="toolList" id="toolList">
From which tool set would you like to copy demographic information?
<ul class="toolSetList">
<li>
<input type="checkbox" class="toolSet" id="patStudyEstimate" disabled>Patient Study Estimate (check this one)</li>
<li>
<input type="checkbox" class="toolSet" disabled>Patient Registry</li>
<li>
<input type="checkbox" class="toolSet" disabled>Electronic Data Capture</li>
<li>
<input type="checkbox" class="toolSet" disabled>Data Extraction</li>
<li>
<input type="checkbox" class="toolSet" disabled>Patient Recruitment</li>
</ul>
</div>
<div id="toolSet2">
<h3>
Tool Set 2
</h3>
Name2:
<input type="text" class="name2" name="name2">
<br>
<input type="checkbox" class="race2" name="race2" id="race2">
<br>
<input type="textarea" class="textBlock2" name="textBlock2" id="textBlock2">
</div>
<br>
<div class="hidden" name="finalStep" id="finalStep">
<h2>
Now click 'No' radio button.
</h2>
</div>
//Reveal Section and Enable Inputs/Hide Section, Clear Fields, Disable Inputs
$(document).ready(function() {
$('input[type=radio][name=demoInfoSame]').change(function() {
if (this.value == 'yes') {
$('#toolList').fadeIn('slow').find('input').prop('disabled', false);
} else if (this.value == 'no') {
$('#finalStep').fadeOut('slow')
$('#toolList').fadeOut('slow').find('input').prop('disabled', true);
$('#toolList').find('input:checkbox').prop('checked',false).end();
$('#toolSet2').find('input.name2').val('').end();
$('#toolSet2').find('input.textBlock2').val('').end();
$('#toolSet2').find('input:checkbox').prop('checked',false).end();
}
});
});
//Autofill Form Based on Checkbox State
var myInput = $('#name1');
var copyTextArea = $('#textBlock1');
$(document).ready(function() {
$('#patStudyEstimate').change(function() {
if (this.checked)
$('#toolSet2').find('input.name2').val(myInput.val());
$('#toolSet2').find('input.textBlock2').val(copyTextArea.val());
$('#finalStep').fadeIn('slow');
$( '#toolSet2' ).children( 'input:checkbox' ).each( function( i ) {
var toolSet1Checks = $('#toolSet1' ).children( 'input:checkbox' ).eq( i ).prop( 'checked' );
if ( toolSet1Checks )
{
$( this ).prop( 'checked', true );
}
else
{
$( this ).removeProp( 'checked' );
}
});
});
});
Working JSFiddle: http://ift.tt/2fKz75i
Aucun commentaire:
Enregistrer un commentaire