javascript - 按钮以相同的形式调用另一个按钮的方法

Question

我有两个相同形式的按钮:

<form id="form" name="form">
    <input id="check" type="submit" value="Check" name="check">
    <input id="add" type="submit" value="Add/ Modify" name="add">
</form>

和

$("#form").submit(function(e){
var tmp=$("#form").serialize();
$.ajax({
  method: "POST",
  url: "config.php",
  data: tmp + '&action=add',
  dataType: "html",
  success: function(res){
    window.alert(res);
  }
});
e.preventDefault();
});


$("#form").submit(function(e){
var tmp=$("#form").serialize();
$.ajax({
  method: "POST",
  url: "config.php",
  data: tmp + '&action=check',
  dataType: "html",
  success: function(res){
    window.alert(res);
  }
});
e.preventDefault();
});

最后:

switch($_POST['action'])
{
    case 'check':
    print_r("check");
    break;

    case 'add':
    print_r("add");
    break;
}

我的问题是，当我单击一个按钮时，两种方法都会被调用。我尝试过这个，但我不知道我做错了什么。 谢谢!

Answer 1

您可以将类型从 submit 更改为 button，并在其上添加一个类以创建“点击”处理程序。在此回调中，您可以使用参数(按钮名称)调用函数:

<form id="form" name="form">
  <input id="check" type="button" value="Check" name="check" class="submitter">
  <input id="add" type="button" value="Add/ Modify" name="add" class="submitter">
</form>

和 JavaScript:

$(".submitter").click(function(e){
  e.preventDefault();
  formSubmitted(this.name);
});

function formSubmitted(action){ // One function, with action in paramter
  var tmp=$("#form").serialize();
  $.ajax({
    method: "POST",
    url: "config.php",
    data: tmp + '&action='+action, 
    dataType: "html",
    success: function(res){
      window.alert(res);
    }
  });
};