Update multiple fields using only one button OnClick AJAX

Question

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

SoluableNonagon · Accepted Answer · 2016-11-29 15:28:52Z

1

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

answered Nov 29, 2016 at 15:28

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SoluableNonagon Over a year ago

To note, the above is not the best way just the simplest

user5567987 Over a year ago

how can i disable those "blur" events? because i find it annoying it still updating after the event blur

SoluableNonagon Over a year ago

if you can do .on() then you can call .off() on whatever selector you want.

user5567987 Over a year ago

AGAIN. Thank you so much!

user5567987 Over a year ago

where can I put .off() ?

Collectives™ on Stack Overflow

Update multiple fields using only one button OnClick AJAX

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related