Don't redirect on submitting form

Question

I have a simple HTML based form like shown below, which keeps refreshing the page on click.

<form id="register" action="#" method="POST">
    <div class="input-group">
        <input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text">
        <input type="hidden" name="form" value="register">
        <input type="hidden" name="type" value="websiteregistration">
        <span class="input-group-append">
            <button type="submit" class="btn btn-light" data-name="register" onclick="formSubmit(this)">Go!</button>
        </span>
    </div>
</form>

And I am trying to stop it from redirecting when pressing the submit button.

(function($) {
    function formSubmit(e){
        e.preventDefault(); //This will prevent the default click action
        e.stopPropagation();

        var frm = $('#'+ $(this).data('name') +'');

        $.ajax({
            type: frm.attr('method'),
            url: '(url)',
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            }
        });

        return false;
    }
});

I added return false to stop it from redirecting, aswell as PreventDefault, but the page still refreshes when sending the data (The data is being sent btw).

I also tried to do it with $().submit, but with the same results. (I have hidden the url out of security reasons, but the submit in itself works).

The name-data attribute is used because i have several of the same form on the page and like this I can make it reusable

Listen to `submit` event of the form instead of `click` of a button. — Teemu, May 16 '18 at 19:27
remove `action` attribute from your form tag and then listen to `submit` event of the form. — Vinod Kolla, May 16 '18 at 19:30

score 5 · Accepted Answer · answered May 16 '18 at 19:37

Use event not this

formSubmit(event)

And remove the unnecessary codes:

function formSubmit(e){
    e.preventDefault(); //This will prevent the default click action

    var frm = $('#'+ $(this).data('name') +'');

    $.ajax({
        type: frm.attr('method'),
        url: '(url)',
        data: frm.serialize(),
        success: function (data) {
            console.log('Submission was successful.');
            console.log(data);
        },
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="register" action="#" method="POST">
 <div class="input-group">
  <input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text">
  <input type="hidden" name="form" value="register">
  <input type="hidden" name="type" value="websiteregistration">
  <span class="input-group-append">
   <button type="submit" class="btn btn-light" data-name="register" onclick="formSubmit(event)">Go!</button>
  </span>
 </div>
</form>

Igor Phelype Guimarães · Answer 2 · 2018-05-16T19:42:57.190

1

Try to delete the type="submit" atribute and change it to type='button' and also change the argument from 'this' to 'event':

<button type="button" class="btn btn-light" data-name="register" onclick="formSubmit(event)">Go!</button>

edited May 16 '18 at 19:42

answered May 16 '18 at 19:28

Igor Phelype Guimarães

446
3
16

also, you can remove the e.preventDefault(); and e.stopPropagation(); no need to add these two lines – Ankit Parmar May 16 '18 at 19:33
try to listen the onsubmit event instead, like 'Teemu' said – Igor Phelype Guimarães May 16 '18 at 19:34
1

If you *remove* the `type=` attribute, it will use the default, which is... wait for ... `submit` - so you need to specify `type='button'` – freedomn-m May 16 '18 at 19:41

score 0 · Answer 3 · answered May 16 '18 at 19:37

Give the type="button" instead of submit and also, remove the e.preventDefault(); and e.stopPropagation(); no need to add these two lines.

function formSubmit(e){

    var frm = $('#'+ $(this).data('name') +'');

    $.ajax({
        type: frm.attr('method'),
        url: '(url)',
        data: frm.serialize(),
        success: function (data) {
            console.log('Submission was successful.');
            console.log(data);
        },
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        }
    });

    return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="register" action="#" method="POST">
                                        <div class="input-group">
                                            <input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text">
                                            <input type="hidden" name="form" value="register">
                                            <input type="hidden" name="type" value="websiteregistration">
                                            <span class="input-group-append">
                                                <button type="button" class="btn btn-light" data-name="register" onclick="formSubmit(this)">Go!</button>
                                            </span>
                                        </div>
                                    </form>
         
        
         
         </body>
         </html>

Don't redirect on submitting form

3 Answers3

Linked