title: How to UPDATE database table using button with AJAX jQuery?
body: <p>I have 2 <code>textbox</code> the <code>firstName</code> and <code>lastName</code>. The problem is when I click another <code>textbox</code> which is the <code>lastName</code> the <code>alert message</code> popup and when I click <code>OK</code>, <code>alert message</code> show again and again. I need to refresh my browser to remove the <code>alert message</code>. I want to update my information using <code>button</code>. When I click the <code>update button</code> the <code>alert message</code> will show and when I click OK my table will be updated and <code>alert message</code> will be vanish. Can somebody help me regarding to my problem?</p>
  
  <pre><code>function edit_data(id, text, column_name){
    $.ajax({
      url:"edit.php",
      method:"POST",
      data:{id:id, text:text, column_name:column_name},
      dataType:"text",
      success:function(data){
        alert(data);
      }
    });
  }
  
  $(document).on('blur', '.first_name', function(){
    var id = $(this).data("id1");
    var first_name = $(this).text();
    edit_data(id, first_name, "FirstName");
  });
  
  $(document).on('blur', '.last_name', function(){
    var id = $(this).data("id2");
    var last_name = $(this).text();
    edit_data(id,last_name, "LastName");
  });
  
  $(document).on('click', '.btn_update', function(){
    var id=$(this).data("id10");
    if(confirm("Are you sure you want to update this?")){
      $.ajax({
        url:"update.php",
        method:"POST",
        data:{id:id},
        dataType:"text",
        success:function(data){
          alert(data);
          fetch_data();
        }
      });
    }
  });
  </code></pre>