我想用MySQL的PHP循环上的多个按钮填充多个表单。对于每个条目,我有3个按相同的Ajax调用处理的按钮。我面临的问题是识别单击了哪个按钮并将其添加到要发送给PHP文件的表单数据中
function() {
var form = $('#PayBillFormForm0'); // will be different for each PHP loop
var formMessages = $('#PayBillResults0'); // will be different for each PHP loop
$(form).submit(function(e) {
e.preventDefault();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: "php/pay.php", // When pay0 button is clicked
url: "php/decline.php", // When decline0 button is clicked
data: formData
})
.done(function(response) {
var messageAlert = response.type;
var messageText = response.message;
var alertBox = '<div class="alert ' + messageAlert + '"style="margin-top:10px;"><d style="font-size:12px; ">' + messageText + '</d></div>';
(formMessages).html(alertBox);
$('#Bill0').delay(3000).fadeOut(2000); //Bill0 is different for each PHP loop
})
});
}
<div class="card" id="Bill0">
<div id="PayBillResults0"></div> <!-- To show Ajax Response Message -->
<div class="card-header">
<h1>XXX</h1>
</div>
<div class="card-body">
<form id="Form0" method="post" action="">
<input name="user" id="user" value="user" type="hidden">
<input name="id" id="id" value="9" type="hidden">
<input name="reciver" id="reciver" value="ppp" type="hidden">
<input name="amount" id="amount" value="333.0" type="hidden">
<input name="tax" id="tax" value="5.0" type="hidden">
<input name="comment" id="comment" value="XXX" type="hidden">
</form>
<div id="Buttons">
<div id="Pay">
<button form="" class="btn btn-success" id="pay0" value="pay0">Pay</button>
</div>
<div id="decline">
<button form="" class="btn btn-danger" id="decline0" value="decline0">Decline</button>
</div>
<div id="Hide">
<button form="" id="hide0" class="btn btn-warning" value="hide0">Hide</button>
</div>
</div>
</div>
</div>
我能够通过标记每个表单和标记每个按钮以及具有多个onclick函数以及多个jQuery代码来执行此操作。任何想法如何将单击的按钮值与表单数据一起发送到PHP以进行不同的处理。
答案 0 :(得分:0)
使用PHP循环时,切勿在元素上使用任何id
。请改用类...或一些data attributes。
您正在通过向其添加数字来使用唯一ID。但是类更有用,因为您可以向类中添加一个事件处理程序...代替n
事件处理程序用于PHP迭代创建的元素。因此,它避免了无用的代码重复,只是引起了人们的注意。
那是我现在建议你的。修改您的PHP循环,以便创建HTML:
(我删除了所有似乎无用的东西)
<div class="card" data-id="0">
<div class="PayBillResults"></div> <!-- To show Ajax Response Message -->
<div class="card-header">
<h1>XXX</h1>
</div>
<div class="card-body">
<form>
<input name="user" value="user" type="hidden">
<input name="id" value="9" type="hidden">
<input name="reciver" value="ppp" type="hidden">
<input name="amount" value="333.0" type="hidden">
<input name="tax" value="5.0" type="hidden">
<input name="comment" value="XXX" type="hidden">
</form>
<div>
<div>
<button class="btn btn-success pay" value="pay">Pay</button>
</div>
<div>
<button class="btn btn-danger decline" value="decline">Decline</button>
</div>
<div>
<button class="btn btn-warning hide" value="hide">Hide</button>
</div>
</div>
</div>
</div>
看到data-id="0"
吗?在那里,您将使用PHP迭代计数器获得您的表格编号。
现在这是客户端脚本,只需使用一次(不要循环播放):
$(document.ready(function(){
// Change the URL to use with Ajax on button click
var AjaxUrl = "";
$(".pay").on("click",function(){
AjaxUrl = "php/pay.php";
$(this).closest(".card").find("form").submit();
});
$(".decline").on("click",function(){
AjaxUrl = "php/decline.php";
$(this).closest(".card").find("form").submit();
});
// Form submit handler
$("form").submit(function(e) {
e.preventDefault();
var card = $(this).closest(".card");
var formData = $(this).serialize();
formData.append("formNumber",card.data("id"));
$.ajax({
type: 'POST',
url: AjaxUrl,
data: formData
})
.done(function(response) {
var messageAlert = response.type;
var messageText = response.message;
var alertBox = '<div class="alert ' + messageAlert + '"style="margin-top:10px;"><d style="font-size:12px; ">' + messageText + '</d></div>';
card.find(".PayBillResult").html(alertBox);
card.delay(3000).fadeOut(2000);
})
});
}); // End ready
因此,在.pay
或.decline
按钮上单击时,将相应地更改用于Ajax请求的URL。
(我不知道第三个按钮的用法)
然后.closest()
表单提交。从$(this)
(即<form>
)中,您可以找到所需的所有相关元素。
请注意,正在提交的表单编号已添加到formData。
您将使用$_POST['formNumber']
来恢复它。