Question

我在从表单中获取价值时遇到了麻烦。

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

对话框（它在fullcalendar选择功能中）

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

时，我只是没有得到任何回报

编辑 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。在这种情况下，我应该使用你的第一小提琴吗？

尝试了第一个小提琴（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());
        }
    }]
});

Answer 2

您使用的元素选择器错误。

尝试使用$('#titleDrop').val()代替$(titleDrop).val()。

将提交事件绑定到您的表单。这样，您可以在提交表单时获取表单输入的值。请看以下示例：

http://jsbin.com/xiruv/1/

引导对话（nakupanda）获取表单值[JSFiddle]

2 个答案: