Ajax-Kontaktformular innerhalb einer Seite HTML5-Design funktioniert nicht

Question

Ich habe eine Webvorlage gekauft, aber es gibt keine Unterstützung nach dem Kauf. Es ist ein einseitiges HTML5-Design. Die Menüschaltflächen sind mit Seitenankern innerhalb der index.html verknüpft (page_ABOUT, page_SERVICES usw.). Die Website ist so konzipiert, dass die verknüpften Seitenanker problemlos zwischen statischen z-indizierten Bildern verschoben werden. Eine funktionierende Demo der Vorlage CAN BE SEEN HERE.

Mein Problem betrifft den Seitenanker about_CONTACTS. Ich habe andere Kontaktseiten auf anderen Seiten, die gut funktionieren, aber das sind PHP-Seiten (d. H. Contact.php). Um innerhalb der Grenzen dieses Entwurfs zu bleiben, muss ich in der Lage sein, die about_CONTACTS-Seitenfunktion innerhalb der einzelnen HTML-Seite zu machen. (. Eine separate PHP Kontakt-Seite erstellen Opting bricht das Dia-Funktion Design und verursacht eine Seite neu geladen) Der Codeblock für die about_CONTACTS Seite Form:

<form id="ajax-contact-form" action="javascript:alert('success!');"> 
<div class="clear"></div> 
<label>Your full name:</label> 
<INPUT class="textbox left " type="text" name="name" value=""> 
<div class="clear"></div> 
<label >E-Mail:</label> 
<INPUT class="textbox left" type="text" name="email" value=""> 
<div class="clear"></div> 
<label >Phone Number:</label> 
<INPUT class="textbox left" type="text" name="phone" value=""> 
<div class="clear"></div> 
<label >Message:</label> 
<TEXTAREA class="textbox left" NAME="content" ROWS="5" COLS="25"></TEXTAREA> 
<div class="clear"></div> 
<label>Captcha:</label> 
<img src="captcha/captcha.php" style="margin:3px 0px; width:100px; height:32px; float:left;"> 
<INPUT class="textbox" type="text" name="capthca" value="" style=" width:90px; float:left; margin-left:10px; margin-top:2px"> 
<div class="clear"></div> 
<INPUT class="pin" type="submit" name="submit" value="submit"> 
</form> 

Der JavaScript zwischen dem Head-Tags ist:

<script type="text/javascript">          
$(document).ready(function() 
{ 
    $("#ajax-contact-form").submit(function() { 
    var str = $(this).serialize();  
    $.ajax({ 
     type: "POST", 
     url: "contact.php", 
     data: str, 
     success: function(msg) 
     { 
     if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form 
     { 
      result = '<div class="notification_ok">Your message has been sent. Thank you!<br> <a href="#" onclick="freset();return false;">send another mail</a></div>'; $("#fields").hide(); 
     } 
     else { 
      result = msg; 
     } 
     $("#note").html(result); 
     } 
    }); 
    return false; 
    }); 
}); 

function freset() 
{ 
    $("#note").html(''); 
    document.getElementById('ajax-contact-form').reset(); 
    $("#fields").show(); 
} 

</script> 

Das Formular ruft contact.php auf, dessen Inhalt CAN BE SEEN HERE ist. Contact.php fordert die Einbindung von contact_config.php (Inhalt der Datei CAN BE SEEN HERE) und functions.php (Inhalt CAN BE SEEN HERE).

Ich legte die beabsichtigte Senden/Empfangen E-Mail-Adresse in contact_config.php:

<?php 
// To 
define("WEBMASTER_EMAIL", 'email@companyname.com'); 
?> 

Wie so:

<?php 
// To 
define("WEBMASTER_EMAIL", 'me@mydomain.com'); 
?> 

bitten Sie raten, warum Taste der Submit reagieren nicht auf einen Klick und Warum wird keine Mail gesendet? Ich habe diese Art von Formular nie zuvor benutzt und obwohl ich sicher bin, dass ich etwas anderes bearbeiten soll, weiß ich nicht, was und wo ich es bearbeiten soll. (Ich habe sehr darauf geachtet, dass Captchas korrekt eingegeben werden. Ich erhalte weder Fehlermeldungen noch Erfolgsmeldungen. Es gibt keine Antwort, wenn ich versuche, eine Nachricht über das Kontaktformular zu senden.)

Answer 1

Gemäß Kommentare, die Lösung entlang der folgenden Zeilen:

a) Ihr Formular-Tag von

<form id="ajax-contact-form" action="javascript:alert('success!');"> 

ändern

zu

<form id="ajax-contact-form" action="contact.php" method="post"> 

Ihre Version ist Ungültig - Die Aktion sollte angeben, wohin das Formular seine Daten sendet, und die Methode ist erforderlich, um ein Postback zu erzwingen (ansonsten wird standardmäßig GET verwendet, mit dem Ihr PHP nicht zu tun hat (Sie lesen $_POST Variablen) .

b) Überprüfen Sie die Werte von $_SESSION['captcha_keystring'] und $_POST["capthca"], um sicherzustellen, dass sie wirklich das enthalten, was Sie zu tun glauben. B.

z.B. (Nur für die Zwecke des Debugging - tun dies für den produktiven Einsatz nicht lassen!):

$error .= "Captcha keystring: ".strtolower($_SESSION['captcha_keystring']); 
$error .= " User-entered captcha: ".strtolower($_POST['capthca']); 

if(isset($_SESSION['captcha_keystring']) && strtolower($_SESSION['captcha_keystring']) != strtolower($_POST['capthca'])) 
{ 
    $error .= "Incorect captcha.<br />"; 
} 

außerdem sicher, dass Ihre HTML captcha Textbox den richtigen Namen Attribut (name="capthca") Ihre PHP $_POST["capthca"] anzupassen.