CODEWITHSUNDEEP
javascriptjqueryhtmlajaxbootstrap-modal
Kent Abrio
Kent Abrio

Reputation: 455

disable text area after button click

I have a modal where I display multiple textareas, what I want is to disable the specific textarea that has been submitted

i have this javascript function but its not working, im concatinating a row id to the textarea id so that i can target the specific textarea. im not sure where im going wrong, please help.

function approveStatus(status){
       var nid = status;
       var note = 'APPROVE';
       var app = document.getElementById("approvenote");

       app.addEventListener("click", function(){document.getElementById("note-"+status).disabled = true;});

       $.ajax({
        type: "POST",
        url: "mod.note.php?n=add",
        data: "note="+note+"&nid="+nid
      });


     }

html

<textarea class="from-control" rows="4" cols="50" id="note-<?php echo $row1['objID']; ?>" 
                             name="note"></textarea>
                            <button type="button" class="btn-xs btn-warning"
                            onclick="makeStatus(<?php echo $row1['objID']; ?>)" id="submitnote" name="submitnote">Submit Note
                            </button>
                            </form>
                            <button type="button" class="btn-xs btn-info" 
                            onclick="approveStatus(<?php echo $row1['objID']; ?>)" id="approvenote" name="approvenote" >APPROVE</button>

php

$app = isset($_GET['n'])?$_GET['n']:'';
if($app=='add'){

        $remarks = $_POST['note'];
        $note_id = $_POST['nid'];

        $auth_user->lessonRemarks($remarks,$note_id);
        header("Location: admin.php");

}else{
    header("Location: admin.php");
}

php function

public function lessonRemarks($remarks,$note_id){
        $stmt = $this->conn->prepare("UPDATE `objectives`   
            SET `status` = :remarks
            WHERE `objID` = :note_id");

        $stmt->bindparam(":remarks",$remarks);
        $stmt->bindparam(":note_id",$note_id);
        $stmt->execute();

        return $stmt;
    }

Upvotes: 0

Views: 1158

Answers (3)

Michael Seltene
Michael Seltene

Reputation: 591

You are using onclick as well as adding event listener for the same id. So use "document.getElementById("note-"+status).disabled = true;" instead of "app.addEventListener("click", function(){document.getElementById("note-"+status).disabled = true;});"

Upvotes: 1

Vitalii Andrusishyn
Vitalii Andrusishyn

Reputation: 4172

Thy this code:

app.addEventListener("click", function(){
    document.getElementById("note-"+status).readOnly = true; 
});

Upvotes: 0

Ronen Cypis
Ronen Cypis

Reputation: 21470

To simplify it, you need to use jQuery's .prop() function like so:

$('button').click(function(){
  $('#textarea').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<button>Disable</button>

Upvotes: 0

Related Questions