Question

我正在尝试显示多个复选框，然后将选中的复选框作为 HTTP GET （即作为URL字符串中的参数）提交到同一个脚本：

screenshot

这是我的简化测试代码 - 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>

但出于某种原因，当我选择前2个复选框时，请单击“提交”按钮（对于屏幕截图中的非英文名称抱歉），然后脚本 http://myserver/test.php？正在提交，而不是像我期望的那样 http://myserver/test.php?name=project+one&name=project+two 。

如果我摆脱了所有JQuery UI的东西，那么它就可以了。

我做错了什么？（除了使用 name =“name”，这是因为这是一个数据库表列名，并且似乎不是这个问题的原因）

更新

在我的真实程序中（不是上面的测试用例）我实际上有几个这样的对话框，并希望在每个对话框中设置一些设置，然后仅在之后一个提交按钮。因此，提交按钮必须在对话框之外。

谢谢！

Answer 1

假设所有表单输入都是复选框，您可以使用以下内容编译并以GET形式提交详细信息。

使用原始代码添加以下功能

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);

}

您需要将输入名称从name ='name'更改为name ='name []'

然后将提交更改为按钮，如下所示：

<input type="button" onClick='compileInputs()' value='submit'>

您将不再需要<form>代码

采用更具选择性的方法：

//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());
    }
});

Answer 2

您可能需要将整个表单包装在div中，然后在对话框中对话新div，而不仅仅是div #name

Answer 3

试试这个：

$("#submitButton").click(function(){
    $("#formId").submit();
});

Answer 4

假设对话框实际上是问题，您可能必须让对话框填充页面上的一些隐藏字段才能实际提交。

这是一个非常简单的示例，可帮助您入门。

http://jsfiddle.net/jUH9g/

当您在对话框中单击“确定”时，它会填充实际提交的表单中的“名称”文本框。在您的真实代码中，您可以将input type="textbox"更改为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);
                  }
              }
         });

Answer 5

你不应该做name =“name []”。然后在表单提交（但是你提交它（AJAX或非AJAX），你可以将“name”数组作为你的post变量并按你的意愿处理它。如果我错了，请纠正我

显示带有多个复选框的jQuery UI对话框

5 个答案: