Hello,
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>
</div>
</li>
</ul>
<button type="button" class="pull-right btn btn-sm btn-circle green-haze" onclick='submit_reply();'> &nbsp; Submit &nbsp; </button>
</form>

header.php

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

        hr.send(vars);
        document.getElementById("response").innerHTML = "Processing...";
    }

response.php

<?php
    require_once("../../includes/connection.php");

    $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 for diafol

To reset the form try

$('#form_id').trigger("reset");

Perfect it worked thank you so much

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.