2016-08-17 4 views
1

Ich möchte PHP-Datei über Ajax ausführen, aber es postet einfach wie normal über Formular und lädt eine neue Seite. Ich habe hier eine Menge Code überprüft und immer noch nicht durch submitHandler und ajax ausgeführt. Ich habe Host Provider überprüft und Ajax wird unterstützt und ich habe andere Tests mit Jquery gemacht und es funktioniert gut. Kann einfach nicht funktionieren, wie es sollte. Die PHP-Datei wird perfectly ausgeführt und fügt Daten in die Datenbank ein, so dass ich denke, dass mir etwas mit dem Validierungscode fehlt.Ajax submitHandler nicht ausgeführt

$("#emailForm").validate({ 
 

 
    submitHandler: function(form) { 
 
//  event.preventDefault(); 
 
    $.ajax({ 
 
     url: $(form).attr("action"), 
 
     type: $(form).attr("method"), 
 
     data: $(form).serialize(), 
 
     success: function(response) { 
 
     document.getElementById("fee").style.display = "block"; 
 
     } 
 
    }); 
 
    return false; 
 
    } 
 
});
#fee { 
 
    display: none; 
 
}
<html> 
 

 
<head> 
 

 
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script> 
 
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div class="screen"> 
 

 
    <div class="contents"> 
 
     <form class="cmxform" id="emailForm" method="post" action="process.php"> 
 
     <fieldset> 
 
      <legend>Sign up now and secure your username! 
 
      </legend> 
 
      <p> 
 
      <label for="cname">Username (required, at least 5 characters) 
 
      </label> 
 
      <input id="cname" name="name" minlength="5" type="text" required> 
 
      </p> 
 
      <p> 
 
      <label for="cpassword">Password (required, at least 8 characters) 
 
      </label> 
 
      <input id="cpassword" name="password" minlength="8" type="password" required> 
 
      </p> 
 
      <p> 
 
      <label for="cemail">Email (required) 
 
      </label> 
 
      <input id="cemail" type="email" name="email" required> 
 
      </p> 
 
      <p> 
 
      </p> 
 
      <p> 
 
      <input class="submit" type="submit" value="Submit"> 
 
      </p> 
 
     </fieldset> 
 
     </form> 
 
     <div id='fee'>Signup Complete! 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

1) Sind Sie sicher, auf alle Ihre Javascript ausgeführt wird? 2) Haben Sie die Konsole auf Fehler überprüft? 3) Ich sehe nicht, wo Sie die Übermittlung des Formulars verhindern ('e.preventDefault()') –

+0

ohhh! Ich muss Standard verhindern? Ich werde es googeln :) – drume

+0

@JasonP Ich habe mein Javascript aktualisiert, aber es lädt immer noch in neue Seite, verwende ich preventDefault richtig? – drume

Antwort

1

mit Versuchen, weil Objekt mit Form bin ich nicht sicher, ob sein ist Gegenstand Javascript DOM-Objekt ot jQuery so dass ich konvertiere Objekt Objekt in jQuery und verwenden attr() -Methode.

$(document).ready(function() { 
 
$("#emailForm").validate({ 
 

 
    submitHandler: function(form) { 
 
    $.ajax({ 
 
     url: $(form).attr("action"), 
 
     type: $(form).attr("method"), 
 
     data: $(form).serialize(), 
 
     success: function(response) { 
 
     document.getElementById("fee").style.display = "block"; 
 
     } 
 
    }); 
 
    return false; 
 
    } 
 
}); 
 
});

+0

Ich habe die Antwort für meinen Tippfehler aktualisiert. –

+0

das lädt auch den php in eine neue Seite, danke aber! – drume

+0

haben Sie mit meiner aktualisierten Antwort überprüft? –

Verwandte Themen