I wasn't able to get input field values Bootbox

Question

<div class="question">
       <form id='infos' class='form' action='' style="">
               Action Description:<input type='text' class='form-control' id='action_description'></input><br/>
               Action Reponsible:<input type='text' class='form-control' id='action_responsible'></input>
               Plan Beginning date: 
               <div class='input-append date' data-date='01.01.1999' data-date-format='dd.mm.yyyy'>
               <input class='form-control' size='16' id='beginDate' name='beginDate' type='text' value='01.01.1999' >
               <span class='add-on'><i class='icon-th'></i></span>
               </div>
               End Date: 
               <div class='input-append date' data-date='01.01.1999' data-date-format='dd.mm.yyyy'>
               <input class='form-control' size='16' id='endDate' name='endDate' type='text' value='01.01.1999'>
               <span class='add-on'><i class='icon-th'></i></span>
               </div>

        </form>
    </div>

This is my html and my js is :

var yourModal = bootbox.dialog({
                   message: $('.question').html(),
                   title: "Add Class",
                   buttons: {
                       main: {
                              label: "Save",
                              className: "btn-primary",
                              callback: function() {
                                 var type = "ACTION_SAVE";
                                 var action_description = $("#action_description").val();
                                 var action_responsible = $("#action_responsible").val();
                                 var begin_date = $("#beginDate").val();
                                 var end_date   = $("#endDate").val();


                                 console.log( action_description );
                                 console.log( action_responsible );
                                 console.log( begin_date );
                                 console.log( end_date );
                                 console.log( question_value );
                                 console.log( question_id );

                                  $.get("ActionServlet",
                                          { type: type , action_description :action_description,
                                            action_responsible : action_responsible, begin_date : begin_date,
                                            end_date : end_date, question_value:question_value, question_id:question_id
                                          },function(result){

                                              console.log(result);
                                  })

                              }
                            },
                       cancelar: {
                           label: "Close",
                           className: "btn-default"
                       }
                   },
                   show: false
               });

            yourModal.on("shown.bs.modal", function() {
                   var datepickerSelector = '.date';

                   $(datepickerSelector).datepicker();
                   $(datepickerSelector, yourModal).datepicker({
                       showOtherMonths: true,
                       selectOtherMonths: true,
                       dateFormat: "dd-mm-yyyy",
                       yearRange: '-1:+1',
                       setDate: new Date()
                   }).prev('.btn').on('click', function (e) {
                       e && e.preventDefault();
                       $(datepickerSelector, yourModal).focus();
                   });
               });

            yourModal.on("changeDate",function(ev){
                yourModal.val(ev.target.value);
            })

            yourModal.modal("show");
        }

I begin with hiding form and then show it on click, Everything works fine but when I sent the form which I should get the values but I can only get values that I provided in html(date values) How can I fix it.

score 10 · Answer 1 · answered May 11 '15 at 09:34

10

Try this :

$('<your jquery selector for input>','.bootbox').val()

answered May 11 '15 at 09:34

Prashant Kumar

386
2
9

Solution Worked for me – Dr. Rajesh Rolen Sep 25 '16 at 11:49

score 1 · Answer 2 · answered Aug 27 '14 at 21:11

I had the same issue and had to add one event handler for each text input inside the bootbox dialog like this:

$(document).on('change', '#action_description', function(e) {
    $('#action_description').val($(this).val());
});

This way I was able to access the updated value of the input text in the callback, my guessing is that bootbox messes with elements inside the dialog, the code above, forces the value to stay in the DOM. If someone has a more detailed explanation of why the above makes it work, please provide. I sometime code by intuition :P

I wasn't able to get input field values Bootbox

2 Answers2