Menu
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.
877
asked Sep 26 '16 12:09
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.
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.
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.
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> <!--
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()
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With