<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('<form id="myform" action=""><input type="checkbox" id="completeCheck" name="completeCheck" value="truck" />Complete check<br /><input type="checkbox" name="view" value="Car" /> View report <br /><input type="checkbox" name="consist" value="van" />Consistency check<br /><input type="checkbox" name="other" value="bike" />Other checks<br /><input type="checkbox" name="keyCheck" value="scooter" />Key check<br /><input type="checkbox" name="compareCheck" value="skate" />Compare check<br /></form>')
.dialog({
autoOpen: false,
title: 'Data check',
buttons: {
"Submit Form": function() {
$('form#myform').submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$('#createNew').click(function() {
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
$('form#myform').submit(function() {
$(this).find(':checkbox').each(function() {
if (this.checked) {
//alert(this.value + ' is checked');
var sel = $('<select>').appendTo('body');
sel.append($("<option>").attr('value', this.value).text(this.name));
} else
alert(this.name + ' is not checked');
});
$dialog.dialog('close');
});
});
</script>
<a id="createNew" href="#">open</a>
</body>
</html>
Having a pop-up box then within that popup box, you would have check boxes when you select those check boxes they populate an empty select box with the items you selected in the popup box . Then as you select those items one by one a input box appears for each item selected. Then you would have to pass those items that are populated in the select box to the database along with the corresponding input fields.
I am having issues with getting the values from the checkbox dialogue to populate to the select box. It is passing through the url and also reloading the page. Also would like to pass all the values from the select box to the mysql database.
Try this:
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('<form id="myform" action=""><input type="checkbox" id="completeCheck" name="completeCheck" value="truck" />Complete check<br /><input type="checkbox" name="view" value="Car" /> View report <br /><input type="checkbox" name="consist" value="van" />Consistency check<br /><input type="checkbox" name="other" value="bike" />Other checks<br /><input type="checkbox" name="keyCheck" value="scooter" />Key check<br /><input type="checkbox" name="compareCheck" value="skate" />Compare check<br /></form>')
.dialog({
autoOpen: false,
title: 'Data check',
buttons: {
"Submit Form": function() {
$('form#myform').submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$('#createNew').click(function() {
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
$('form#myform').submit(function(e) {
var sel = $('<select>').appendTo('body');
$(this).find(':checkbox').each(function() {
if (this.checked) {
sel.append($("<option>").attr('value', this.value).text(this.name));
} else {
alert(this.name + ' is not checked');
}
});
$.ajax({
type: 'POST',
url: 'url',
data: $(this).serialize()
});
$dialog.dialog('close');
e.preventDefault();
});
});
</script>
<a id="createNew" href="#">open</a>
</body>
</html>