Displaying jQuery UI dialog with multiple checkboxes
I'm trying to display multiple checkboxes and then submit the selected checkboxes as HTTP GET (i.e. as parameters in URL string) to the same script:
Here is my simplified test code - test.php:
<html>
<head>
<style type="text/css" title="currentStyle">
@import "http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('#name').dialog({ autoOpen: false, modal: true });
});
</script>
</head>
<body>
<form>
<p><input type="button" value="Select name"
onclick="$('#name').dialog('open');"></p>
<div id="name" title="name">
<?php
$NAMES = array(
'project one',
'project two',
'project three',
);
foreach ($NAMES as $name) {
printf('<p><label><input type="checkbox" name="name" value="%s">%s</label></p>',
urlencode($name),
htmlspecialchars(substr($name, 0, 120))
);
}
?>
</div>
<input type="submit">
</form>开发者_如何学运维;
</body>
</html>
But for some reason, when I select the first 2 checkboxes click the "Submit" button (sorry for the non-English name in the screenshot), then the script http://myserver/test.php? is being submitted and not http://myserver/test.php?name=project+one&name=project+two as I would expect.
If I get rid of all JQuery UI stuff, then it works.
What am I doing wrong? (besides using name="name" which is because that's a database table column name and doesn't seem to be the reason for this problem anyway)
UPDATE:
In my real program (not the above test case) I actually have several such dialogs and would like to set some settings in each dialog and only after that that click a Submit button. So the Submit button must be outside the dialog(s).
Thank you!
Assuming all the form inputs are checkboxes you can use the following to compile and submit the details as a GET.
using your original code add the following function
function compileInputs(){
var string = '';
var inputs = new Array();
//loop through all checkboxes
$(':checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
string = "?"+inputs.join("&");
window.location.replace(string);
}
you will need to change the names of the inputs from name='name' to name='name[]'
then change the submit to a button as follows:
<input type="button" onClick='compileInputs()' value='submit'>
you will no longer need the <form> tags
for a more selective approach:
//get all checkboxes from div#name
$('div#name :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
//get all checkboxes from div#appsversion
$('div#appsversion :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
//get all checkboxes from div#osversion
$('div#osversion :checkbox').each(function(){
if($(this).is(':checked')){
inputs.push($(this).attr('name')+"="+$(this).val());
}
});
You may need to wrap the whole form in a div and then dialog the new div in the dialog rather than just the div #name
Try this:
$("#submitButton").click(function(){
$("#formId").submit();
});
Should you not do name="name[]" . Then on the form submit (however you submit it (AJAX or non AJAX), you can get the "name" array as your post variable and handle it as you may wish. Correct me if I am wrong
Assuming the dialog is actually the problem, you may have to have your dialogs populate some hidden fields on the page to actually submit.
Here is a very simple sample to get you started.
http://jsfiddle.net/jUH9g/
When you click ok in the dialog it populates the 'names' textbox inside the form that actually gets submitted. In your real code you would change input type="textbox" to input type="hidden"
$("#dlg").dialog({autoOpen: false,
buttons: {
"OK": function () {
var names = "";
$("input:checkbox").each(function () {
if (this.checked) {
names += $(this).val() + ",";
}
});
$("#names").val(names);
}
}
});
加载中,请稍侯......
精彩评论