The input field is not displaying it set value

Question

i have this as next and back button

This is the next button:

$(document).on('click', '#next_form', function () {
        emailAdress = $("#email").val();
        $(".column_1").flip({
        direction: 'rl',
        });
        $(".column_2").flip({
        direction: 'lr',
        });
});

back button: Then so i can revert the flip and insert the value again :

$(document).on('click', '#back_form', function () {
    $(".column_1").revertFlip();
    $(".column_2").revertFlip();
    $("#email").val(emailAdress);
    console.log(emailAdress);
});

but the input field is not displaying the value when i console log it seems to be running perfect but it does display... any ideas why?

fiddle http://jsfiddle.net/victorcabieles/5EsN8/ [link](http://jsfiddle.net/victorcabieles/5EsN8/) — VCabieles, Jul 25 '14 at 01:38
In your fiddle the body tag is opened and then immediately closed. Is your actual code the same? — j08691, Jul 25 '14 at 01:41

score 2 · Answer 1 · edited Jul 25 '14 at 01:58

2

You need to take var Fname, emailAdress, phoneNumber; out of the document.ready.

edited Jul 25 '14 at 01:58

Spencer Wieczorek

21,229
7
44
54

answered Jul 25 '14 at 01:43

jtorrescr

627
4
13

i tried taking it out but it creates an error when i do it says the variable are not defined – VCabieles Jul 25 '14 at 01:53

score 0 · Accepted Answer · edited May 23 '17 at 12:27

The basic problem was that when it flip javascript didn't register the motion so it didn't know the div elements had change, and had new content. so when i flip them back the same thing happen.

the solution that i found was to listen for mutations on the DOM.

   var observer = new MutationObserver(function(mutations, observer) {
        // fired when a mutation occurs
        console.log(mutations, observer);
        // ...
        $('#streetAddres').val(streetAddress);
        $("#numberPH").val(phoneNumber);
        $("#emailAd").val(emailAdress);
        $("#state").val(state);
        $("#name").val(Fname);
        $("#city").val(city);
        $("#zip").val(zip);

    });

    observer.observe(document, {
        subtree: true,
        attributes: true
        //...
    });

This example listens for DOM changes on document and its entire subtree, and it will fire on changes to element attributes as well as structural changes.

i found a pretty useful example and more information about it on stack overflow here is the source: Is there a JavaScript/jQuery DOM change listener? you have to scroll down a little bit to see it.

The input field is not displaying it set value

2 Answers2