How to get the value of a with jQuery?

Question

What I want to do is when I double click on a cell a textbox appears to update the cell data. Then I want to get the value updated. For now I tried this :

     $('#previsionnel td').dblclick(function () {
        var $this = $(this);
        var input = $('<input>', {
            value: $this.text(),
            type: 'text',
            blur: function () {
                 $this.text(this.value);
            },
            keyup: function (e) {
                if (e.which === 13)
                    input.blur();
            }
        }).appendTo($this.empty()).focus();

        var test = $this.find("input").val();
        console.log(test);

        $('#previsionnel td').change(function () {
            console.log(test);
        });
    });

Everything works, except I just can't get the data updated with $(this).text() In my console log the result is empty.

Some screenshots of what is supposed to do :

As you can see in the last screenshot, the second value in the console must be 5000 and not 100000.00.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jonas Wilms, Jul 24 '17 at 06:53
My html table is basically empty. I populate it with AJAX requests but I got only one column so it's like ` 5000 ` several times. — thomashoareau, Jul 24 '17 at 07:14
In the `blur` event, `this` refers to the `input` not the `td`. Use `$(this).closest("td").text($(this).val());$(this).hide();` — freedomn-m, Jul 24 '17 at 07:18

Carsten Løvbo Andersen · Accepted Answer · 2017-07-24T07:56:41.837

1

First you need to use $(this).val() in the function below:

blur: function() {
  $(this).val(this.text);
},

Second, Because your input is a child of td then use .find("input") as in:

var test = $(this).find("input").val();

I've also moved your .change() function out of your .dblclick(). Reason is that the above "test" variable will only be set when you double click the td, not when you change it.

$('#previsionnel td').dblclick(function() {
  var input = $('<input>', {
    value: $(this).text(),
    type: 'text',
    blur: function() {
      $(this).val(this.text);
    },
    keyup: function(e) {
      if (e.which === 13)
        input.blur();
    }
  }).appendTo($(this).empty()).focus();

  var test = $(this).find("input").val();
  console.log(test);
  $('#previsionnel td').change(function() {

    test = $(this).find("input").val();
    console.log(test);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="previsionnel">
  <tr>
    <td>something</td>
  </tr>
</table>

edited Jul 24 '17 at 07:56

answered Jul 24 '17 at 07:15

Carsten Løvbo Andersen

26,637
10
47
77

I tried your `var test = $(this).find("input").val();` and I have the right value when I double click on it. When I change its value, I have the value of an other row. I tried your blur function as well but it wasn't working so I let it like before. – thomashoareau Jul 24 '17 at 07:25
@HoareauThomas Check the snippet again, i changed it again to the change function work for the correct td – Carsten Løvbo Andersen Jul 24 '17 at 07:57
It works, I didn't think about that while it makes sense. Thanks you. – thomashoareau Jul 24 '17 at 08:08

score 0 · Answer 2 · answered Jul 24 '17 at 07:33

1) There is syntax error - unclosed handler dblclick

 $('#previsionnel td').dblclick(function () {
            var input = $('<input>', {
                value: $(this).text(),
                type: 'text',
                blur: function () {
                    $(this).text(this.value);
                },
                keyup: function (e) {
                    if (e.which === 13)
                        input.blur();
                }
            }).appendTo($(this).empty()).focus();

            var test = $(this).text();
            console.log(test);

            $('#previsionnel td').change(function () {
                console.log(test);
            });
});

2) If you use AJAX logic for getting data in the table, try to use event handler on();. Because

'Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.'

E.g.

$('body').on('dblclick', '#previsionnel td', function () {
            var input = $('<input>', {
                value: $(this).text(),
                type: 'text',
                blur: function () {
                    $(this).text(this.value);
                },
                keyup: function (e) {
                    if (e.which === 13)
                        input.blur();
                }
            }).appendTo($(this).empty()).focus();

            var test = $(this).text();
            console.log(test);

            $('#previsionnel td').change(function () {
                console.log(test);
            });
});

score 0 · Answer 3 · answered Jul 24 '17 at 07:43

In this line $(this).val(this.text); this refers to the text box. I am guessing you want to update the td? Try the below snippet

$('#previsionnel td').on( "dblclick", function() {
  var input = $('<input>', {
    value: $(this).text(),
    type: 'text',
    blur: function() {
      $(this).parent("td").text($(this).val());
      $(this).hide();
    },
    keyup: function(e) {
      if (e.which === 13)
        input.blur();
    }
  }).appendTo($(this).empty()).focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="previsionnel">
  <tr>
    <td>something</td>
    <td>something2</td>
  </tr>
</table>

score 0 · Answer 4 · answered Jul 24 '17 at 08:04

var input; // Please declare input as globaly declare
   $('#previsionnel td').dblclick(function () {
            var test;
            input = $('<input>', {
                value: $(this).text(),
                type: 'text',
                blur: function () {
                   test = $(this).text(this.value);
                },
                keyup: function (e) {
                    if (e.which === 13)
                        input.blur();
                }
            }).appendTo($(this).empty()).focus();

            var test = $(input).val();//use input variable instead this
            console.log(test);            
         });   
         $(document).on('blur','input',function () {
             console.log($(this).val()); //get value outside event listener
         });

How to get the value of a with jQuery?

4 Answers4