CODEWITHSUNDEEP
jqueryajax
user2234992
user2234992

Reputation: 575

calling ajax on button click

I have a simple html button.

When I click it, the ajax is called.

This is my code. 

 <INPUT type="button" class="form6form" id="newsubmit" name="newsubmit" value="Submit">

And here is the ajax full code.

I want the ajax to validate my code and then use success handler

 $('body').on('click', '#newsubmit', function (event) {

    $("#form6").validate({
        debug: false,
        rules: {
            plnonew: "required",
            pldtnew: "required",
            noboxnew: "required",
        },
        messages: {

            plnonew: "Please select a pack list id..",
            pldtnew: "Please select a date..",
            noboxnew: "Please select a box no..",
        },
        submitHandler: function (form) {
            $.ajax({
                type: "POST",
                url: "try.php",
                data: $('#form6').serialize(),
                cache: false,

                success: function (html) {

                    var div1 = $(html).filter('#div1');

                    loading_hide();
                    $("#container").html(div1);
                }
            });
        }
    });

});

Nothing happens when i click the button.

Any idea? Thank you.

Upvotes: 0

Views: 38560

Answers (2)

Mayur Baldha
Mayur Baldha

Reputation: 126

At html code client Side index.html file

<!doctype html>
<html>
    <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>

    function myCall() {
        var request = $.ajax({
            url: "ajax.php",
            type: "GET",            
            dataType: "html"
        });

        request.done(function(msg) {
            $("#mybox").html(msg);          
        });

        request.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });
    }
</script>
        <meta charset="utf-8" />
        <title>My jQuery Ajax test</title>
        <style type="text/css">
            #mybox {
                width: 300px;
                height: 250px;
                border: 1px solid #999;
            }
        </style>
    </head>
    <body>
        The following div will be updated after the call:<br />
        <div id="mybox">

        </div>
        <input type="button" value="Update" />

    </body>
</html>

At server side ajax.php file

<?php
echo '<p>Hi I am some random ' . rand() .' output from the server.</p>';

?>

Upvotes: 4

adeneo
adeneo

Reputation: 318182

The submitHandler in the validate plugin replaces the native submit, an input with the type button will not submit the form and trigger the sumbitHandler, so change this:

<INPUT type="button" class="form6form" id="newsubmit" name="newsubmit" value="Submit">

to:

<input type="submit" class="form6form" id="newsubmit" name="newsubmit" value="Submit">

And initialize the validation outside the click handler.

Upvotes: 2

Related Questions