I am working on a form that has two input type buttons. The first button is labeled "edit", and when clicked, it enables the input field. The second button is labeled "save", and when clicked, it disables the input field and should save the new values in a MySQL database.
Everything is functioning correctly except for updating the value in the database after editing using the input type button. How can I achieve this without using submit to prevent page reload issues with enabling and disabling the input field?
Below is the jQuery code used to enable and disable the input fields:
<script>
$(document).ready(function(){
$("form input[type=text],form input[type=checkbox]").prop("disabled",true);
$("input[name=edit]").on("click",function(){ $(this).closest("tr").find("input[type=text],input[type=checkbox],select").removeAttr("disabled");
})
$("input[name=save]").on("click",function(){ $(this).closest("tr").find("input[type=text],input[type=checkbox],select").prop("disabled",true);
})
</script>
/***********************************************/
<form name='' id='' action='' method='post'>
<input type='text' name='txt_category' id='category' value='$category' disabled>
<input type='text' name='txt_stage' id='stage' value='$stage' disabled>
<input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
<input type='button' name='edit' value='edit'>
<input type='button' name='save' id='save' value='save'>
</form>
<?php
ob_start();
include("../includes/connect.php");
$id=$_POST['txt_id'];
$stage=$_POST['txt_stage'];
$category=$_POST['txt_category'];
$priority=$_POST['txt_priority'];
$frequency=$_POST['txt_frequency'];
$notapprove=$_POST['txt_notapprove'];
$approve=$_POST['txt_approve'];
$notexist=$_POST['txt_notexist'];
$wo=$_POST['txt_wo'];
$duration=$_POST['duration'];
$startdate=$_POST['startdate'];
$enddate=$_POST['enddate'];
$asd=$_POST['txt_asd'];
$add=$_POST['txt_add'];
$aduration=$_POST['txt_aduration'];
$transferredto=$_POST['txt_transferredto'];
$prb=$_POST['txt_percentage'];
$note=$_POST['txt_note'];
$projectname=$_POST['txt_projectname'];
if($notapprove==""){$notapprove="False";}else{$notapprove="True";}
if($approve==""){$approve="False";}else{$approve="True";}
if($notexist==""){$notexist="False";}else{$notexist="True";}
$sql=mysqli_query($conn,"update tbl_checklist set db_category='$category',db_stage='$stage',db_priority='$priority',db_frequency='$frequency',db_notapprove='$notapprove',db_wo='$wo',db_asd='$asd',db_add='$add',db_aduration='$aduration',db_transferredto='$transferredto',db_percentage='$prb',db_note='$note',db_approve='$approve',db_notexist='$notexist' where db_id='$id'")or die(mysqli_error($conn));
//header("location:checklist.php?msg=1&s=$projectname");
ob_end_flush();
?>