user5567987 user5567987 - 5 days ago 5
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

script

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

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' );
})
Comments