I have created a form using ajax and php but when I click on submit the values in the textarea remains as it not disappears so I found a way to make form reset once I click on submit here is my code and please let me know how to make the text to be removed once submitted

submit_message :

<form method="POST" action="admindashboard.php">
<ul class="media-list">
<li class="media">
<img class="todo-userpic pull-left" src="./img/avatar4.jpg" width="27px" height="27px">

<div class="media-body">
<input type="hidden" name="projid" id="projid" value="<?php echo $project["proj_id"]; ?>" />
<input type="hidden" name="user1" id="user1" value="<?php echo "1"; ?>" />
<textarea class="form-control todo-taskbody-taskdesc" name="message" id="message" rows="4" placeholder="Type comment..."></textarea>
<button type="button" class="pull-right btn btn-sm btn-circle green-haze" onclick='submit_reply();'> &nbsp; Submit &nbsp; </button>


function submit_reply() {
        var hr = new XMLHttpRequest();

        var url     = "includes/response.php";
        var projid  = document.getElementById("projid").value;
        var user1   = document.getElementById("user1").value;
        var message = document.getElementById("message").value;

        var vars= "projid="+projid+"&user1="+user1+"&message="+message;

        hr.open("POST", url, true);

        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        hr.onreadystatechange = function () {
            if (hr.readyState == 4 & hr.status == 200) {
                var return_data = hr.responseText;
                document.getElementById("response").innerHTML = return_data;

        document.getElementById("response").innerHTML = "Processing...";



    $user1   = $_POST["user1"];
    $projid  = $_POST["projid"];
    $message = $_POST["message"];
    $date    = date("d-F-Y");
    $time    = date("h:i:sa");

    $insert_message = "INSERT INTO conversation (proj_id, user_1, comment, date_reply, time_reply) VALUES ('$projid', '$user1', '$message', '$date', '$time')";
    $confirm        = mysqli_query($connection, $insert_message);

You are using Ajax to do the work. If you want to reset your form, inside your submit_reply(), add another portion of JavaScript to clear/reset your form data (right after line 18). Simply go through each element in the form that you want to clear/reset, and set the value to whatever you want.

// i.e.
message.innerHTML = "";

By the way, do you want your form to interact with admindashboard.php? I ask because you are using Ajax to submit form data. If you have nothing to do with admindashboard.php, then remove the action=... from the form tag because having it with no reason may open security hole to an attacker.

Member Avatar

To reset the form try


Perfect it worked thank you so much