✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Prevent Form Submit jQuery

Last Updated : Jan 1, 2023

IN - jQuery

Prevent Form Submit jQuery

In this article we will show you the solution of prevent form submit jQuery, here we needs to use preventDefault(), val() and append() methods for achieve the result.

The preventDefault() method stops the default action of an element from happening.

The val() method used to collects all form fields input from user and append() method used for appends all retrieved details on html webpage.

Step By Step Guide On Prevent Form Submit jQuery :-

Here we defined form with post method, it contains three input fields, textarea field and span tag for shows result on webpage.

In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and we waiting for click() method’s click event occurrence which is added on submit button ‘s’.

Within this we defined preventDefault() method with ‘e’ parameter which is help us to prevent form submission.

Then we collecting form inputs using val() method and using if condition we checks all are not null then we appending each fields user input on html webpage otherwise it displays error message. 

<!DOCTYPE html>
<html>
    <head>
        <title>PREVENT FORM SUBMIT</title>
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        <script>
            $(document).ready(function(){
                $('.s').click(function(e){
                    e.preventDefault();
                    var n=$('#nm').val();
                    var eml=$('#em').val();
                    var m=$('#msg').val();
                    if(!(n==""||eml==""||m=="")){
                        $("#subdata").append("Name: "+n+"<br>Email: "+eml+"<br>Message: "+m);
                    }
                    else{
                        $("#subdata").text("Please Fill All Fields");
                    }
                });
            })
        </script>
        </head>
        <body>
            <form method="post">
                <input type="text" name="name" id="nm"><br>
                <input type="email" name="email" id="em"><br>
                <textarea name="msg"cols="30" rows="10" id="msg"></textarea><br>
                <input type="submit" name="sub" class="s"><br>
                <span id="subdata"></span>
            </form>
        </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Here we imported open source jquery library support file which is needed for coding using jquery in program.
  5. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  6. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  7. In script we defined ready() method within that we added click method with ‘e’ parameter, appends with submit button by using class attribute ‘s’.
  8. Within function using ‘e’ parameter we needs to append ‘preventDefault()’ method with that for avoids form submission.
  9. Then we collecting ‘name, mail, message’ of user inputs by val() method which is when added with specific elements and stored on respective variables ‘n,eml,m’.
  10. Using if condition we checks any input fields not null then we appending all retrieved details on span tag ‘subdata’ by using append() method, otherwise ‘Please Fill All Fields’ message will append on span element.
  11. In html block we defined form with three input fields for collect name,email,generate submission and textarea for collect users message then at last span element for shows result on webpage.
  12. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to prevent form submission using jquery.

Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.

When we executes program on browser we can see form fields and button ‘Submit’ user needs to fill all input fields then clicks on submit.

Users input are shown below with respected field name.

I hope this article on prevent form submit jQuery helps you and the steps and method mentioned above are easy to follow and implement.

Latest Tutorials