I catch my forms submit with:
$('#my-form').submit(function(e){
//do stuff
Here's my html
<div class="row">
<div class="columns">
<button type="submit" class="small right">Save</button>
</div>
</div>
Also in my form are other buttons for deleting images:
<button class="tiny btn-caption" data-reveal-id="caption-modal">
<i class="fa fa-bars fa-2x"></i>
</button>
The problem is, these image buttons submit the form, how can I stop this?
Option1:
Check
HTML button to NOT submit form
Difference between <input type='button' /> and <input type='submit' />
Option 2: Work around
You need to do preventDefault() for other buttons
Assuming you are deleting using ajax call like below
$('.tiny btn-caption').click(function(e){
e.preventDefault(); // it will cancel the default form submission behavior
$.post({
//Ajax stuff for deleting goes here
});
});
Try this
Buttons like <button>Click to do something</button> are submit buttons.
add type="button" it will restrict form submission
<button type="button" class="tiny btn-caption" data-reveal-id="caption-modal">
<i class="fa fa-bars fa-2x"></i>
</button>
By default <button> will act as a submit button.
Try,
$("#my-form button[type!='submit']").click(function(e){
e.preventDefault();
});
You can add remove class for button which deletes images and prevent its action:
<button class="remove tiny btn-caption" data-reveal-id="caption-modal">
<i class="fa fa-bars fa-2x"></i>
</button>
JS:
$('#my-form .remove').click(function(){
// post another form or call ajax method
return false;
});
you need to apply event handlers to the buttons themselves not the whole form
$('#my_form button').click(function(){
//or
$('.tiny btn-caption, .small').click(function(){
$.post(url,dataString,function(response){
//handle resposne
});
return false;
});
Use the html input submit
<input type="submit" value="Submit">
