Gönderildikten sonra başarılı bir şekilde HTML formunun değiştirilmesi, form ayrı bir php dosyası kullanarak posta gönderir

İndeks.html'ye yerleştirilmiş bir html iletişim formum var ve bir posta gönderen bir mail.php dosyasına sahibim. JavaScript. Formu doldurup gönderdiğimde, postayı göndermek için kodladım ve sonra bir başarı iletisi kutusuyla açılır ve sonra yeniden index.html'ye yönlendirir.Gönderildikten sonra başarılı bir şekilde HTML formunun değiştirilmesi, form ayrı bir php dosyası kullanarak posta gönderir

Neyi beğenmek, sayfanın yenilenmesini önlemek ve ayrıca açılır ileti kutusundan kaçınmak için formun başarı iletisiyle değiştirilmesidir. içerik.html'ini

formu:

<form action="mail.php" method="POST"> 
    <div class="row uniform"> 
    <div class="6u 12u$(xsmall)"> 
     <input type="text" name="name" id="name" value="" placeholder="Name" /> 
    </div> 
    <div class="6u$ 12u$(xsmall)"> 
     <input type="email" name="email" id="email" value="" placeholder="Email" /> 
    </div> 
    <div class="12u$"> 
     <!--<div class="select-wrapper"> 

     </div>--> 
    </div> 
    <div class="12u$"> 
     <textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea> 
    </div> 
     <center><div class="g-recaptcha" data-sitekey=""></div></center> 
    <div class="12u$"> 
     <ul class="actions"> 
     <li><input type="submit" value="Send Message" class="special" /></li> 
     <li><input type="reset" value="Reset" /></li> 
     </ul> 
    </div> 
    </div> 
</form>

php dosyası, e-posta adresi ve nedenlerle kaldırıldı recaptcha jetonu:

<?php $name = $_POST['name']; 
$email = $_POST['email']; 
$message = $_POST['message']; 
$formcontent = "From: $name \n email: $email \n Message: $message"; 
$recipient = 'email address here'; 
$subject = 'Message from Website'; 
$mailheader = "From: $email \r\n"; 
$captcha; 
{ 
    if(isset($_POST['g-recaptcha-response'])) 
    { 
     $captcha=$_POST['g-recaptcha-response']; 
    } 
    if(!$captcha) 
    { 
     echo '<script language="javascript">'; 
     echo 'alert("Please check the Captcha")'; 
     echo '</script>'; 
     exit; 
    } 
    $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']); 
    if($response.success==false) 
    { 
    echo '<h2>Please do not try and spam here.</h2>'; 
    }else 
    { 
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); 
echo '<script language="javascript">'; 
echo 'alert("Your Message successfully sent, we will get back to you ASAP.");'; 
echo 'window.location.href="index.html";'; 
echo '</script>'; 
    } 
} ?>

Bu aslında baktım bir konudur:

Clear form after submit and success message

kaynak

2015-10-13 Troy

En yolunu eklemek ajax kullanmaktır. Html'nize jquery'yi ekleyin.

<div class="something"> 
<!-- your form here --> 
</div>

yerine size php kodu

olduğunu değiştirmeniz gerekir temel form gönderimini

//"idform" is the id of the form 
$("#idForm").submit(function() { 

    var url = "path/to/your/script.php"; // the script where you handle the form input. 

    $.ajax({ 
      type: "POST", 
      url: url, 
      // serialize your form's elements. 
      data: $("#idForm").serialize(), 
      success: function(data) 
      { 
       // "something" is the class of your form wrapper 
       $('.something').html(data); 
      } 
     }); 
    // avoid to execute the actual submit of the form. 
    return false; 
});

Ve son şey kullanmak yerine, ajax aracılığıyla formu gönder bir sarıcı div içine formu koyun

Yalnızca bir defayabilmek için bir yankı kaldı

echo "Your Message successfully sent, we will get back to you ASAP.";

kaynak

2015-10-13 08:14:22

sadece FYI: 'data.message' undefined olacak,' data 'kendisi bir string olacaktır -' 'Mesajınız başarıyla gönderildi, size en kısa sürede geri döneceğiz. '' – Pogrindis

oops .. biçimlendirilmiş json ... Teşekkürler, cevabımı güncelleyeceğim. –

@SumitPandey Cevabınızı denemekle ilgileniyorum, hunijkah tarafından gönderilen cevabı uygularım ancak hata kontrolü ile ilgili bir hata var, sorunun ne olduğunu görmek için ona bakıyordum ama Ajax’a yeni jQuery. Php dosyamda tüm hata denetimi zaten vardı, bu yüzden php dosyasının hala bunu halledeceğini düşündüm. Cevabınız çözümümü çözecek mi? Bu işe sahip olmak için çok yakınım ancak hata denetimi, kelimenin tam anlamıyla yoldaki tek çarpmadır, eğer form doğru şekilde doldurulursa, mükemmel çalışır. – Troy

Bunu jQ kullanarak yapabilirsiniz Uery ve Ajax formu gönderin.

