HTML input not updating value

Question

I have a very strange problem (at least to me). I dynamically create textboxes, and it works fine. But the problem is when I try to write in those, if I check the html code, values that I write do not appear. I have no idea why this is happening or how to work arround this. Here is my code example.

<ul class="ml4 js-sortable-buttons list flex flex-column list-reset" data-disabled="false" id="page-content">
    <li class="p1 mb1 blue bg-white" id="id"><input type="text" class="textbox" /></li>
</ul>
<div class="center py2 ml4">
    <div class="js-add-textbox-button button blue bg-white" >add textbox</div>  
    <div class="show_html_button blue bg-white">show html</div>                     
</div>


<!-- <script src="../src/html.sortable.js"></script> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="html.sortable.min.js"></script>
<script  type="text/javascript">
        sortable('.js-sortable-buttons', {
            forcePlaceholderSize: true,
            items: 'li',
            placeholderClass: 'border border-white mb1'

        });
        // buttons to add items and reload the list
        // separately to showcase issue without reload
        document.querySelector('.js-add-textbox-button').addEventListener('click', function () {
            doc = new DOMParser().parseFromString(`<li class="p1 mb1 blue bg-white"><input type="text" class="textbox"></li>`, "text/html").body.firstChild;
            document.querySelector('.js-sortable-buttons').appendChild(doc);
            sortable('.js-sortable-buttons');
            window.stop();
        });
</script>

    <script  type="text/javascript">
        $(".show_html_button").click(function () {
            var optionTexts = $("#page-content").clone(true);
            alert(optionTexts.html());
        });
</script>

Any help would be greatly appreciated.

this is probably down to your use of sortable. If i remove the references to it, everything works fine: codepen.io/anon/pen/KqRJLG — hairmot
– hairmot, Commented Jul 4, 2017 at 10:13

James · Accepted Answer · 2017-07-04 11:17:49Z

4

That's not how javascript works. A webpage's HTML doesn't automatically update when an input field's value changes.

If you want such functionality, you could do this:

$(function(){
  $('.js-sortable-buttons').on('keyup change paste','input',function(){
    $(this).attr('value', $(this).val());
  });
});

edited Jul 4, 2017 at 11:17

answered Jul 4, 2017 at 10:29

James

1,1239 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Evgeny Sdvizhkov Over a year ago

it realy helped a lot , but why dought input value does not update automatically ?

James Over a year ago

The HTML value="" attribute is not synchronised with the .value DOM property, but the .defaultValue DOM property. The value="" attribute will always reflect the field's default value, unless the attribute is updated manually via javascript.

Evgeny Sdvizhkov Over a year ago

by the way can you explain to me why only the 1 textbox is working properly ? when i add another textboxes , their values does not get updated. Thank you wery much.

James Over a year ago

Because the other input boxes are being added dynamically. I have modified my answer which should solve that issue!

Evgeny Sdvizhkov Over a year ago

thank you wery much. i am kind of new to javascript (jquerry), do you recommend any good place to learn how this stuff works ?

|

Kumar_Vikas · Accepted Answer · 2017-07-04 10:55:59Z

You are missing reference to html5Sortable. https://cdnjs.com/libraries/html5sortable

        sortable('.js-sortable-buttons', {
            forcePlaceholderSize: true,
            items: 'li',
            placeholderClass: 'border border-white mb1'

        });
        // buttons to add items and reload the list
        // separately to showcase issue without reload
        document.querySelector('.js-add-textbox-button').addEventListener('click', function () {
            doc = new DOMParser().parseFromString(`<li class="p1 mb1 blue bg-white"><input type="text" class="textbox"></li>`, "text/html").body.firstChild;
            document.querySelector('.js-sortable-buttons').appendChild(doc);
            sortable('.js-sortable-buttons');
            window.stop();
        });

        $(".show_html_button").click(function () {
            var optionTexts = $("#page-content").clone(true);
            alert(optionTexts.html());
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5sortable/0.6.1/html.sortable.min.js"></script>

<ul class="ml4 js-sortable-buttons list flex flex-column list-reset" data-disabled="false" id="page-content">
    <li class="p1 mb1 blue bg-white" id="id"><input type="text" class="textbox" /></li>
</ul>
<div class="center py2 ml4">
    <div class="js-add-textbox-button button blue bg-white" >add textbox</div>  
    <div class="show_html_button blue bg-white">show html</div>                     
</div>

Collectives™ on Stack Overflow

HTML input not updating value

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related