SO - 22004355
HTML
<div id="zero_form" class="zero_form" style="display:none;">
<p>
<input id='box1_' type="text" style="width:125px" placeholder='Type'>
<br>
<select id='box2_' class="first_input" style="width: 200px;" placeholder="Choose a Value">
<option value="Choose a Value">Choose a Value</option>
<option>NEGATIVE</option>
<option>EQUIVOCAL</option>
<option>POSITIVE</option>
</select>
<input id='box3_' class='hide' type="text" style='display:none;' placeholder='Score #1'>
<input id='box4_' class='hide' type="text" style='display:none;' placeholder='Score #2'>
<input id='box5_' class='hide' type="text" style='display:none;' placeholder='%'>
<input id='box6_' type="text" placeholder="Enter Comments" style="width:200px">
<input type="button" id="remove" class="removebutton" value="Delete">
<br>
</p>
</div>
<!-- end hidden clone div-->
<form>
<p> <span id="add" class="addbutton">Add another row</span>
</p>
</form>
<input type="button" id="printOut" value="Done"><br>
<textarea id="output"></textarea>
JavaScript
$(document).ready(function () {
// show hidden inputs on POSITIVE selection
$(document).on('change', '.zero_form select.first_input', function () {
var sel = $(this).val();
$(this).parent().find('.hide').toggle(sel == 'POSITIVE');
});
$(document).on('click', '.zero_form .removebutton', function () {
$(this).closest("div").remove();
});
// clone fields
var form_index = 0;
$("#add").click(function () {
form_index++;
$(this).parent().before($("#zero_form").clone().attr("id", "zero_form" + form_index));
$("#zero_form" + form_index).css("display", "inline");
$("#zero_form" + form_index + " :input").each(function () {
$(this).attr("id", $(this).attr("id") + form_index);
});
});
});
$('#printOut').click(function (){
var dxOut = 'Output\n';
var part1_ = [];
var part2_ = [];
var part3_ = [];
var part4_ = [];
var part5_ = [];
var part6_ = [];
for (var i=1; i <= 30; i++){
part1_[i] = $('#box1_'+i).val();
part2_[i] = $('#box2_'+i).val();
part3_[i] = $('#box3_'+i).val();
part4_[i] = $('#box4_'+i).val();
part5_[i] = $('#box5_'+i).val();
part6_[i] = $('#box6_'+i).val();
}
return part1_;
return part2_;
return part3_;
return part4_;
return part5_;
return part6_;
// an example of the output if one form field was generated
dxOut += part1_1 +'\n'+part2_1+'\n'+part3_1;
$('#output').val(dxOut);
});