Отображение диалогового окна jQuery UI с несколькими флажками - PullRequest
Новая
       30

Отображение диалогового окна jQuery UI с несколькими флажками

0 голосов
/ 29 сентября 2011

Я пытаюсь отобразить несколько флажков и затем отправить выбранные флажки как 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, тогда все заработает.

Что я делаю не так?(кроме использования name = "name" , потому что это имя столбца таблицы базы данных и, похоже, не является причиной этой проблемы в любом случае)

ОБНОВЛЕНИЕ:

В моей реальной программе (не в приведенном выше тестовом примере) на самом деле у меня есть несколько таких диалогов, и я хотел бы установить некоторые настройки в каждом диалоге и только после этого что нажмите кнопку Отправить.Поэтому кнопка «Отправить» должна находиться вне диалогового окна.

Спасибо!

Ответы [ 5 ]

3 голосов
/ 29 сентября 2011

Предполагая, что все входные данные формы являются флажками, вы можете использовать следующее для компиляции и отправки подробностей в виде 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());
    }
});
0 голосов
/ 29 сентября 2011

Если вы не делаете name = "name []". Затем в форме отправки (как бы вы ни отправляли ее (AJAX или не AJAX), вы можете получить массив «name» в качестве переменной поста и обработать его по своему усмотрению. Поправьте меня, если я ошибаюсь

0 голосов
/ 29 сентября 2011

Попробуйте это: 

$("#submitButton").click(function(){
    $("#formId").submit();
});
0 голосов
/ 29 сентября 2011

Предполагая, что диалог на самом деле является проблемой, вам, возможно, потребуется, чтобы ваши диалоговые окна заполняли некоторые скрытые поля на странице для фактической отправки.

Вот очень простой пример, с которого можно начать.

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);
                  }
              }
         });
0 голосов
/ 29 сентября 2011

Возможно, вам понадобится обернуть всю форму в div, а затем в диалоге отобразить новый div, а не просто имя div # name

...