Should I use the click or form submit button when using jQuery and AJAX?

Question

Suppose 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 that the page does not refresh. You can do this in at least two ways:

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

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

Here I would add type='submit'to the button submit-btn.

2. Attaching the event handler to the button:

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

And here it submit-btngetstype='button'

My question is: which option is better and why? It's not about which attribute value is typebetter for buttonin this case, but why the event handler 1 is better than 2 or vice versa.

Answer 1

​​ , (: $("form").submit() Enter).

, , . , .

.

Answer 2

type='submit' form .

type='button' . ajax-, .

, ( , ..), type='submit', , , form t22 >

: < input type = 'button'/ > < input type = 'submit'/ >

Answer 3

, return false, .

Submit - :

• , .
• -. ( . enter/return input type="submit")