我有一个奇怪的问题！我当前正在使用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
$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("Y-m-d",$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">×</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);
}
}
答案 0 :(得分：1)
由于您是通过ajax发出POST请求的，因此不会重新加载页面，因此不会清除任何输入字段。您需要通过JavaScript手动进行操作。
在您的示例中，在提交查询的ajax调用的成功方法中，您将添加：
instructionsText.val('');
instructionsText.html('');
由于textareas处理值的方式，我同时使用了.val（''）和.html（''）。如果它只是带有<input>的{{1}}，则只需清除该值，即仅使用.val（''）。
您将需要对每个其他在成功提交请求后要清除其值的输入字段执行此操作。
答案 1 :(得分：1)
您需要做两件事。首先，您需要删除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);
}
})
});
希望它对您有帮助。