All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

This Form Submit jQuery

Last Updated : Mar 11, 2024

This Form Submit jQuery

In this article we will show you the solution of this form submit jQuery, here we needs to use this keyword and closest() method for achieve the result. The closest() method returns the first ancestor of the selected element.

An ancestor is a parent, grandparent, great-grandparent, and so on. Using this we finding form element and ‘this’ keyword we know it points current object in function so we pointed form then submitted.

Step By Step Guide On This Form Submit jQuery :-

At html block, we defined form with two input elements for collects name, mail id from users and button ‘Submit’.

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

Here we using this and closest(), submit() we submitted form and printed alert message for users clarification purpose.

<!DOCTYPE html>
<html>
    <head>
        <title>This Form</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $(this).closest('form').submit();
                    alert("Form is Successfully Submitted");
                })
            });
        </script>
    <body>
        <form>
            <input type="text" class="nm" placeholder="Enter Name">
            <input type="text" class="em" placeholder="Enter Email">
        </form>
        <button>Submit</button>
    </body>
    </head>
</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 defined click() method which is appends with button by using tag name ‘button’ for generates click event when user clicks on ‘Submit’ button.
  8. Within function we specified ‘this’ near ‘$’ symbol for points current object, then we needs to append this with closest() method with ‘form’ element name and lastly appended with submit() method.
  9. For successfully submit current form and using alert() method we printed message ‘Form is Successfully Submitted’ on browsers alerbox to notify users.
  10. In html block we defined form with two input elements ‘Name,Email’ for collect inputs from user and button ‘Submit’.
  11. 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 use this for submit form in 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 two empty text boxes and button ‘Submit’ now user needs to fill text box then clicks on button.

Then we can see message ‘Form is Successfully Submitted’ on alert box. I hope this article on this form submit jQuery helps you and the steps and method mentioned above are easy to follow and implement.