如何在一个表单中区分 Sweetalert 的两个提交按钮

Question

我不知道如何区分 sweetalert 中的两个按钮

    <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="POST" id="deleteform" action="/">
        <input type="hidden" name="amccode" id="amccode" value="1">
        <button class="btn btn-danger" id="test1_id" name="test1" type="submit">TEST1</button>
        <button class="btn btn-danger" id="test2_id" name="test2" type="submit">TEST2</button>
</form>
<script>
$('#test1_id').on('click',function(e) {

    event.preventDefault();
var form = $(this).parents('form');

        swal({
  title: "Are you sure?",
  text: "All data related to this AMC ID will be parmanently deleted",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes",
  cancelButtonText: "No, cancel please!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
          form.submit();
          } else {
    swal("Cancelled", "ha :)", "error");

  }
});
});


$('#test2_id').on('click',function(e) {

    event.preventDefault();
var form = $(this).parents('form');

        swal({
  title: "Are you sure?",
  text: "TEST2",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes",
  cancelButtonText: "No, cancel please!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
          form.submit();
          } else {
    swal("Cancelled", "ha :)", "error");

  }
});
});

</script>

在处理表单的代码中，我无法获取 name="test1" 或 name="test2" 信息，因此无法区分两个按钮，所以我想在按下 button1 时处理 action1，并处理按下按钮2时的动作2

我支持的代码是

from flask import Flask, flash, render_template, request

app = Flask(__name__)
app.secret_key = "assa"


@app.route("/", methods=["POST", "GET"])
def single_input():
    if request.method == "POST":
        print(request.form)
        return render_template("index.html")
    return render_template("index.html")


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

我无法得到哪个响应来自 test1，哪个来自 test2

Answer 1

你需要使用attr来获取元素的属性

https://api.jquery.com/attr/

$('#test1_id').on('click',function(e) {
  var getNameAttr = $(this).attr("name");
  console.log(getNameAttr);
  
  event.preventDefault();
  var form = $(this).parents('form');

  swal({
    title: "Are you sure?",
    text: "All data related to this AMC ID will be parmanently deleted",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes",
    cancelButtonText: "No, cancel please!",
    closeOnConfirm: false,
    closeOnCancel: false
  },
  function(isConfirm){
    if (isConfirm) {
      form.submit();
    } else {
      swal("Cancelled", "ha :)", "error");
    }
  });
});


$('#test2_id').on('click',function(e) {
  var getNameAttr = $(this).attr("name");
  console.log(getNameAttr);
  
  event.preventDefault();
  var form = $(this).parents('form');

  swal({
    title: "Are you sure?",
    text: "TEST2",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes",
    cancelButtonText: "No, cancel please!",
    closeOnConfirm: false,
    closeOnCancel: false
  },
  function(isConfirm){
    if (isConfirm) {
      form.submit();
    } else {
      swal("Cancelled", "ha :)", "error");
    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="POST" id="deleteform" action="/">
  <input type="hidden" name="amccode" id="amccode" value="1">
  <button class="btn btn-danger" id="test1_id" name="test1" type="submit">TEST1</button>
  <button class="btn btn-danger" id="test2_id" name="test2" type="submit">TEST2</button>
</form>