How to Submit a Form Using jQuery?

Today, We want to share with you jquery form submit example.In this post we will show you javascript submit form with parameters, hear for call javascript function on submit button we will give you demo and example for implement.In this post, we will learn about submit form using jquery with an example.

jQuery Form Submit by Id, Class, Name and Tag

Example 1: index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(function() {
   $('#submit1').click(function(e) {
        e.preventDefault();
        $("#Demo").submit();
    });

   $('#submit2').click(function(e) {
        e.preventDefault();
        $("#Demo").submit();
    });
});
});
</script>

</head>
<body>
<form action="javascript:alert('submitted');" method="post" id="Demo">
    <label>Team</label>
    <input type="text" name="name" value="" />
    <input type="submit" name="submitme" value="Submit" id="submit1" />
    <p><a href="#" id="submit2">Submit</a></p>
</form>
</body>
</html>

Use the jQuery submit() Method

Example 2: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Form Submit - www.pakainfo.com</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#frmSubmitButton").click(function(){        
        $("#productInfo").submit();
    });
});
</script>
</head>
<body>
    <form action="action.php" method="post" id="productInfo">
        <label>First Name:</label>
        <input type="text" name="first-name">
        <button type="button" id="frmSubmitButton">Submit Form</button>
    </form>
</body>
</html>

jQuery submit form and then show results in an existing div

Example 3: index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Find a route using Geolocation and Google Maps API - www.pakainfo.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//maps.google.com/maps/api/js?sensor=true"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        #map {
            width: 100%;
            height: 400px;
            margin-top: 10px;
        }

        .listPlayer {
            width: 50%;
            background-color: orange;
            padding-top: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <form id="calculate-route" class="listPlayer" name="calculate-route" action="#" method="get">
        <div class="form-group">
            <label class="control-label col-sm-2" for="from">From:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="from" placeholder="Source"><a href=""></a>
            </div>
        </div>
        <br>
        <br>
        <br>
        <div class="form-group">
            <label class="control-label col-sm-2" for="to">To:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="to" placeholder="Destination">
            </div>
        </div>
        <br>
        <br>
        <center> <input type="submit" class="btn btn-success" />
            <input type="reset" class="btn btn-success" />
        </center>
    <closeform></closeform></form>
    <div id="map"></div>
    <p id="error"></p>
    <script>
        function calculateRoute(from, to) {

            var myOptions = {
                zoom: 10,
                center: new google.maps.LatLng(25.84, 45.25),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            // Draw the map
            var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
            var directionsService = new google.maps.DirectionsService();
            var directionsRequest = {
                origin: from,
                destination: to,
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC
            };
            directionsService.route(
                directionsRequest,
                function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        new google.maps.DirectionsRenderer({
                            map: mapObject,
                            directions: response
                        });
                    } else
                        $("#error").append("Sorry, Unable to retrieve your route<br />");
                }
            );
        }
        $(document).ready(function() {

            if (typeof navigator.geolocation == "undefined") {
                $("#error").text("Your browser doesn't support the Geolocation API");
                return;
            }
            $("#from-link, #to-link").click(function(event) {
                event.preventDefault();
                var location_did = this.id.substring(0, this.id.indexOf("-"));
                navigator.geolocation.getCurrentPosition(function(position) {
                        var geocoder = new google.maps.Geocoder();
                        geocoder.geocode({
                                "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
                            },
                            function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK)
                                    $("#" + location_did).val(results[0].formatted_address);
                                else
                                    $("#error").append("Unable to retrieve your address<br />");
                            });
                    },
                    function(positionError) {
                        $("#error").append("Error: " + positionError.message + "<br />");
                    }, {
                        enableHighAccuracy: true,
                        timeout: 10 * 1000 // 10 seconds
                    });
            });
            $("#calculate-route").submit(function(event) {
                event.preventDefault();
                calculateRoute($("#from").val(), $("#to").val());
            });
        });
    </script>
</body>
</html>

I hope you get an idea about javascript get form values on submit.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  jQuery Time Range slider Get Value using JavaScript

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *