javascript - Modify variable value inside a jquery-modal event -

i'm trying modify value of variable inside before_close event, no luck far... i'm using kylefox's jquery-modal

html:

<div id="other" class="modal" style="display:none;"> <label for="form_othername" class="label-important required">(*) enter 'other' name </label> <input type="text" required="required" name="form[othername]" class="round default-width-input" id="simple-input"> <a href="#close" rel="modal:close">close window</a></div> 

js:

      $('#form_submit').on('click', function (e) {         e.preventdefault();         var page = $("#carousel").rcarousel("getcurrentpage");         var employeeid = $("input[name='form[employeeid]']").val();         var temp = '';        if (page == 4) {             $('#other').modal();             $('#other').on($.modal.before_close, function (event, modal) {                 temp = $("input[name='form[othername]']").val();                 console.log(temp);             });             console.log('after event '+temp);             $.post("{{ path("working_letter_model",{'language': 'spanish'})}}", {model: page, idnumber: employeeid}, function (data) {                 //do whatever response                  });             } } 

what doing wrong? there anyway fix this?

i read js using variables value instead of reference don't know if applies.

there's nothing wrong way you're assigning temp variable, in way in you're logging it. seems though you're reading code , expecting execute in linear fashion, is, in order in appears. here's what's happening.

the event registered here , callback provided execute when event fires.

$('#other').on($.modal.before_close, function (event, modal) {     //this code not execute yet!     temp = $("input[name='form[othername]']").val();     console.log(temp); //it shows value }); 

next, line executes , temp still has initial value.

console.log('after event '+temp); //it returns empty 

finally, when modal closes, callback executed , console log within, shows newly assigned value.

temp = $("input[name='form[othername]']").val(); console.log(temp); //it shows value