How to save input when click outside of it in jQuery

Follow the below file to easily edit table records and submit that details in database 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>

 

How to save input when click outside of it in jQuery
About author
Monika
Monika
Website Developer
0 comments
Be a First Comment
Add Your Comment