6

Assume this simple HTML form:

        <form id="settings-form">
            <label>
            Input data:
            <input name="data"/>
            </label>
            <button id="submit-btn">Submit</button>
        </form>

I want to submit this form using jQuery and AJAX, so the page will not be refreshed. You can do this in at least these two ways:

1. Attaching an event handler to the actual submission of the form:

    $("#settings-form").submit(function(event){
        event.preventDefault();
        var data = $(this).serialize();
        //Ajax code here
    });

Here, I'd add type='submit' to button submit-btn.

2. Attaching an event handler to the button:

    $("#submit-btn").click(function(){
        var data = $("#settings-form").serialize(); // or this.closest("form").serialize()
        //Ajax code here
    });

And here, submit-btn gets type='button'

My question is: Which option is better and why? This is not about which type attribute value is better for the button in this case, but why event handler 1 is better than 2 or vice-versa.

lennyklb
  • 1,307
  • 2
  • 15
  • 32
  • 2
    If you put the event listener on the actual submission of the form it will also trigger when the user hits "Enter" when focussed on the input. That will not be the case in option 2. – Koen Nov 04 '16 at 13:59
  • @Koen That's a good point. I guess the `click()` event listener method seems like rewriting `submit()` without covering the same functionality. – lennyklb Nov 04 '16 at 14:03
  • Well, in case you go with the `click` event, the user has to actually click the button to submit the form with jQuery. But there are many more ways to submit a form these days. ;-) – Koen Nov 04 '16 at 14:06
  • Possible duplicate of [Difference between and ](http://stackoverflow.com/questions/290215/difference-between-input-type-button-and-input-type-submit) – Jeric Cruz Nov 04 '16 at 14:40

3 Answers3

7

A form can be submitted by multiple sources, not only by clicking the submit button (eg: manually invoking $("form").submit() or pressing Enter).

Using the first option assures you of catching all possible submits on that form while the second option only blocks the submit when clicking the button. Its up to you to decide which one you need.

In terms of performance there is no difference.

Alexandru Severin
  • 6,021
  • 11
  • 48
  • 71
  • 1
    I understand. I guess click event handlers become more and more prominent when a page has multiple forms or AJAX data handlers? – lennyklb Nov 04 '16 at 14:17
  • @LennartKloppenburg Usually each form should have its own submit button, and if need a button to submit multiple forms, you wouldn't place it in any of them, so you wouldn't need to prevent its action. – Alexandru Severin Nov 07 '16 at 15:44
  • @LennartKloppenburg I have yet to meet a practical situation where overriding onClick() was better than overriding form's submit(), but I am sure more experienced developers know such scenarios, reason why I did not state in my answer that you should always override submit() – Alexandru Severin Nov 07 '16 at 15:49
0

type='submit' is used to pass the form data to the server.

type='button' is for executing other commands in your application. though it can also do posting of data in the server using ajax call if you wish to do.

so in general if your page is all about forms(application form, contact form, etc.) better to use type='submit' and for your other commands like for example get zip code of the address in your form use type='button'

you can also refer to this post: Difference between <input type='button' /> and <input type='submit' />

Community
  • 1
  • 1
Jeric Cruz
  • 1,899
  • 1
  • 14
  • 29
-1

When you use submit button add return false to prevent submission and redirection to form action.

Submit is always considered better because of the following reasons:

  1. Submit does what it is intended for.
  2. Cross platform performance. (Try using it on different browsers on different devices. by default enter/return is binded with input type="submit")
Saurabh Sharma
  • 2,422
  • 4
  • 20
  • 41
  • 1
    First of all, `event.preventDefault();` should already prevent submission. Secondly, this is not what OP is asking – Alexandru Severin Nov 04 '16 at 13:58
  • You've improved your answer, but how do these advantages hold when the actual form is NOT submitted as in this question? The data is sent using AJAX, so we don't need `submit()` for 'what it is intended for', we just need an event that triggers the AJAX call. – lennyklb Nov 04 '16 at 14:13
  • 1
    @LennartKloppenburg Even in AJAX request you are submitting the form data!. And its about usability. When you tap return while adding data in input. it submits data even if its an ajax call. you don't need to intentionally tap submit button to do that. – Saurabh Sharma Nov 04 '16 at 14:17
  • True, I mean that when using `event.preventDefault` you are in fact blocking the `submit()` itself so you can override how the data is submitted. You're right about usability, though sometimes forms are intuitively only submitted by clicking buttons. I guess it depends on the situation. – lennyklb Nov 04 '16 at 14:21
  • 1
    Its indeed about the usability. I don't like to hit a button after filling data on form. Return/Enter key does the job and it is intended for that Apps are made aware of forms. Check on phone keyboard a form with a submit button and without a submit button! – Saurabh Sharma Nov 04 '16 at 14:23