sunny sunny - 6 months ago 26
Javascript Question

How to echo variables values in check box using pop up?

I am new in PHP. I have a code having a button. When button is clicked a modal will show. On modal, there are multiple check-boxes. When one of the check-boxes is checked, a value of that check-box should print. But I want to print that values in check-boxes on the modal.

Please Check This Fiddle

Here is my code

$(document)
.ready(function() {
$(".various").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '70%',
height: '70%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});

$('.button1').click(function(e) {
e.preventDefault();
$('.various').click();
});

})
.on('change', '[name=test-link]', function() {
$('#print-values').empty();
$('#print-values').append("<span>You've checked:</span><br />");
$('[name=test-link]').each(function() {
if ($(this).prop("checked")) {
var v = $(this).val();
$('#print-values').append(v + "<br />");
}
});
});




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

<a class="various" href="#form1" style='display: none;'></a>
<input class='button1' type="button" value="Link More Opinion" />
<div id='print-values'></div>
<div style='display: none;'>
<form id='form1'>
<input type='checkbox' name='test-link' value="1" />
<span>1</span>
<br />
<input type='checkbox' name='test-link' value="2" />
<span>2</span>
<br />
<input type='checkbox' name='test-link' value="3" />
<span>3</span>
<br />
</form>
</div>

Answer

Append input and use the value in value attribute of input

$('#print-values').append("<input type=text value='"+v+"'><br />");

DEMO