I've trouble getting values out of my form.

I'm using bootstrap dialog from nakupanda (/)

The dialog (it is in a fullcalendar select function)

/

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

The html form

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

I don't know how to retrieve the data from the forms input when someone clicks on a button. I've tried $(titleDrop).val()andgetElementById(titleDrop)

Sometimes the form can contain php.

I am not getting javascript errors. I just don't get anything back when clicking on the butotns and using $('titleDrop').val()

EDIT FIDDLE

This code works:

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

Still curious if it could work when I dont add the html in the JS section.

Edit: Question 2

I have a select list that gets filled from 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());
                    }
                }]
            });

This shows me a empty select list and returns offcourse a null when I click the button. Should I use your first fiddle in this case?

Tried the first fiddle ( / ) works perfectly in this case (except i've some trouble to get the id instead of the value)

I've trouble getting values out of my form.

I'm using bootstrap dialog from nakupanda (http://nakupanda.github.io/bootstrap3-dialog/)

The dialog (it is in a fullcalendar select function)

http://arshaw./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());
            }
        }]
    });

The html form

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

I don't know how to retrieve the data from the forms input when someone clicks on a button. I've tried $(titleDrop).val()andgetElementById(titleDrop)

Sometimes the form can contain php.

I am not getting javascript errors. I just don't get anything back when clicking on the butotns and using $('titleDrop').val()

EDIT FIDDLE http://jsfiddle/jochem4207/7DcHW/3

This code works:

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

Still curious if it could work when I dont add the html in the JS section.

Edit: Question 2

I have a select list that gets filled from 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());
                    }
                }]
            });

This shows me a empty select list and returns offcourse a null when I click the button. Should I use your first fiddle in this case?

Tried the first fiddle ( http://jsfiddle/b8AJJ/1/ ) works perfectly in this case (except i've some trouble to get the id instead of the value)

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Apr 1, 2014 at 8:36 JochemQuery asked Mar 31, 2014 at 15:10 JochemQueryJochemQuery 1,56722 gold badges2727 silver badges3939 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Try this:

http://jsfiddle/b8AJJ/

If possible I would suggest this way:

http://jsfiddle/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());
        }
    }]
});

You're using element selector wrong.

Try $('#titleDrop').val() instead of $(titleDrop).val().

---

Bind submit event to your form. This way you can get the values of form inputs when the form is submitted. Look at the following example:

http://jsbin./xiruv/1/