How to submit a form without page reload using jQuery?

Question

<form action="">
    <input type="text" id="id" name="id" value="">
    <input type="password" id="pw" name="pw" value="">
</form>

<script>
    $('#id').val('darth-vader');
    $('#pw').val('i-am-your-father');
    $('form').submit();
</script>

I know it would be very ridiculous question, anyway, what I am trying to do is save id and password to local storage or javaScript values, and then automatically log on. (without Server languages, I'm just making prototype on client side)

Of course, the avobe page reload infinitely, How can I do this correctly?

Possible duplicate of [jQuery AJAX submit form](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — styopdev, Jan 15 '17 at 07:44
@styopdev I red that, but I think there is a no relation with my question — JuntaeKim, Jan 15 '17 at 08:07

score 0 · Answer 1 · answered Jan 15 '17 at 07:45

0

Add event.preventDefault(); to the submit function. Check details here: https://api.jquery.com/submit/

It stops the default event from triggering, which in case of a submit is reloading the page.

answered Jan 15 '17 at 07:45

Paul van den Dool

2,498
2
16
35

But that is only to used in callback function I think, How can I use that above code? The submit would be fire automatically, – JuntaeKim Jan 15 '17 at 07:48

score 0 · Answer 2 · answered Jan 15 '17 at 07:56

You can: A) handle the submit event and make sure to return false B) use an ID'd button and bind a 'pseudo-submission' function to the button's click event.

My personal preference is B for simple cases, but using the native submit event allows the browser to handle native validation (such as required, max/mid-length, etc). If you're going to use A, you may return false or use event.preventDefault() to stop the page from reloading. Nothing further is required if you use B.

score 0 · Accepted Answer · answered Jan 15 '17 at 08:11

Self answer

problem :

<form action="">
    <input type="text" id="id" name="id" value="">
    <input type="password" id="pw" name="pw" value="">
</form>

<script>
    $('#id').val('darth-vader');
    $('#pw').val('i-am-your-father');
    $('form').submit();

    $('form').submit(function(e){
        e.prenventDefault();
    });
</script>

solved :

<form action="">
    <input type="text" id="id" name="id" value="">
    <input type="password" id="pw" name="pw" value="">
</form>

<script>
    $('#id').val('darth-vader');
    $('#pw').val('i-am-your-father');

    $('form').submit(function(e){
        e.prenventDefault();
    });

    $('form').submit();


</script>

How to submit a form without page reload using jQuery?

3 Answers3