javascript - 当我提交文本时,它不会离开文本区域
问题描述
我有一个奇怪的问题!我目前正在使用 Ajax 发布数据,它工作正常,它会发布数据并按应有的方式进行更新。我遇到的问题是,当我按下模态文本区域中的“提交”按钮时,会发布新指令,文本不会像发布文本一样离开文本区域,但它会通过 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);
}
}
解决方案
由于您通过 ajax 发出 POST 请求,因此不会重新加载页面,因此不会清除任何输入字段。您需要通过 JavaScript 手动完成。
在您的示例中,在提交查询的 ajax 调用的成功方法中,您将添加:
instructionsText.val('');
instructionsText.html('');
由于 textareas 处理值的方式,我同时使用了 .val('') 和 .html('') 。如果它只是一个<input>
你type=text
只需要清除值,即只使用.val('')。
在成功提交请求后,您需要对所有其他要清除其值的输入字段执行此操作。
推荐阅读
- javascript - Fullpage.js onSlideLeave 触发 CSS 类
- ionic-framework - 参数类型“{directives: any[];}”不可分配给“NgModule”类型的参数
- python - 使用图像运行 PyQt5 时出错
- java - Solr 插件自定义
- python - 阶跃函数和指数衰减的卷积
- javascript - 打开不同选项卡中的 URL 列表并单击相同按钮
- android - [Android]如何使用 ADB 命令将正在进行的通话置于 HOLD
- javascript - Summernote 编辑器 - 将转发器字段添加到对话框
- c++ - 如何在 Cmake 中正确设置标题路径以在我的项目中构建 Box2D
- php - php mkdir() 无法正常工作