Question

95

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

rated 0 times [ 98] [ 3] / answers: 1 / hits: 19004 / 8 Years ago, mon, september 26, 2016, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kristineterrak

Add To Favorites

Follow

Total Points: 74

Total Questions: 109

Total Answers: 115

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

answered 8 Years ago stephonkeandrer · Accepted Answer

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

        }

    });

}