php - AJAX 表单只执行一次(第一次输入)
问题描述
我通过循环循环输出 sql 选择行while
。每行都有自己的形式。只有第一种形式有效。其他表单只是刷新页面没有我们的任何结果。在通过 AJAX 提交表单时执行 update.php 函数。它只在第一个输入字段起作用,不知道如何触发其他字段。
PHP
echo " <div class=\"col-6 flex-vcenter-items fs-1\">
<form id='form".$row["id"]."' action='' method='POST'>
<input id='id' name='potnik' value='".$row["id"]."' type='hidden' />
<input id='cas' class=\"form-control cas".$row["id"]." fancy-border\" type=\"text\" name=\"posodobljeni_cas\"/>
<input class='btn btn-outline-primary' id='submit' type='submit' value='Nastavi uro'>
<label id=\"info\"></label>
</form>
</div>";
JS
$( document ).ready(function() {
//Async update
$(function () {
let idrow = $("#id").val();
$('#form'+idrow).on('submit', function (e) {
let updaterow = "update.php?id=";
console.log(updaterow + idrow);
e.preventDefault();
$.ajax({
type: 'post',
url: updaterow + idrow,
data: $('#form'+idrow).serialize(),
success: function () {
console.log('ura posodobljena');
//Koda za vstavljanje
console.log("Prejšnji čas",$("#id-ura"+idrow).text());
$("#id-ura"+idrow).replaceWith( $(".cas"+idrow).val() );
console.log("Novi čas",$(".cas"+idrow).val());
}
});
});
});
});
解决方案
基本的 HTML 规则是每个元素都有 unique
id,因为你forms
在循环中创建我将使用classes
而不是id's
echo " <div class=\"col-6 flex-vcenter-items fs-1\">
<form class='form' data-id='".$row["id"]."' action='' method='POST'>
<input name='potnik' value='".$row["id"]."' type='hidden' />
<input class=\"form-control cas".$row["id"]." fancy-border\" type=\"text\" name=\"posodobljeni_cas\"/>
<input class='btn btn-outline-primary' type='submit' value='Nastavi uro'>
<label class=\"info\"></label>
</form>
</div>";
现在我将根据类更改 jQuery 代码:-
$( document ).ready(function() {
$('input[type=submit]').on('click', function (e) {
e.preventDefault();
var obj = $(this);
let idrow = obj.closest("form").data('id'); // i have used data-id in forms
let updaterow = "update.php?id=";
$.ajax({
type: 'post',
url: updaterow + idrow,
data: obj.closest("form").serialize(),
success: function () {
//change these code also based on classes
console.log('ura posodobljena');
console.log("Prejšnji čas",$("#id-ura"+idrow).text());
$("#id-ura"+idrow).replaceWith( $(".cas"+idrow).val() );
console.log("Novi čas",$(".cas"+idrow).val());
}
});
});
});
推荐阅读
- python - 使用 Flask Web 和 opencv 进行 IP 摄像机流式传输的问题
- excel - 在运行时刷新 Ms 访问中的链接 Excel 文件路径
- c# - 尝试将字符串格式 (dd-mm-yyyy hh:mm:ss) 转换为 (yyyy-mm-dd hh:mm:ss) 日期格式
- python - FMUException: 未能设置实验
- javascript - 我应该绑定内置的 React 方法吗?
- wso2 - WSO2IS - 将验证码添加到密码重置流程
- qt - 如何通过 DEFINE 在 qt .pro 文件中添加路径
- apache-spark - Dataproc Spark Job 崩溃后无法找到 JVM 致命错误日志文件 (hs_err_pid.log)
- reactjs - 反应钩子。无法对未安装的组件执行 React 状态更新
- java - 如何清理 Java 飞行记录