user5567987 user5567987 - 1 year ago 68
Javascript Question

update multiple fields using only one button onclick ajax

My code here only update certain field on "onblur" event. What I want is update the whole row with just one click of a button. The values are from the "td" in 1.php and will be updated through page 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)
data:{id:id, text:text, column_name:column_name},


$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>
<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(">UPDATE</button>


$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 Source

The least change you need is to just trigger the events you already have declared on button click.

$('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' );
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download