CODEWITHSUNDEEP
javascriptformsjquery-validateform-submit
m.rufca
m.rufca

Reputation: 2678

Submit without redirection

I want to submit a form without redirect/refresh a page but using jquery.validate. I try to do something like 

$("#myForm").validate({
    errorLabelContainer: "#errorContainer",
    wrapper: "div",
    submitHandler: function (form) {
        form.submit(function () {
            return false;
        });
        $('#form-container').fadeOut(function () {
            $('#afterSubmit').fadeIn()
        });
        return false;
    }
});

I tryed changing form.submit to 

form.ajaxSubmit(function () { return false; });

Or

form.submit(function () {
    var options = {};
    $(this).ajaxSubmit(options);
    return false;
});

And many other variations.

When I just do the following code the form isn't submited.

submitHandler: function (form) {
        return false;
}

What should I do to submit my form after validating and not being redirect?

Upvotes: 0

Views: 4567

Answers (3)

Tharaka Wijebandara
Tharaka Wijebandara

Reputation: 8065

This is how you should do it. Please find working example here http://jsfiddle.net/rQu9W/
and make sure to add jquery.min.js, jquery.validate.js, jquery.form.js as in my jsFiddle example

$(function(){
  $("#myForm").validate({

    submitHandler: function(form) {
      $(form).ajaxSubmit({
        clearForm: true,//To clear form after ajax submitting
        success: function(){alert('done');}
      });
      return false;
    },

    invalidHandler: function(form) {
      alert('error');
    }

  });  
});

Upvotes: 1

Tharaka Wijebandara
Tharaka Wijebandara

Reputation: 8065

If you need to submit form without reloading page you have to use ajax submitting. Yes, for that you need to change form.submit to form.ajaxSubmit. But you need to include jQuery Form Plugin in addition to validation plugin. You can find more details about ajaxSubmit function of jQuery Form Plugin here. http://jquery.malsup.com/form/#api

Upvotes: 0

James
James

Reputation: 3805

Here is what I use to make an ajax call:

var sendData = "action=do_action";
sendData += "&value=" + $("input.value").val();

$.ajax({
    url: "post.php",//Page to send our data to
    global: false,
    type: "POST",
    data: sendData,
    dataType: "html",
    async:false,
    success: function(data){
        //We could return JSON and then just parse that, but I usually just return values like this

        //create jquery object from the response html
        var $response=$(data);

        var results = $response.filter('div.results').text();//Or .html() if we want to return HTML to show                     

        if (results == "true") {
            alert("it works");
        }else{
            var reason= $response.filter('div.reason').text();
            alert(reason);
        }
    }
});

And the PHP would look like:

<?php
    $action = $_POST['action'];

    if ($action == "do_action") {
        if (true) {
            echo "<div class='result'>true</div>";
        }else{
            echo "<div class='result'>false</div>";
            echo "<div class='reason'>Houston, we have a problem!</div>";
        }
    }
?>

Upvotes: 0

Related Questions