Öncelikle

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head>

Sonraki, kimliğine sahip bir yerde bir yayılma ekleyin formu = 'hatası'

<span id='error' style='color:red; font-weight:bold;'></span>

bir kimliği

<form id='mail_form' action="mail.php" method="POST">

vermek başınızı elemanda jquery dahil

Mail.php dosyasını aşağıdaki şekilde ayarlayın:

<?php 
$success = true; 
$errors = array(); 

$name = $_POST['name']; 
$email = $_POST['email']; 
$message = $_POST['message']; 
$formcontent = "From: $name \n email: $email \n Message: $message"; 
$recipient = 'email address here'; 
$subject = 'Message from Website'; 
$mailheader = "From: $email \r\n"; 
$captcha = false; 

    if(isset($_POST['g-recaptcha-response'])) 
    { 
     $captcha=$_POST['g-recaptcha-response']; 
    } 
    if(!$captcha) 
    { 
     $success = false; 
     array_push($errors, "Please check the captcha"); 
    } 
    $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']); 
    if($response.success==false) 
    { 
    $success = false; 
    array_push($errors, "Please do not try and spam here."); 

    } 

if ($success) 
{ 
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); 
} 

$output_array = array("success" => $success, "errors" => $errors); 
echo json_encode($output_array); 
?>

Ardından, sayfanın alt kısmında tüm eşyalarını yapmak

<script> 
$('#mail_form').on('submit', function(){ 
    var dataIn = $(this).serialize(); //serialize turns the form data into a string that can be passed to mail.php. Try doing alert(dataIn); to see what it holds. 
    $.post("./mail.php", dataIn) 
     .done(function(dataOut) 
     { 
     //dataOut holds the response from mail.php. The response would be any html mail.php outputs. I typically echo out json encoded arrays as responses that you can parse here in the jQuery. 
     var myArray = JSON.parse(dataOut); 
     if (myArray['success'] == true) //Check if it was successfull. 
      { 
      $("#mail_form").html("Congrats! We just e-mailed you!"); 
      } 
     else //there were errors 
      { 
      $('#error').html(""); //Clear error span 

      $.each(myArray['errors'], function(i){ 
      $('#error').append(myArray['errors'][i] + "<br>"); 
      } 
     }); 
return false; //Make sure you do this or it will submit the form and redirect 
}); 
</script>

kaynak

2015-10-13 08:10:38 hunijkah

Çözümünüzü kullandım ve işe yarıyor. Ancak, hata kontrolümün hiçbiri artık çalışmıyor, yani e-postaları doldurmadan veya recaptcha'yu işaretlemeden sadece bir isim ve bir mesaj yazarım ve hala bir başarı mesajı ile geliyor, hala aynı şeyi aldığımdan emin olmak için ne yapmalıyım? php dosyamda alıştığımı kontrol etme hatası mı? – Troy

@Troy, "başarı" olarak değiştirilir ve sunucu yanıtına göre buna göre çıktı alabileceğiniz bir '.fail 'ekleyin. http://api.jquery.com/jquery.ajax/ – Pogrindis

@Troy Yanıtı, JSON dizileri – hunijkah

Her şeyden önce formu göndermek için AJAX çağrısını kullanmalısınız. Eğer şu şekilde görünecektir saf JS komut dosyası kullanmakta ısrar ederse (5 saniye içinde yazılı - muhtemelen bazı ayarlama yapılması gerekiyormuş): zaten gösterilir olmaz gibi php dosyasından tüm yankılanırken kaldırmak zorunda Daha

<script> 

document.forms['yourForm'].onsubmit = function(form) { // you have to add 'name' attribute to the form and replace 'yourForm' with it 
    var data = ... //here you have to get all the values from form elements and store them in data object. to make less changes to the script use the elements' names as object names 
    if (window.XMLHttpRequest) 
    { 
     var xhReq = new XMLHttpRequest(); 
    } 
    else 
    { 
     var xhReq = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 


    var method= 'POST') 
    var async = false; //you can actually set true here, it doesn't matter much in this case 
    var url = 'mail.php'; 
    xhReq.open(method, url, async); 
    xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
    xhReq.send(data); 



    document.getElementById("form's parent's ID goes here").innerHTML = "new content" 


    return false; 
} 
</script>

. Ayrıca, bu betiğe biraz daha fazla özellik ekleyebilirsiniz. Posta işlevinin doğru çalıştığını (php dosyasında bir şey döndürerek ve JS'deki AJAX yanıtını kontrol ederek) veya captcha hatalarını yakalayıp yakalamadığını kontrol edin.Bu yolda gitmek istiyorsanız, jQuery'de elde etmek de çok daha kolay olacaktır.

kaynak

2015-10-13 08:28:51 kacper3w

artı 1 yerel xhr için. – Pogrindis

Gönderildikten sonra başarılı bir şekilde HTML formunun değiştirilmesi, form ayrı bir php dosyası kullanarak posta gönderir

cevap

İlgili konular