Question

您好我的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页面中只有1个提交按钮且没有if(isset())的东西，我实际上已经工作了。如何在不刷新主页的情况下在另一页中使用2个提交和issets？

Answer 1

使用此功能，可能对您有用

试

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

OR

<button type="button">

Answer 2

使用按钮上的click事件并将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;
}
?>

Answer 3

$(this).serialize();

上述代码语句不包括提交按钮的名称作为键值对。

所以，正如人们在我之前建议的那样，你应该使用按钮代替提交按钮。这样的事情。

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;
}
?>

使用2个按钮提交而不刷新

3 个答案: