How to construct a button which then deactivates after i update a row?

I am trying to create a button which then deactivates after i submit. I have tried the script (on click) disabled but the moment i click on the button it gets refreshed and the script don’t work at all! Can someone please help me?

It sounds as though you’re looking for something like this (JS)

(function() {
  var f = document.getElementById("form"),
    s = document.getElementById("update");
  f.addEventListener("submit", function() {
    s.disabled = true;
    s.value = "Updating...";
  });
})();

OP, what is the actual problem you are trying to solve by doing this?

Probably need to see your code to offer much assistance. If it’s a form submission, submitting to the same script, maybe that would cause the form to re-draw for some reason. If that’s it, you could always draw the form initially with the submit button disabled, and only enable it when the page has finished rendering. Not in PHP, though.

what i have done is make comment and select the department then update it in the database and then now i want the update button to be deactivated once it update the comment and department also put another button in another page which will activate the update button ? A little help please. Thank you. This is my code for updating comment and department.

<?php
mysqli_report(MYSQLI_REPORT_ERROR|MYSQLI_REPORT_STRICT);
$conn = mysqli_connect("localhost","root", "","registration");

//
//   PROCESS POSTED DATA
//
        if ($_SERVER['REQUEST_METHOD']=='POST') {
            $stmt = $conn->prepare("UPDATE proposals
                                    SET
                                        comment = ?,
                                        department = ?
                                    WHERE id = ?
                                    ");
            $stmt->bind_param('ssi', $_POST['comment'], $_POST['department'], $_POST['id']);
            ($stmt->execute());
            
        }


if (!isset($_GET['id']) || trim($_GET['id'])=='') {
    header("Location: ");
    exit;
}

$res = $conn->prepare("SELECT id
                            , details
                            , location
                            , date
                            , time
                            , checkbox
                            , name
                            , agegender
                            , contact
                            , empid
                            , department
                            , organization
                            , summary
                            , outcome
                            , cause
                            , action
                            , reportedname
                            , position
                            , organisation
                            , reportedcontact
                            , status
                            , comment
                            , department
                       FROM proposals
                       WHERE id = ?
                       ");
$res->bind_param('i', $_GET['id']);
$res->execute();
$res->bind_result($id,$details,$location,$date,$time,$checkbox,$name,$agegender,$contact,$empid,$department,$organization,$summary,$outcome,$cause,$action,$reportedname,$position,$organisation,$reportedcontact,$status,$comment,$department);
$res->fetch();
$res->close();

//
//  status-dependent processing
//

               

?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type='text/css'>
    body  { font-family: calibri, sans; font-size: 12pt; }
    label { display: inline-block; width: 210px; background-color:#E4EBC5; color:orangered; padding: 8px; font-weight: 600; margin-right:30px; vertical-align: top;}
    .data { display: inline-block; width: 75%; background-color: beige; position: relative; top:10px;}
    /*.comment { display: inline-block; width: 450px; vertical-align: top;}  */
</style>
</head>
<body>
<header style="text-align:center; font-size:20px; inline-block; width: 210px; position: relative; left:40%; top:40px; font-weight: bold; background-color:#E4EBC5;">DETAILS</header>
<div class='w3-container'> 
    <form method='POST' id='formId'>
    
    <input type='hidden' name='id' value='<?=$id?>'>
    <div class="w3-card w3-padding" style='max-width: 100%; margin: 80px auto;'>
        <div>
            <label>ID :</label>
            <div class="data"><?=$_GET['id']?></div>
        </div>
         <div>
            <label>Details :</label>
            <div class="data"><?=$details?></div>
        </div>  
        <div>
            <label>Location</label>
            <div class="data"><?=$location?></div>
        </div>
        <div>
            <label>Date :</label>
            <div class="data"><?=$date?></div>
        </div>
        <div>
            <label>Time :</label>
            <div class="data"><?=$time?></div>
        </div>
        <div>
            <label>Checkbox :</label>
            <div class="data"><?=$checkbox?></div>
        </div>
        <div>
            <label>Name(Injured) :</label>
            <div class="data"><?=$name?></div>
        </div>
        <div>
            <label>Age/Gender(Injured) :</label>
            <div class="data"><?=$agegender?></div>
        </div>
        <div>
            <label>Contact(Injured) :</label>
            <div class="data"><?=$contact?></div>
        </div>
        <div>
            <label>Employee ID(Injured) :</label>
            <div class="data"><?=$empid?></div>
        </div>
        <div>
            <label>Department(Injured) :</label>
            <div class="data"><?=$department?></div>
        </div>
        <div>
            <label>Organization(Injured) :</label>
            <div class="data"><?=$organization?></div>
        </div>
        <div>
            <label>Summary :</label>
            <div class="data"><?=$summary?></div>
        </div>
        <div>
            <label>Outcome :</label>
            <div class="data"><?=$outcome?></div>
        </div>
        <div>
            <label>Cause :</label>
            <div class="data"><?=$cause?></div>
        </div>
        <div>
            <label>Action :</label>
            <div class="data"><?=$action?></div>
        </div>
        <div>
            <label>Reported by Name :</label>
            <div class="data"><?=$reportedname?></div>
        </div>
        <div>
            <label>Reported Position :</label>
            <div class="data"><?=$position?></div>
        </div>
        <div>
            <label>Reported Organisation :</label>
            <div class="data"><?=$organisation?></div>
        </div>
        <div>
            <label>Reported Contact :</label>
            <div class="data"><?=$reportedcontact?></div>
        </div>
        
        <div>
            <label>Nearmiss Status :</label>
            <div class="data"><?=$status?></div>
        </div>
         <div class="data">
        <label>Select Department :</label>    
        <input type='hidden' name='department'>
                <tr>
    <td><select name='department'>
    <option value='' selected>Select Department</option>
    <option value='Civil'>Civil</option>
    <option value='O&M'>O&M</option>
    <option value='C&M'>C&M</option>
    <option value='MMD'>MMD</option>
    <option value='Logistics'>Logistics</option>
    <option value='HR&ADMIN'>HR&ADMIN</option>
    <option value='Fire & Safety'>Fire & Safety</option>
    <option value='IT & MIS'>IT & MIS</option>
    <option value='F&M'>F&M</option>
    <option value='EMD'>EMD</option>
    <option value='C&I'>C&I</option>
    <option value='Store'>Store</option>
    <option value='EHS'>EHS</option>
    <option value='Tech Cell'>Tech Cell</option>
    <option value='Operation'>Operation</option>
        
  </select></td>
    </tr>
      </div>       
 
        
        <div>
            <label>Slected Dept :</label>
            <div class="data"><?=$department?></div>
        </div>
        <div>
            <label>Comment :</label>
            <div class="data"><textarea name='comment' class='w3-input w3-border' rows='5'><?=$comment?></textarea></div>
        </div>
       
   
   <div class="data"> <input type="submit" value="Submit" name="btnSubmit" id="btnSubmit"/></div>
       
    </form>
    </div>
    </div>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.