Menu Close

How to save input when click outside of it in jQuery

codeamend

Follow the below file to easily edit table records and submit that details in database using Ajax.

Note: When you double click the table value it converted like input field and once you change the text and click outside of the input it will automatically store using Ajax.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>how to save input when click outside of it in jquery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
		<table>
			<thead>
            	<tr>
                	<th>Name</th>
                </tr>
            </thead>
            <tbody>
  				<tr>
    				<td class="editdata" data-id="1">Sample 1</td>
  				</tr>
  				<tr>
    				<td class="editdata" data-id="2">Sample 2</td>
  				</tr>
            </tbody>
		</table>
        
		<script>
        	var currentEle = '';
        	$(document).on('dblclick', 'td.editdata', function(e) {
                e.stopPropagation();
                currentEle = $(this);
                var tmp = $(this).text();
                var id = $(this).attr("data-id");
                $(this).html('<input type="text" id="tmp_edit" data-id="'+ id +'" value="' + tmp + '"/>');
                $("#tmp_edit").focus();
        	});

	
        	$(document).click(function(e) {
                if ($(e.target).closest('td.editdata').length == 0){
                    var name = $("#tmp_edit").val();
                    if (!name ){ 
                        alert('Please Submit The Valid Name');
                        setInterval('location.reload()', 100);
                    } else {
                        var id = $("#tmp_edit").attr("data-id");
                        $.ajax({
                            url: '/savedata',
                            type: 'post',
                            data: {
                                id: id,
                                name: name
                            },
                            dataType: 'json',
                            success:function(data) {
                                $(currentEle).html(data[0].name); 
                            }
                        });
                    }
                }
        	});
    	</script>
    </body>
</html> 
Posted in JavaScript, jQuery

You can also read...