如何在具有Ajax的单个表单中使用多个Submit按钮

How to use multiple Submit buttons in a single form having Ajax

本文关键字：按钮 Submit 表单 单个 Ajax      更新时间：2023-09-26

我正在构建一个简单的网站，它使用mysql作为后端。我有一个表单，它有两个按钮，其中一个按钮从数据库中搜索数据，并使用Ajax填充页面；另一个按钮将新值更新到数据库。现在我的问题是我不能同时使用这两个按钮作为"提交"按钮。

Ajax方法&Html形式：

<script type="text/javascript">
     $(document).ready(function(){  
           $(document).on('submit', '#update-form', function(){
                var data = $(this).serialize();
                $.ajax({
                    type : 'POST',
                    url  : 'search.php',
                    data : data,
                    success :  function(data){
                        $(".display").html(data);
                    }
                });
                return false;
            });
        });
</script>
<body>
  <div id="update" class="tab-pane fade">
                <form id="update-form" role="form" class="container" method="post" action="search.php">
                    <h3>Update details</h3>
                    <table class="display">
                        <tr  class="space">
                            <td><label>File Number:</label></td>
                            <td><input type="text" class="form-control" name="filenum" required></td>
                        </tr>
                    </table>
                    <button type="submit" class="btn btn-default text-center" name="search_btn" >Search</button>      
                    <button type="submit" class="btn btn-default text-center"  name="submit_btn" formaction="update.php">Update</button>
                </form>
            </div>
</body>

现在我想知道如何修改上面的代码，这样我就可以使用两个按钮作为提交。

尝试使用formaction，但由于使用Ajax方法，它不起作用

您可以通过多种方式实现这一点。

我首先想到的是：将按钮类型更改为按钮而不是提交，并添加onclick属性

<button type="button" onclick="submitForm('search.php')">Search</button>
<button type="button" onclick="submitForm('update.php')">Update</button>

然后在您的javascript中：

function submitForm(url){
    var data = $("$update-form").serialize();
    $.ajax({
        type : 'POST',
        url  : url,
        data : data,
        success :  function(data){
            $(".display").html(data);
        }
    });
}

在jquery中，您可以触发提交。检查此项：https://api.jquery.com/submit/

您创建了一个div或其他，并在jquery中为这个div添加了一个监听器：

<div id="button">Here my button</div>

在jquery 中

$('#button').on('click', function(){
    $('#update-form').submit()
}

<form id="update-form">
    ...
    ...
    <button type="button" class="submitForm" formaction="search.php">Search</button>
    <button type="button" class="submitForm" formaction="update.php">Update</button>
</form>

然后你的JS:

$('.submitForm').click(function(){
    $.ajax({
        method: 'post',
        url: $(this).attr('formaction),
        data: $("#update-form").serialize(),
        ...
        ...
        success: function(){  }
    });
});


   $(document).ready(function(){  
           $(document).on('submit', '#update-form', function(){
             
                var data = $(this).serialize();
                $.ajax({
                    type : 'POST',
                    url  : 'search.php',
                    data : data,
                    success :  function(data){
                        $(".display").html(data);
                    }
                });
                return false;
            });
     
     $(document).on('click', '#update-btn', function(){
                var data = $("input[name='filenum']").val(); //Handle how you want
       
                $.ajax({
                    type : 'POST',
                    url  : 'update.php',
                    data : data,
                    success :  function(data){
                        $(".display").html(data);
                    }
                });
              });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="update" class="tab-pane fade">
                <form id="update-form" role="form" class="container" method="post" action="search.php">
                    <h3>Update details</h3>
                    <table class="display">
                        <tr  class="space">
                            <td><label>File Number:</label></td>
                            <td><input type="text" class="form-control" name="filenum" required></td>
                        </tr>
                    </table>
                    <button type="submit" class="btn btn-default text-center" name="search_btn" >Search</button>      
                    <button form='forn-is-not-exist' class="btn btn-default text-center"  name="submit_btn" id="update-btn" >Update</button>
                </form>
            </div>
</body>

查看

相关文章：