Stop form refreshing page on submit

Question

How would I go about preventing the page from refreshing when pressing the send button without any data in the fields?

The validation is setup working fine, all fields go red but then the page is immediately refreshed. My knowledge of JS is relatively basic.

In particular I think the processForm() function at the bottom is 'bad'.

HTML

<form id="prospects_form" method="post">
    <input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" />
    <input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" />
    <input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" />
    <textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>
        
    <button id="form_send" tabindex="5" class="btn" type="submit" onclick="return processForm()">Send</button>
    <div id="form_validation">
        <span class="form_captcha_code"></span>
        <input id="form_captcha" class="boxsize" type="text" name="form_captcha" placeholder="Enter code" tabindex="4" value="" />
    </div>
    <div class="clearfix"></div>
</form>

JS

$(document).ready(function() { 

// Add active class to inputs
$("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); });
$("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); });
// Remove active class from inputs (if empty)
$("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } });
$("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } });


 
///////////////////
// START VALIDATION
$("#prospects_form").ready(function() {
    
    // DEFINE GLOBAL VARIABLES
    var valName = $('#form_name'),
        valEmail = $("#form_email"),
        valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        valMsg = $('#form_message'),
        valCaptcha = $('#form_captcha'),
        valCaptchaCode = $('.form_captcha_code');
        


    // Generate captcha
    function randomgen() {
        var rannumber = "";
        // Iterate through 1 to 9, 4 times
        for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); }
        // Apply captcha to element
        valCaptchaCode.html(rannumber);
    }
    randomgen();
    
    
    // CAPTCHA VALIDATION
    valCaptcha.blur(function() {
        function formCaptcha() {
            if ( valCaptcha.val() == valCaptchaCode.html() ) {
                // Incorrect
                valCaptcha.parent().addClass("invalid");
                return false;
            } else {
                // Correct
                valCaptcha.parent().removeClass("invalid");
                return true;
            }
        }
        formCaptcha();
    });
    
    // Remove invalid class from captcha if typing
    valCaptcha.keypress(function() {
        valCaptcha.parent().removeClass("invalid");
    });
    
    
    // EMAIL VALIDATION (BLUR)
    valEmail.blur(function() {
        function formEmail() {
            if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmail();
    });
    
    // Remove invalid class from email if typing
    valEmail.keypress(function() {
        valEmail.removeClass("invalid");
    });
    
    
    // VALIDATION ON SUBMIT
    $('#prospects_form').submit(function() {
        console.log('user hit send button');

        // EMAIL VALIDATION (SUBMIT)
        function formEmailSubmit() {
            if (!valEmailFormat.test(valEmail.val())) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmailSubmit();

        // Validate captcha
        function formCaptchaSubmit() {
            if( valCaptcha.val() === valCaptchaCode.html() ) {
                // Captcha is correct
            } else {
                // Captcha is incorrect
                valCaptcha.parent().addClass("invalid");
                randomgen();
            }
        }
        formCaptchaSubmit();
        
        
        // If NAME field is empty
        function formNameSubmit() {
            if ( valName.val() === "" ) {
                // Name is empty
                valName.addClass("invalid");
            } else {
                valName.removeClass("invalid");
            }
        }
        formNameSubmit();
        
        
        // If MESSAGE field is empty
        function formMessageSubmit() {
            if ( valMsg.val() === "" ) {
                // Name is empty
                valMsg.addClass("invalid");
            } else {
                valMsg.removeClass("invalid");
            }
        }
        formMessageSubmit();
    
    
        // Submit form (if all good)
        function processForm() {
            if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) {
                $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php");
                $("#form_send").attr("type", "submit");
                return true;
            } else if( !formEmailSubmit() ) {
                valEmail.addClass("invalid");
                return false;
            } else if ( !formCaptchaSubmit() ) {
                valCaptcha.parent().addClass("invalid");
                return false;
            } else if ( !formNameSubmit() ) {
                valName.addClass("invalid");
                    return false;
                } else if ( !formMessageSubmit() ) {
                    valMsg.addClass("invalid");
                    return false;
                } else {
                    return false;
                }
            }
        });
    });
    // END VALIDATION
    /////////////////
});

Planula

Answer 1

You can prevent the form from submitting with

$("#prospects_form").submit(function(e) {
    e.preventDefault();
});

Of course, in the function, you can check for empty fields, and if anything doesn't look right, e.preventDefault() will stop the submit.

Without jQuery:

var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);

Jerky

This method requires jQuery. I think its always better practice to prevent it with button type attribute. – Montano

This method can be done without jQuery with something like: var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm); And I have no idea how to format a comment properly, it seems. – Eating

Basically, include event.preventDefault(); in your form submission handling code. A one-liner variant of what I put in my other comment (basically the same as the jQuery version) would be: document.getElementById("prospects_form").addEventListener('submit', function(event){event.preventDefault();}); There may be a way to make that shorter (by not using addEventListener(), but it seems those ways of doing things are generally frowned upon. – Eating

In here if we are calling another function during on submit, then how do we call the handleform function mentioned in the above? – Kilocalorie

For pure Javascript solution (i.e., without using JQuery), please have a look at this answer. – Asomatous

Answer 2

Add this onsubmit="return false" code:

<form onsubmit="return false">

That fixed it for me. It will still run the onClick function you specify.

Cinchonidine

And it will still run HTML5 browser's form validation. – Carden

No libs required, jquery is awesome native is better in this case. – Bellerophon

This is the cleanest solution without JQuery. In addition, you can also use it as; onsubmit="return submitFoo()" and returning false in the submitFoo() if you need to call a function on submit. – Ramage

but it will never let the form submit. – Inactive

Answer 3

Replace button type to button:

<button type="button">My Cool Button</button>

Montano

This is the only method suggested which prevents the page from refreshing even if there is a Javascript error which can be useful for testing and development. – Carlocarload

This is useful, but doesn't prevent the submit/reload when user presses [Enter]. – Montalvo

not good for form validation :/ you need a submit button in a form element – Phyletic

I think this will work if you're sure the client side will always use JavaScript otherwise a button of type submit should not be excluded – Kidder

@Kidder This is not a global solution. This answer only refers to the OP's current situation and if there is no javascript, OP will never be able to submit the form anywhere even though button type="submit" as he has submitted the form on button action using jQuery. – Montano

Answer 4

One great way to prevent reloading the page when submitting using a form is by adding return false with your onsubmit attribute.

<form onsubmit="yourJsFunction();return false">
    <input type="text"/>
    <input type="submit"/>
</form>

Merchandise

This totally worked for me. This should be accepted answer. action='#' – Usa

Super old thread, but for anybody who comes across this now, please do not try action="#" because it does not work and is not an appropriate solution. The key is actually onsubmit="yourJsFunction();return false" – Emporium

but don't you think returning false isn't graceful? – Montano

perfect answer for me – Ramsay

Answer 5

You can use this code for form submission without a page refresh. I have done this in my project.

$(function () {
    $('#myFormName').on('submit',function (e) {

              $.ajax({
                type: 'post',
                url: 'myPageName.php',
                data: $('#myFormName').serialize(),
                success: function () {
                 alert("Email has been sent!");
                }
              });
          e.preventDefault();
        });
});

Relative

This answer is the only one that keeps the form functioning like it should. In my case its the only solution since I am getting my form from a third party and cannot play with it too much. – Coss

Answer 6

This problem becomes more complex when you give the user 2 possibilities to submit the form:

1. by clicking on an ad hoc button
2. by hitting Enter key

In such a case you will need a function which detects the pressed key in which you will submit the form if Enter key was hit.

And now comes the problem with IE (in any case version 11) Remark: This issue does not exist with Chrome nor with FireFox !

• When you click the submit button the form is submitted once; fine.
• When you hit Enter the form is submitted twice ... and your servlet will be executed twice. If you don't have PRG (post redirect get) architecture serverside the result might be unexpected.

Even though the solution looks trivial, it tooks me many hours to solve this problem, so I hope it might be usefull for other folks. This solution has been successfully tested, among others, on IE (v 11.0.9600.18426), FF (v 40.03) & Chrome (v 53.02785.143 m 64 bit)

The source code HTML & js are in the snippet. The principle is described there. Warning:

You can't test it in the snippet because the post action is not defined and hitting Enter key might interfer with stackoverflow.

If you faced this issue, then just copy/paste js code to your environment and adapt it to your context.

/*
 * inForm points to the form
 */
var inForm = document.getElementById('idGetUserFrm');
/*
 * IE submits the form twice
 * To avoid this the boolean isSumbitted is:
 *  1) initialized to false when the form is displayed 4 the first time
 * Remark: it is not the same event as "body load"
 */
var isSumbitted = false;

function checkEnter(e) {
  if (e && e.keyCode == 13) {
    inForm.submit();
    /*
      * 2) set to true after the form submission was invoked
      */
    isSumbitted = true;
  }
}
function onSubmit () {
  if (isSumbitted) {
    /*
    * 3) reset to false after the form submission executed
    */
    isSumbitted = false;
    return false;
  }
}

<!DOCTYPE html>
<html>
<body>

<form id="idGetUserFrm" method="post" action="servletOrSomePhp" onsubmit="return onSubmit()">
   First name:<br>
   <input type="text" name="firstname" value="Mickey">
   <input type="submit" value="Submit">
</form>

</body>
</html>

Sarsaparilla

Answer 7

The best solution is onsubmit call any function whatever you want and return false after it.

onsubmit="xxx_xxx(); return false;"

Darryl

Answer 8

Most people would prevent the form from submitting by calling the event.preventDefault() function.

Another means is to remove the onclick attribute of the button, and get the code in processForm() out into .submit(function() { as return false; causes the form to not submit. Also, make the formBlaSubmit() functions return Boolean based on validity, for use in processForm();

katsh's answer is the same, just easier to digest.

(By the way, I'm new to stackoverflow, give me guidance please. )

Erlking

Although it's good to know that return false; also stops event from bubbling up the DOM — it is a shorthand for event.preventDefault(); event.stopPropagation(); – Countryman

Answer 9

In pure Javascript, use: e.preventDefault()

e.preventDefault() is used in jquery but works in javascript.

document.querySelector(".buttonclick").addEventListener("click", 
function(e){

  //some code

  e.preventDefault();
})

Sellingplater

Answer 10

The best way to do so with JS is using preventDefault() function. Consider the code below for reference:

function loadForm(){
    var loginForm = document.querySelector('form'); //Selecting the form
    loginForm.addEventListener('submit', login);    //looking for submit
}

function login(e){
    e.preventDefault(); //to stop form action i.e. submit
}

Hein

e.preventDefault(); is what you are looking for – Necessitarianism

Answer 11

Personally I like to validate the form on submit and if there are errors, just return false.

$('form').submit(function() {

    var error;

   if ( !$('input').val() ) {
        error = true
    }

    if (error) {
         alert('there are errors')
         return false
    }

});

http://jsfiddle.net/dfyXY/

Transalpine

Answer 12

 $("#buttonID").click(function (e) {
          e.preventDefault();
         //some logic here
 }

Elison

Answer 13

If you want to use Pure Javascript then the following snippet will be better than anything else.

Suppose:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Form Without Submiting With Pure JS</title>
        <script type="text/javascript">
            window.onload = function(){
                /**
                 * Just Make sure to return false so that your request will not go the server script
                 */
                document.getElementById('simple_form').onsubmit = function(){
                    // After doing your logic that you want to do 

                    return false 
                }
            }
        </script>
    </head>
    <body>

    </body>
</html>
<form id="simple_form" method="post">
    <!-- Your Inputs will go here  -->
    <input type="submit" value="Submit Me!!" />
</form>

Hope so it works for You!!

Viehmann

Answer 14

Just use "javascript:" in your action attribute of form if you are not using action.

Execratory

Include some example for the more clarify your solution. – Acord

Answer 15

In my opinion, most answers are trying to solve the problem asked on your question, but I don't think that's the best approach for your scenario.

How would I go about preventing the page from refreshing when pressing the send button without any data in the fields?

A .preventDefault() does indeed not refresh the page. But I think that a simple require on the fields you want populated with data, would solve your problem.

<form id="prospects_form" method="post">
    <input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" required/>
    <input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" required/>
    <input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" required/>
    <textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>
</form>

Notice the require tag added at the end of each input. The result will be the same: not refreshing the page without any data in the fields.

Calc

Answer 16

<form onsubmit="myFunction(event)">
    Name : <input type="text"/>
    <input class="submit" type="submit">
  </form>
  <script>
  function myFunction(event){
    event.preventDefault();
    //code here
  }
  </script>

Olnee

using javascript only – Olnee

Answer 17

function ajax_form(selector, obj)
{

    var form = document.querySelectorAll(selector);

    if(obj)
    {

        var before = obj.before ? obj.before : function(){return true;};

        var $success = obj.success ? obj.success: function(){return true;};

        for (var i = 0; i < form.length; i++)
        {

            var url = form[i].hasAttribute('action') ? form[i].getAttribute('action') : window.location;

            var $form = form[i];

            form[i].submit = function()
            {

                var xhttp = new XMLHttpRequest();

                xhttp.open("POST", url, true);

                var FD = new FormData($form);

                /** prevent submiting twice */
                if($form.disable === true)

                    return this;

                $form.disable = true;

                if(before() === false)

                    return;

                xhttp.addEventListener('load', function()
                {

                    $form.disable = false;

                    return $success(JSON.parse(this.response));

                });

                xhttp.send(FD);

            }
        }
    }

    return form;
}

Didn't check how it works. You can also bind(this) so it will work like jquery ajaxForm

use it like:

ajax_form('form',
{
    before: function()
    {
        alert('submiting form');
        // if return false form shouldn't be submitted
    },
    success:function(data)
    {
        console.log(data)
    }
}
)[0].submit();

it return nodes so you can do something like submit i above example

so far from perfection but it suppose to work, you should add error handling or remove disable condition

Carbuncle

Answer 18

Sometimes e.preventDefault(); works then developers are happy but sometimes not work then developers are sad then I found solution why sometimes not works

first code sometimes works

$("#prospects_form").submit(function(e) {
    e.preventDefault();
});

second option why not work? This doesn't work because jquery or other javascript library not loading properly you can check it in console that all jquery and javascript files are loaded properly or not.

This solves my problem. I hope this will be helpful for you.

Abcoulomb

Answer 19

I hope this will be the last answer

$('#the_form').submit(function(e){
  e.preventDefault()
  alert($(this).serialize())
  // var values = $(this).serialize()
  // logic....
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="the_form">
   Label-A <input type="text" name='a'required><br>
   Label-B <input type="text" name="b" required><br>
   Label-C <input type="password" name="c" required><br>
   Label-D <input type="number" name="d" required><br>
   <input type="submit" value="Save without refresh">
</form>

Else

I hope so too, but unfortunately the thread is still inundated with low-quality answers so I've protected it. – Psi

Answer 20

You can do this by clearing the state as below. add this to very beginning of the document.ready function.

if ( window.history.replaceState ) {
    window.history.replaceState( null, null, window.location.href );
}

Fleisher

Answer 21

Add to the form:

<input type="hidden" name="prevent_resubmitting" value="<?php echo time() ?>">

After successfully submitting the form, add this code:

$_SESSION["prevent_resubmitting"]=$_POST["prevent_resubmitting"];

After refreshing, perform a check:

if(
    !empty($_SESSION["prevent_resubmitting"]) and
    $_SESSION["prevent_resubmitting"]==$_POST["prevent_resubmitting"]
) echo 'You cannot resubmit the form!';

Redmund