11

I'm not very familiar with jQuery. I'm trying to make a form that is submitted in the background without reloading page.

I have a hidden div which shows and hides on click, inside the div there's a form.

I have two problems:

1) When the form validation fails, the form is still submitted. I tried to put validation and submission codes in condition if(validation == valid) { $.ajax.... } but it does not work properly.

2) After the form is submitted the div automatically hides, so successful message cannot be seen.

Here's the code:

$().ready(function() { 

    // Validate the form when it is submitted, using validation plugin.
    var validator = $("#contactform").validate({
        errorContainer: container,
        errorLabelContainer: $(),
    onkeyup: false,
    onclick: false,
    onfocusout: false,
    errorPlacement: function (error, element) { 
error.insertBefore(element);    
}   
    });
});

$(function() {

    //This submits a form
$('input[type=submit]').click(function() {
        $.ajax({
            type: "POST",
            url: "contact.php",
            data: $("#contactform").serialize(),
            beforeSend: function() {
                $('#result').html('<img src="loading.gif" />');
            },
            success: function(data) {
                $('#result').html(data);
            }

        })
    })
})


//This shows and hides div onclick
$(document).ready(function(){   
        $(".slidingDiv").hide(); 
        $(".show_hide").show(); 
    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    });
});
Seth McClaine
  • 9,142
  • 6
  • 38
  • 64
qwaz
  • 1,285
  • 4
  • 23
  • 47

3 Answers3

26

Rather than bind to the click event (input[type=submit]) you should bind to the submit event for the form.

$("form").on("submit", function (e) {
    e.preventDefault();

I'm also not sure about the validation. If it runs asynchronously, a callback is required. If it runs synchronously, when does it get triggered? It seems like it should be done when the form is submitted unless your validation plugin does that on its own:

$("form").on("submit", function (e) {
    e.preventDefault();
    if ($(this).validate(options)) {
        $.ajax

Using e.preventDefault will prevent reload and should allow your success div to display.

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • Thank you, e.preventDefault did the trick for submitting and success div. – qwaz Oct 07 '13 at 20:27
  • i want to prevent refreshing after submitting the form..this code is not working properly – Rahat Islam Khan Mar 01 '14 at 10:03
  • This worked for me locally. But when I uploaded to my hosted server, the .on("submit", ..) call was throwing an undefined error.. no idea why , because I would think I have the same version of jQuery wherever my code is deployed?! I found an alternative to update the line to be like this: $("form").submit(function(e){..}); .. which then worked fine – Gene Bo Jan 30 '15 at 22:48
2

Please check which jQuery version you are using because in after jQuery 1.8.2 "success" function from jQuery Ajax is deprecated.

Use e.preventDefault() to prevent actual submit event.

Seth McClaine
  • 9,142
  • 6
  • 38
  • 64
Jay Patel
  • 5,783
  • 1
  • 17
  • 20
1

1) Use event.preventDefault(); to keep the form from submitting -http://api.jquery.com/event.preventDefault/

2) There isn't anything in the given script that should be causing #result to hide, but you can try $('#result').show() and see if that brings it back

Seth McClaine
  • 9,142
  • 6
  • 38
  • 64