Jquery Formular einreichen ohne neu zu laden Seite

Question

Ich bin nicht sehr vertraut mit Jquery. Ich versuche ein Formular zu erstellen, das im Hintergrund gesendet wird, ohne die Seite neu zu laden. Ich habe ein verstecktes div, das auf Klick zeigt und versteckt, innerhalb des div gibt es ein Formular.

Ich habe zwei Probleme:

1) Wenn die Form der Validierung fehlschlägt, wird das Formular noch vorgelegt. Ich habe versucht, Validierungs- und Übermittlungscodes in der Bedingung if(validation == valid) { $.ajax.... } zu setzen, aber es funktioniert nicht richtig.

2) Nachdem das Formular abgeschickt wurde, wird das div automatisch ausgeblendet, so dass keine erfolgreiche Nachricht angezeigt werden kann.

Hier ist der 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 onlcick 
$(document).ready(function(){ 
     $(".slidingDiv").hide(); 
     $(".show_hide").show(); 
    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    }); 
}); 

Answer 1

Anstatt binden an das Click-Ereignis (input[type=submit]) Sie zum submit Ereignis für das Formular binden sollte.

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

Ich bin mir auch nicht sicher über die Validierung. Wenn es asynchron ausgeführt wird, ist ein Rückruf erforderlich. Wenn es synchron läuft, wann wird es ausgelöst? Es scheint, wie es getan werden soll, wenn das Formular abgeschickt wird, es sei denn die Validierung Plugin tut das auf seinem eigenen:

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

e.preventDefault Mit Reload verhindern und sollte Ihrem Erfolg div erlauben anzuzeigen.

Answer 2

1) verwenden Event.preventDefault(); die Form zu halten von einreichen -. http://api.jquery.com/event.preventDefault/

2) gibt es in der gegebenen Skript nichts ist, die #result zu verstecken becausing sollte ... aber Sie können $ (‚# Ergebnis‘) show() versuchen, sehen, ob es bringt

zurück

Answer 3

Bitte überprüfen Sie, welche jquery-Version Sie verwenden, da nach jquery 1.8.2 "Erfolg" -Funktion von jquery Ajax veraltet ist.

Verwenden Sie e.preventDefault(), um das tatsächliche Sendeereignis zu verhindern.