使用2个按钮提交而不刷新 - Submit without refresh with 2 buttons

你好，所以我的html表单中有两个不同名称的提交按钮（btn1，btn2），我想做的是在不刷新页面的情况下提交到另一个页面。所以我想做的是，如果我点击btn1提交它会做一些事情，如果我单击btn2它会做另一件事。我在html页面中的代码是这个

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Percentage</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    $(document).ready(function(){
$('#myForm').on('submit',function(e) {
$.ajax({
url:'update.php',
data:$(this).serialize(),
type:'POST',
success:function(data){
console.log(data);
$("#success").show().fadeOut(5000);
},
error:function(data){
$("#error").show().fadeOut(5000); //===Show Error Message====
}
});
e.preventDefault();
});
});
    </script>
</head>
<body>
    <form method="POST" id="myForm">
    Input Amount: <input type="text" name="txt_amount" required placeholder="Input number"> <br /> <br />
     <span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span> <span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
    <input type="submit" name="btn1"> <input type="submit" name="btn2"> 
    </form>
</body>
</html>

我的update.php页面中的代码

<?php
if(isset($_POST['btn1'])) {
 //insert query
} else if(isset($_POST['btn2'])) {
 //another insert query
}
?>

实际上，如果我在update.php页面中只有一个提交按钮，而没有if(isset())，我就可以工作了。在不刷新主页的情况下，如何在另一个页面中使用2个提交和issets？

$(this).serialize();

上面的代码语句并没有包含submit按钮的名称作为键值对。

所以，正如人们在我之前建议的那样，你们应该使用按钮而不是提交按钮。像这样的东西。

HTML和JS

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Percentage</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    $(document).ready(function(){
    $('#btn1, #btn2').on('click',function(e) {
      var datastr = $(this).serialize() + "&button_id="+$(this).attr('id');
        $.ajax({
            url:'update.php',
            data:datastr,
            type:'POST',
            success:function(data){
            console.log(data);
            $("#success").show().fadeOut(5000);
            },
            error:function(data){
            $("#error").show().fadeOut(5000); //===Show Error Message====
            }
        });  
        e.preventDefault();
    });
});
    </script>
</head>
<body>
    <form method="POST" id="myForm" action="update.php">
    Input Amount: <input type="text" name="txt_amount" required placeholder="Input number"> <br /> <br />
     <span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span> <span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
    <button id="btn1">Button1</button><button id="btn2">Button2</button>
    </form>
</body>
</html>

PHP将是：

<?php
if($_POST['button_id'] == 'btn1') {
 //do something
} else if($_POST['button_id'] == 'btn2') {
 //do something else;
}
?>

使用这个，可能对有用

尝试

  $('#myForm').on('submit',function(e) {
    e.preventDefault();
  });

或

<button type="button">

使用按钮上的点击事件并将value属性添加到提交按钮，点击按钮的值将被粘贴到php文件

  <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Percentage</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script>
        $(document).ready(function(){
    $('input[type="submit"]').on('click',function(e) {
      e.preventDefault();
    $.ajax({
    url:'update.php',
    data:{'txt_amount':$('input[name="txt_amount"]').val(),'btn': $('input[type="submit"]').val()}
    type:'POST',
    success:function(data){
    console.log(data);
    $("#success").show().fadeOut(5000);
    },
    error:function(data){
    $("#error").show().fadeOut(5000); //===Show Error Message====
    }
    });
    });
        </script>
    </head>
    <body>
        <form method="POST" id="myForm">
        Input Amount: <input type="text" name="txt_amount" required placeholder="Input number"> <br /> <br />
         <span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span> <span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
        <input type="submit" name="btn1" value="btn1"> <input type="submit" name="btn2" value="btn2"> 
        </form>
    </body>
    </html>

php:

<?php
if($_POST['btn'] == 'btn1') {
 //do something
} else if($_POST['btn'] == 'btn2') {
 //do something else;
}
?>