I have three check boxes with two is auto selected and I am displaying the text field with a label which check box is selected.
But after clicking on preview from I am getting input field twice. I mean I am getting four text field instated of two.
There is some issue with my ready script.Would you help me out in this?
<!--If any check box clicked then active this script-->
$(function() {
$(".add_student_input").change(function() {
if (this.checked) {
$(".students_items").append('<div class="form-group row ' + this.id + '"><label class="col-sm-4 col-form-label">' + $(this).next('label').text() + '</label><div class="col-sm-8"><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div></div>');
} else {
$('.students_items').find('.' + this.id).remove();
}
});
});
<!--end script -->
$(document).ready( function(){
$checkbox=$(".add_student_input");
$checkbox.each(function(){
var isChecked = $(this).is(":checked");
if(isChecked) {
$(".students_items").append('<div class="' + this.id + '"><label>' + $(this).next('label').text() + '</label><input type="' + $(this).data('type') + '" name="input[]" placeholder="' + $(this).next('label').text() + '" class="form-control" /></div>');
} else {
//check false
$('.students_items').find('.' + this.id).remove();
}
});
});
/*form preview*/
function PrintPreview() {
var toPrint = document.getElementById('open_in_preview');
var popupWin = window.open('', '_blank');
popupWin.document.open();
popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body>')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</body></html>');
popupWin.document.close();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body id="open_in_preview">
<input type="checkbox" name="a" id="class_1" class="add_student_input" data-type="text" checked><label for="class_1">number1</label>
<input type="checkbox" name="b" id="class_2" class="add_student_input" data-type="text" checked><label class="class_2">number2</label>
<input type="checkbox" name="c" id="class_3" class="add_student_input" data-type="text"><label class="class_3">number3</label>
<a href="#" class="btn btn-primary" onclick="PrintPreview();">Preview form</a>
<span class="students_items"></span>
</body>I am getting output like this.
as comment, why the script putting at the below of your page will cause multiple input, as when onload, it will run document ready and append again based on the checkbox, so to solve the issue, put
empty()onto it will "reset" the input before append with a new 1update with another question by OP please look at the plnkr https://plnkr.co/edit/wnGWwcgAySrjfNQwqX3J?p=preview
the issue here is not related to
empty(), it is how it behave onDOMready(but i remove it as your question is different now), I had enhance your script so that it take only the needed tag, and also combine the script to make it clearer, please have a look, so in order to really read the checked behavior in the html, we need to addthis will force the
checkedis being render in the html, and also$(function(){})is the same as$(document).ready(function(){})