How To Solve “When Your Input Field Values Are Not Saving In DOM?”

I came across a strange problem while working on a project. I had a simple HTML form and I was trying to reset the default value of an input text field. I never realized it could take 4 hours of my precious time. I changed the value of an input field then I checked HTML from Firebug , the field was showing me old value. Then I wrote an input event change function in JQuery and tracked input value using console.log(). Surprisingly,  it was showing me that input field is changed but DOM is not updated. (Please note, console.log function is available only when you have Firebug installed.)

[leaderboard_ads]

Making this story short, I solved this problem by writing the following piece of code in JQuery:

$(document).ready(function() {

    $('input').on('keyup change', function() {

    //console.log($(this).attr('value')); TRACK VALUES!

    $(this).attr('value', $(this).val()); //UPDATE VALUE IN DOM

    });

});

Although, it’s just a simple form and I have worked on tons of projects but never came across such a strange issue. If anyone knows the reason why input change value wasn’t updated in DOM then please comment here.

[post_ads_2]