Bootstrap Dialog (nakupanda) 获取表单值 [JSFiddle]

Question

我很难从我的表单中获取值。

我正在使用 nakupanda 的引导对话框（http://nakupanda.github.io/bootstrap3-dialog/）

对话框（在全日历选择功能中）

http://arshaw.com/fullcalendar/docs/selection/select_callback/

var form = $('#createEventForm').html();
    BootstrapDialog.show({
    message: form,
         buttons: [{
                label: 'Enkel rooster event',
                action: function(dialogItself){
                    console.log('enkel - create')
                    dialogItself.close();                           
                }
            },{
                label: 'Herhalend rooster event (elke dag)',
                action: function(dialogItself){
                    console.log('meer - create')
                    dialogItself.close();
                }
            },{
                label: 'Close',
                action: function(dialogItself){
                    console.log(dialogItself);
                     alert('The content of the dialog is: ' + dialogItself.getModal().html());
            }
        }]
    });

html表单

<form id="createEventForm">
    <label>Klantnaam</label>
    <input type="text" id="titleDrop" />
    <br/>
    <label>Beschrijving</label>
    <input type="text" id="descriptionDrop" />
</form>

当有人单击按钮时，我不知道如何从表单输入中检索数据。I've tried $(titleDrop).val()和getElementById(titleDrop)

有时表单可以包含 php。

我没有收到 javascript 错误。单击butotns并使用时，我没有得到任何回报 $('titleDrop').val()

编辑小提琴 http://jsfiddle.net/jochem4207/7DcHW/3

此代码有效：

var form = '<label>Klantnaam</label><input type="text" id="titleDrop"><br><label>Beschrijving</label><input type="text" id="descriptionDrop">';
            BootstrapDialog.show({
                message: form,

                buttons: [{
                    id: 'submit1',
                    label: 'See what you got',
                    cssClass: 'btn-primary',
                    action: function(dialogRef){
                        var titleDropVal = $('#titleDrop').val();
                        console.log(titleDropVal);
                    }
                }]
            });

仍然很好奇当我不在 JS 部分添加 html 时它是否可以工作。

编辑：问题2

我有一个从 php 填充的选择列表

                   var select = $('<select id="selectVisibleUser"></select>');

            <?php 
            $userList = array();

            foreach($this->users as $user){
                $jsUser = array(
                    'key'  => $user->webuserId,
                    'value'=> $user->firstName.$user->preposition.$user->lastName
                );
                array_push($userList, $jsUser);
            }
            $list = Zend_Json::encode($userList);
            ?>


            $.each(<?php echo $list?>, function(key, value) {
                select.append($("<option/>", {
                    value: key,
                    text: value
                }));
            });


            BootstrapDialog.show({
                message: function (dialogItself){
                    var form = $('<form></form>');
                    dialogItself.setData('select-visible', select);
                    form.append('<label>Select</label>').append(select);
                    return form;

                },
                buttons: [{
                    id: 'submit1',
                    label: 'See what you got',
                    cssClass: 'btn-primary',
                    action: function(dialogItself){
                        alert(dialogItself.getData('select-visible').val());
                    }
                }]
            });

这向我显示了一个空的选择列表，并在我单击按钮时返回一个空值。在这种情况下我应该使用你的第一个小提琴吗？

尝试第一个小提琴（http://jsfiddle.net/b8AJJ/1/）在这种情况下效果很好（除了我在获取 id 而不是值时遇到了一些麻烦）

Answer 1

尝试这个：

http://jsfiddle.net/b8AJJ/

如果可能的话，我会建议这样：

http://jsfiddle.net/7DcHW/4/

BootstrapDialog.show({
    message: function (dialogItself) {
        var $form = $('<form></form>');
        var $titleDrop = $('<input type="text" />');
        dialogItself.setData('field-title-drop', $titleDrop);   // Put it in dialog data's container then you can get it easier by using dialog.getData() later.
        $form.append('<label>Title Drop</label>').append($titleDrop);

        return $form;
    },
    buttons: [{
        label: 'Get title drop value.',
        action: function (dialogItself) {
            alert(dialogItself.getData('field-title-drop').val());
        }
    }]
});