Question

我想用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以进行不同的处理。

Answer 1

使用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']来恢复它。

使用相同的ajax调用处理多个按钮

1 个答案: