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

Sur*_*mad 5 javascript php ajax submit-button

我正在构建一个使用 mysql 作为后端的简单网站。我有一个表单,它有 2 个按钮,其中一个从 db 搜索数据并使用 Ajax 填充页面,另一个按钮将新值更新为 db。现在我的问题是我不能将两个按钮都用作“提交”按钮。

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>
Run Code Online (Sandbox Code Playgroud)

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

尝试过,formaction 但由于 Ajax 方法的使用,它不起作用。

Mar*_*rko 6

您可以通过多种方式做到这一点。

我想到的第一个是:将按钮类型更改为按钮而不是提交并添加一个 onclick 属性

<button type="button" onclick="submitForm('search.php')">Search</button>
<button type="button" onclick="submitForm('update.php')">Update</button>
Run Code Online (Sandbox Code Playgroud)

然后在你的javascript中:

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