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

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

• javascript
• jquery
• html
• ajax

• 1 Listen to submit event of the form instead of click of a button. – Teemu Commented May 16, 2018 at 19:27
• remove action attribute from your form tag and then listen to submit event of the form. – Vinod Kolla Commented May 16, 2018 at 19:30
• Tried (as I said above) still doens't work – Litsher - Nathan Commented May 16, 2018 at 19:36
• 1 change <button type="submit" to <button type="button" – fdomn-m Commented May 16, 2018 at 19:40

3 Answers 3

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./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>

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>

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./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>