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

I'm building a simple website which uses mysql as backend. I have a form which has 2 buttons of which one searches data from db and populates the page using Ajax another button updates the new values to db. Now my problem is i can't use both buttons as 'Submit' button.

Ajax Method & Html Form:

<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>

Now i want to know how can i modify above code so that i can use both button as submit.

Tried withformaction but it doesn't work because of Ajax method usage.

You can do this in many ways.

The first that come to my mind is: change the button type to be button instead of submit and add a onclick attribute

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

Then in your javascript:

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

In jquery you can trigger a submit. Check this : https://api.jquery.com/submit/

You create a div or other and in jquery you add a listener to this div :

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

And in 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>

And then your 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>

Check it out

来源：https://stackoverflow.com/questions/39702648/how-to-use-multiple-submit-buttons-in-a-single-form-having-ajax

标签

javascript

php

ajax

submit-button