Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 877
Suroor Ahmmad Avatar asked Sep 26 '16 12:09

Suroor Ahmmad


People also ask

Can I submit form with multiple submit buttons using jQuery?

Can I submit form with multiple submit buttons using jQuery? Yes, you can submit form with multiple submit buttons. Attack a custom click handler to all the buttons and the check which button is clicked.

How do I submit a form with multiple inputs?

However, if you place two forms on the HTML page you can do this. Form1 would have the previous button. Form2 would have any user inputs + the next button. When the user presses Enter in Form2, the Next submit button would fire. I would use JavaScript to submit the form.

How to perform multiple actions with multiple buttons in a form?

Let’s learn the steps of performing multiple actions with multiple buttons in a single HTML form: Create a form with method ‘post’ and set the value of the action attribute to a default URL where you want to send the form data. Create the input fields inside the as per your concern. Create a button with type submit.

How to submit a form with the previous button type?

Change the Previous button type to button, and add a new onclick attribute to the button with value jQuery (this).attr ('type','submit');. So, when the user clicks on the Previous button then its type will be changed to submit and the form will be submitted with the Previous button. <form> <!--


2 Answers

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);
        }
    });
}
like image 184
Marko Avatar answered Sep 28 '22 08:09

Marko


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()
}
like image 44
jean-max Avatar answered Sep 28 '22 07:09

jean-max