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

Question

我很难从表单中获取值。

我正在使用来自 nakupanda (http://nakupanda.github.io/bootstrap3-dialog/) 的 Bootstrap 对话框

对话框(它在全日历选择功能中)

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>

我不知道如何在有人单击按钮时从输入的表单中检索数据。 我试过 $(titleDrop).val() 和getElementById(titleDrop)

有时表单可以包含 php。

我没有收到 javascript 错误。单击按钮并使用 $('titleDrop').val()

时，我什么也没得到

编辑 fiddle 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());
                    }
                }]
            });

这向我显示了一个空的选择列表，当我单击该按钮时，当然会返回 null。 在这种情况下我应该使用你的第一个 fiddle 吗？

尝试了第一个 fiddle (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());
        }
    }]
});