how to save input when click outside of it in jquery

Question

I have a table of records. when a user double-clicks on each <td> it converts to <input type="text"> and after click outside it, it must be saved. but the problem is when click inside of the specific <td> it does that.

//double click ->then convert to input
$(document).on('dblclick', 'tbody tr td', function() {
  var tmp = $(this).text();
  var name = $(this).attr("data-name");
  $(this).html('<input type="text" id="tmp_ed" value="' + tmp + '"/>');
  $(document).on('click', function() {
    if ($(this).attr('id') !== "tmp_ed") {
      var item = $('#tmp_ed').val();
      var tr = $('#tmp_ed').parent().parent();
      var id = tr.find('i').attr('id');
      var update = {
        id: id,
        request: "update",
        val: item,
        column: name
      };
      $.ajax({
        url: "update.php",
        method: "POST",
        data: update,
        success: function(e) {
          alert(e);
        }
      });
      $(this).parent().html(item);
      $(this).remove();
    }


  });
});

Use onChange on input

Lakshay Jain
– Lakshay Jain

2017-08-04 13:51:47 +00:00
Commented Aug 4, 2017 at 13:51 — Lakshay Jain
– Lakshay Jain, Commented Aug 4, 2017 at 13:51

Milan Chheda · Accepted Answer · 2017-08-10 12:38:06Z

1

Here is a small working demo of your requirement without the AJAX call to update the input value in your database:

//double click ->then convert to input
var currentEle = '';
$(document).on('dblclick', 'tbody tr td', function(e) {
  e.stopPropagation();
  currentEle = $(this);
  var tmp = $(this).text();
  var name = $(this).attr("data-name");
  $(this).html('<input type="text" id="tmp_ed" value="' + tmp + '"/>');
  $("#tmp_ed").focus();
});

$(document).click(function(e) {
  if ($(e.target).closest('td').length == 0)
    $(currentEle).html($("#tmp_ed").val());
});

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

answered Aug 10, 2017 at 12:38

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

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

Comments

NullDev · Accepted Answer · 2017-08-04 13:46:42Z

1

How about something like

window.onclick = function(event) { 
    if (event.target != $('#tmp_ed')){
        //Your saving stuff
    }
}

JSFiddle: https://jsfiddle.net/gss6ezko/

edited Aug 4, 2017 at 13:46

answered Aug 4, 2017 at 13:40

NullDev

7,3784 gold badges37 silver badges59 bronze badges

1 Comment

korush Over a year ago

unfortunately the same issue.

Collectives™ on Stack Overflow

how to save input when click outside of it in jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related