Обновление нескольких полей, используя только одну кнопку OnClick AJAX

Question

Мой код здесь обновляет только определенное поле в событии onblur. Я хочу обновить всю строку одним нажатием кнопки. Значения от "ТД" в 1.php и будет обновляться через страницу 2.php

сценарий

$(document).on('blur', '.id', function(){ 
    var id = $(this).data("id10"); 
    var id1 = $(this).text(); 
    edit_data(id, id1, "id"); 
}); 
$(document).on('blur', '.firstname', function(){ 
    var id = $(this).data("id1"); 
    var firstname = $(this).text(); 
    edit_data(id, firstname, "firstname"); 
}); 
$(document).on('blur', '.middlename', function(){ 
    var id = $(this).data("id2"); 
    var middlename = $(this).text(); 
    edit_data(id,middlename, "middlename"); 
}); 
$(document).on('blur', '.lastname', function(){ 
    var id = $(this).data("id3"); 
    var lastname = $(this).text(); 
    edit_data(id, lastname, "lastname"); 
}); 
$(document).on('blur', '.address', function(){ 
    var id = $(this).data("id4"); 
    var address = $(this).text(); 
    edit_data(id,address, "address"); 
}); 
$(document).on('change', '.gender', function(){ 
    var id = $(this).data("id5"); 
    var gender = $(this).val(); 
    edit_data(id,gender, "gender"); 
}); 
$(document).on('blur', '.contact', function(){ 
    var id = $(this).data("id6"); 
    var contact = $(this).text(); 
    edit_data(id, contact, "contact"); 
}); 
$(document).on('blur', '.username', function(){ 
    var id = $(this).data("id7"); 
    var username = $(this).text(); 
    edit_data(id,username, "username"); 
}); 

$(document).on('blur', '.password', function(){ 
    var id = $(this).data("id8"); 
    var password = $(this).text(); 
    edit_data(id,password, "password"); 
}); 
function edit_data(id, text, column_name) 
{ 
    $.ajax({ 
     url:"2.php", 
     method:"POST", 
     data:{id:id, text:text, column_name:column_name}, 
     dataType:"text", 
     success:function(data){ 
      alert(data); 
     } 
    }); 
} 

1.php

$output .= ' 
<tr class="datas"> 

    <td class="id" data-id10="'.$row["id"].'" contenteditable>'.$row["id"].'</td> 
    <td class="firstname" data-id1="'.$row["id"].'" contenteditable>'.$row["firstname"].'</td> 
    <td class="middlename" data-id2="'.$row["id"].'" contenteditable>'.$row["middlename"].'</td> 
    <td class="lastname" data-id3="'.$row["id"].'" contenteditable>'.$row["lastname"].'</td> 
    <td class="address" data-id4="'.$row["id"].'" contenteditable>'.$row["address"].'</td> 
    <td id="gender"> 
    <select class="gender" onchange="getval(this)" data-id5="'.$row["id"].'" > 
     <option value="Male" ' . ($row["gender"]=='Male' ? 'selected' : '') . '>Male</option> 
     <option value="Female" ' . ($row["gender"]=='Female' ? 'selected' : '') . '>Female</option> 
    </select> 
    </td> 
    <td class="contact" data-id6="'.$row["id"].'" contenteditable>'.$row["contact"].'</td> 
    <td class="username" data-id7="'.$row["id"].'" contenteditable>'.$row["username"].'</td> 
    <td class="password" data-id8="'.$row["id"].'" contenteditable>'.$row["password"].'</td> 

    <td class="but"><button type="button" name="delete_btn" id="delete_btn" data-id9="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">DELETE</button> 
     <button type="button" name="delete_btn" id="update_btn" data-id12="'.$row["id"].'" onclick="update(this.id)">UPDATE</button> 
     </td> 
</tr>'; 

2. php

$id = $_POST["id"]; 
$text = $_POST["text"]; 
$column_name = $_POST["column_name"]; 

$sql = "UPDATE agents SET ".$column_name."='".$text."' WHERE id='".$id."'"; 
if(mysqli_query($conn, $sql)) 
{ 
    echo 'Data Updated'; 
} 

Answer 1

Наименьшее изменение, которое вам нужно, это просто запустить события, которые вы уже объявили при нажатии кнопки.

$('button').on('click', function() { 
    // in the row below, just enter the ids, classes, or other selectors you want, then trigger the even by name (blur, change, focus, ...) 
    $('.id,.gender,.contact,...').triggerHandler('blur'); 
})