When i submit text it wont leave text-area

Question

I have a wierd problem! I am currently posting data with Ajax, and it works fine, it posts the data and update as it should. The problem im having tho is, when i press the button "submit" in the textarea in the modal, that posts the new instructions, the text wont leave the textarea, like a post text should, but it does the posts the values via ajax as i want..

It's the textarea inside the modal with the name instructions that im wondering about. So what im wondering is why the text wont go away when it's posted. The Ajax works as it should..What's wrong?

Here is my first html

 <div class="container"> <div class="row"> <div class="headlineBox"> <h2 class="headlineTodo text-light"> ToDo list Application PHP and Mysql Database</h2> </div> </div> <div class="d-flex justify-content-center createMargin"> <form method="post" action=" " class="form-inline"> <label class="sr-only" for="inlineFormInputGroupUsername2">Todo</label> <div class="input-group mb-2 mr-sm-2"> <div class="input-group-prepend"> </div> <input type="text" name="toDo" class="form-control" id="todoTask" placeholder="Add things to do"> </div> <button type="submit" name="submit" class="btn btn-primary mb-2">Submit</button> </form> </div> <div class="row justify-content-center"> <table> <tr> <th></th> <th>ToDo task</th> <th>Add instructions</th> <th>time Created</th> <th>Delete task</th> </tr> 

First php code

  <?php $stmt = $pdo->query("SELECT * FROM todo"); $todo = $stmt->fetchAll(); // skapa en tabell foreach($todo as $task) { echo "<tr>"; echo '<td><label class="toDoCheckBox">'; echo "<td>".$task['toDo']."</td>"; echo "<td><a href='#testmodal'class='connect_modal' data-toggle ='modal' data-target='#testmodal' data-title ='".$task['toDo']."' data-id='".$task['id']."'>Add</a></td>"; echo "<td>".date("Ymd",$task['timestamp'])."</td>"; echo "<td><a href='addToDo.php?id=".$task['id']."'>Ta bort</a></td>"; echo "</tr>"; } ?> </table> // end table </div> 

  <div class="modal fade" id="testmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Todo instructions for</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div id="confirmUpdate"></div> <div class="listInstructions"> <table id="showInstructions"> <tr> <th>Instructions</th> </tr> <!--<td><div id="showInstructions"></div></td>--> </table> <button id="closeInstruction" class="btn btn-secondary">Close</button> </div> <div class="modal-body"> <textarea name="instructions" class="form-control" id="instructionsText" style="min-width: 100%;"></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary" id="showList">Show instructions</button> <button class="btn btn-primary" id="submitInstructions">Save changes</button> </div> </div> </div> </div> </div> 

 <script> $(document).ready(function(){ $("#showList").click(function(){ $(".listInstructions").show(); }); $("#closeInstruction").click(function(){ $(".listInstructions").hide(); }); var instructionsModal = $('#testmodal'), // The modal showInstructions = $('#showInstructions'), // The Div where we want to show the instructions instructionsText = $('#instructionsText'), // ID to the textarea submitInstructions = $('#submitInstructions'),// Button in the Text area ModalLabel = $('#ModalLabel'); instructionsModal.on('show.bs.modal', function (e) { var target = $(e.relatedTarget), todoId = target.data('id'), taskName = target.data('title'); // The uniqe id to todo instruction column submitInstructions.attr('data-id', todoId); // Button ID ModalLabel.html("#ID " + todoId + " " + taskName); $('#modalElement').data('modal', null); $.ajax({ url:"fetchTodoDetails.php", method: "POST", data:{todoId:todoId, status:"select"}, dataType:"JSON", success:function(data) { var st = ""; $.each(data, function(index){ st += "<tr><td>"+data[index]+"</td>"; }); $("#showInstructions").html(st); //showInstructions.html(data); } }) }); submitInstructions.on('click', function (e) { var todoId = submitInstructions.attr('data-id'), newInstruction = instructionsText.val(); console.log(todoId); $.ajax({ url:"fetchTodoDetails.php", method: "POST", data:{todoId:todoId, status:"update", newInstruction:newInstruction}, dataType:"JSON", success:function(data) { showInstructions.html(data.test); } }) }); }); </script> 

Here comes the php where i send my ajax

 <?php require_once('dbconfig.php'); /// Selects all the instructions and shows them in the textarea if($_POST['status'] == "select") { if(isset($_POST['todoId']) && is_numeric($_POST['todoId'])) { $id = $_POST['todoId']; $stmt = $pdo->prepare("SELECT instructions FROM todo WHERE id=?"); $stmt->execute([$id]); $instructions = $stmt->fetch(); $getInstructions = explode(";",$instructions['instructions']); echo json_encode($getInstructions); } else { echo "Something went wrong"; } } if($_POST['status'] == "update") { if(isset($_POST['todoId'])) { $updateId = $_POST['todoId']; $addInstruction = trim($_POST['newInstruction']); $array = [ 'test' => "Ny instruktion är tillagd", 'checkId' => $updateId ]; $stmt = $pdo->prepare("UPDATE todo SET instructions = concat(instructions, ';', :newInstructions) WHERE id = :id"); $stmt->execute( array('newInstructions' => $addInstruction, 'id' => $updateId)); echo json_encode($array); } } 

Answer 1

Since the you make a POST request via ajax it doesn't reload the page, no input fields will be cleared. You need to do it manually via JavaScript.

In your example, in the success method of the ajax call that submits the query, you would add:

instructionsText.val('');
instructionsText.html('');

I used both .val('') and .html('') because of the way textareas handle value. If it was just an <input> with type=text you only need to clear the value ie only use .val('').

You will need to do this for every other input field whose value you want cleared after the request is successfully submitted.

Answer 2

You need to do two things. First you need to remove textarea value and second you need to close modal popup by js. So you need to make changes in your code as below:

submitInstructions.on('click', function (e) {
            var todoId = submitInstructions.attr('data-id'),
                newInstruction = instructionsText.val();
                instructionsText.val(''); // to remove existing value
                $('#testmodal').modal('hide'); //to hide modal popup
                console.log(todoId);
            $.ajax({
                url:"fetchTodoDetails.php",
                method: "POST",
                data:{todoId:todoId, status:"update", newInstruction:newInstruction},
                dataType:"JSON",
                success:function(data)
                {   
                    showInstructions.html(data.test);
                }
            })
        });

Hope it helps you.