1

I have a problem that others seem to have, but I cannot get the recommended solution (i.e., "return false;") to work. Any help would be great!

Description:

When the form is submitted, I want to validate the input is in the correct format (i.e., type="email") and launch an alert (i.e., "Form submitted.") without the page refreshing. Currently, the alert does not appear and the page refreshes.

Test Code:

<!DOCTYPE html>

<html lang="en">
    <head>
        <!-- JavaScript -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <!-- Form -->
        <form>
            <input type="email" placeholder="Email" value="" size="25px" required="required" id="userEmail">
            <button type="submit" id="submit">Submit</button>
        </form>

        <!-- Alert on Submission -->
        <script>
            console.log("Ready to Go!");
            $('#submit').submit(function () {
                alert("Form submitted.");
                return false;
            });
        </script>
    </body>
</html>
Jesse
  • 447
  • 2
  • 8
  • 18
  • The page will need to refresh eventually unless you switch to an AJAX post. Are you just trying to catch errors, and then finally submit after they are fixed? – Cᴏʀʏ Oct 07 '14 at 21:05
  • Why use a submit button at all? Why not a regular button with the click event? – antlersoft Oct 07 '14 at 21:06
  • On a side note, 25px isn't a valid size for inputs, you just want 25 : http://www.w3schools.com/tags/att_input_size.asp – Ben Temple-Heald Oct 07 '14 at 21:48

4 Answers4

4

You will want to catch the submit event of the form. There is no submit event on a button.

        $('form').submit(function () {
            if (*everything ok*) {
                alert("Form submitted.");
            } else {
                return false;
            }
        });

Ideally you would help identify your <form>, either with an ID or a class, i.e.:

<form id="xyz-form">

And then change your selector to:

$('#xyz-form').submit(...);

Now this is only to stop the form from submitting when there are errors. When return false; isn't the path the submit callback takes, your page is going to refresh. If you want to submit the data to the server without a refresh, you will need to approach this differently.

Cᴏʀʏ
  • 105,112
  • 20
  • 162
  • 194
2

Give your form an ID, and change your jquery to use #formid instead.

For example : 

<form id="form">
    <input type="email" placeholder="Email" value="" size="25px" required="required" id="userEmail">
    <button type="submit" id="submit">Submit</button>
</form>

<script type="text/javascript">
    $('#form').submit(function () {
        alert("Form submitted.");
        return false;
    });
</script>
Ben Temple-Heald
  • 708
  • 1
  • 6
  • 16
0

The event handler attached to the submit function in jQuery can be the form element or a div element. Read more on jQuery API You can implement a click event when the user clicks on the submit button without its default submitting behavior with jQuery's preventDefault function

console.log("Ready to Go!");
            $('form').submit(function () {
                alert("Form submitted.");
                return false;
            });
$("#submit").click(function(e){
      if (hasError){
          e.preventDefault();
      }
      else{
         alert("success");
      }
 })

The if and else statements are created for simple validation. For the scope of your question, I leave most of the coding for your creativity. But you can basically create a simple function to check for errors with the user inputs, if there are errors,prevent the submit button's default submission behavior. If the inputs are not empty and if inputs are free of errors, alert the user that the form has been submitted.

Nicki Chen
  • 96
  • 5
-2

try this instead

    $('#submit').click(function () {
        alert("Form submitted.");
        return false;
    });

it'll accomplish what you want.

basically the click fires before the submit

try this snippet to clear things up

 console.log("Ready to Go!");

$('#submit').click(function () {
  alert("Form submitted.");
  //return false;
  return true;
});

$("form").submit(function( event ) {
  alert("woot woot");
});
Pav
  • 21
  • 4