当我提交文字时，它不会离开文字区域

Question

我有一个奇怪的问题！ 我当前正在使用Ajax发布数据，并且工作正常，它可以发布数据并按需更新。 的问题是，当我在模态的textarea中按下“提交”按钮时，它会发布新的指令，文本不会像应该发布的文本那样离开textarea，但是它确实会通过ajax来发布值如我所愿

这是模态内的文本区域，我想知道的是名称指示。 因此，我想知道的是为什么文本在发布时不会消失。 Ajax可以正常工作。怎么了？

这是我的第一个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> 

第一个php代码

  <?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> 

这是我发送我的ajax的PHP

 <?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

由于您通过ajax发出POST请求，因此不会重新加载页面，因此不会清除任何输入字段。 您需要通过JavaScript手动进行操作。

在您的示例中，在提交查询的ajax调用的成功方法中，您将添加：

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

由于textareas处理值的方式，我同时使用了.val（''）和.html（''）。 如果它只是type=text的<input> ，则只需要清除该值即可，即仅使用.val（''）。

在成功提交请求后，您需要对要清除其值的所有其他输入字段执行此操作。

Answer 2

您需要做两件事。 首先，您需要删除textarea值，其次，您需要通过js关闭模式弹出窗口。 因此，您需要对代码进行如下更改：

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

希望对您有帮助。