Forum PHP.pl > Prosty formularz

Pomoc - Szukaj - Użytkownicy - Kalendarz

Moodey

31.08.2012, 19:11:10

Witam!

Napisałem prosty skrypt formularza i chciałbym go wzbogacić efektami po stronie klienta. Po wykonaniu tego kodu funkcja "success: function(data)" nie działa... tzn plik php wykonuje się osobno i wynik zwraca na nowej czystej stronie, a mail dociera w formie takiej w jakiej dotrzeć powinien. Wyświetlenie diva wiadomości o poprawnym wysłaniu po prostu nie działa, a strona jak za starych dobrych lat chce wyświetlać w nowym oknie wiadomość o wysłaniu.

Sprawdzałem przeróżne formy zakończenia formularza ale nie mam pojęcia co dalej moge zrobić...

Pomocy!

))

[PHP] pobierz, plaintext 
<?php
 
 
$Name        = $_POST['name'];
$SenderEmail = $_POST['email'];
$SenderPhone = $_POST['phone'];
$MailContent = $_POST['message'];
$TargetEmail = "mail@mail.pl";
 
 
$headers  = "MIME-Version: 1.0" . "\r\n";
$headers = 'Content-type: text/html; charset=utf-8' . "\r\n";
$Od = "=?UTF-8?Q?".$Name."?="; 
$headers .= "From:  " . $Od . " <" . $SenderEmail . ">\r\n";
 
$MailMessage = '
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
  <title>Wiadomość z formularza na stronie storkart.pl</title>
  <style type="text/css">
  p {
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 12px;
	}
 
  </style>
</head>
<body>
<p><img src="" alt="" /></p><br /><br />
<hr><br /><br />
<p>'. $MailContent .'</p><br /><br />
<p><b>Wiadomość od:</b> '.$Name.'<br />
 <b>Adres zwrotny:</b> '.$SenderEmail.'<br />
 <b>Telefon zwrotny:</b> '.$SenderPhone.'</p>
 
 
</body>
</html>';
 
// wysyłamy wiadomość e-mail
 
if( @mail( $TargetEmail, "Wiadomość z formularza na stronie mail.pl", $MailMessage, $headers ) ) {
$content = 1;
}
else 
{
$content = 0;
}
 
// i tutaj w klauzuli success w funkcji $.ajax() powinno pójść info o poprawnym wykonaniu kodu...
 
echo $content;
?>
[PHP] pobierz, plaintext

skrypt front-end

[PHP] pobierz, plaintext 
 
//form
 
var inputs = new Array();
 
inputs["name"] = "imię, nazwisko";
inputs["email"] = "e-mail";
inputs["phone"] = "numer telefonu";
inputs["message"] = "treść wiadomości";
 
    $("#name,#email,#phone,#message").focus(function()
    {
        if(
		$(this).val()==inputs[$(this).attr("id")])
            $(this).val("");
    }).blur(function()
    {
       if($(this).val()=="")
          $(this).val(inputs[$(this).attr("id")]); 
    });
 
    $("#submit").click(function()
    {
       name = $("#name").val();
       email = $("#email").val();
       phone = $("#phone").val();
       message = $("#message").val();
       var mail_match =/^[^@]+@[^@]+.[a-z]{2,}$/;
 
       if((email.search(mail_match) == -1))
       {
           alert("Proszę podać poprawny adres e-mail");
           return false;
       }
       else
       {
          $(".ajax_loader").slideDown();
          $.ajax({
            url: "/send.php",
            type: "POST",
			dataType:"json",
            data:
            {
				name: name,
                email: email,
                phone: phone,
                message: message
            },
            success: function(data)
            {
                if(data == 1)
                {
					alert('poszło!');
                   // $(".contact_ajax_result").slideDown();
                }
                else
                {
                    alert("Wstąpił błąd podczas wysyłania wiadomośc. Proszę spróbować ponownie.");
                }
            }
 
          });
          $(".ajax_loader").slideUp();
       }
    });
 
 
//end form
 
[PHP] pobierz, plaintext

no i formularzyk pomijając css'y:

[HTML] pobierz, plaintext 
            <form action="send.php" method="post" class="foot-form">
            	<fieldset>
 
                	<div>
                    	<input name="name" id="name" type="text" value="imię, nazwisko" />
                    </div>
                    <div>
                    	<input name="email" id="email" type="text" value="e-mail" />
                    </div>
					<div>
						<input name="phone" id="phone" type="text" value="numer telefonu" />
                    </div>
                    <div>
                    	<textarea name="message" id="message" cols="5" rows="5" >treść wiadomości</textarea>
                    </div>
                    <div>
                    <input type="image" name="submit" id="submit" src="images/wyslijbtn.png" alt="Wyślij" />
                    </div> 
                </fieldset>
            </form>
[HTML] pobierz, plaintext

SmokAnalog

1.09.2012, 12:53:14

Hej! Podstawowy błąd jaki tutaj masz to związanie wysyłania formularza z click() na przycisku submit. To zdarzenie działa, ale mimo to formularz się przeładuje. To, co Cię interesuje to zdarzenie submit() wywoływane NA FORMULARZU. Rzuć okiem na submit() - http://api.jquery.com/submit/

Pamiętaj, by zakończyć działanie funkcji wewnątrz submit() instrukcją:

[JAVASCRIPT] pobierz, plaintext 
return false;
[JAVASCRIPT] pobierz, plaintext

W przeciwnym wypadku działanie będzie podobne jak w Twoim skrypcie, tzn. funkcja się wykona, ale po tym formularz się przeładuje.

Pochwalam fakt, że robisz dwie warstwy na formularzu - JS dla gładszego User Experience oraz PHP jako zabezpieczenie / metodę dla użytkowników z wyłączonym JS.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.