输入字段未显示其设置值

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?

Answer 1

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

Answer 2

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.