Biểu mẫu gửi thư PHP có nút radio sử dụng AJAX để gửi

Question

TL; Giải pháp DR: thay đổi .val trong javascript thành .serialize cho bất kỳ đầu vào radio nào.

Tôi đã sử dụng this tutorial để tạo biểu mẫu, khi nút gửi được nhấn, làm mờ nút và mờ dần trong thông báo "cảm ơn" và gửi mailer.php trong nền. Biểu mẫu của tôi có các nút radio và tôi dường như không thể tìm ra cách để javascript gửi nút nào được chọn qua email của tôi.

Dưới đây là hình thức html:

<form action="" method="" name="rsvp" id="rsvp-form"> 
<fieldset> 
       <legend>RSVP</legend> 

        <ol> 
         <li> 
          <input id="accepts1" class="rsvps" name="rsvps" type="radio" value="Graciously_Accepts" /> 
          <label for="accepts1">Graciously Accepts</label> 
         </li> 
         <li> 
          <input id="declines1" class="rsvps" name="rsvps" type="radio" value="Regretfully_Declines" /> 
          <label for="declines1">Regretfully Declines</label> 
         </li> 
         <li> 
          <input id="accepts2" class="rsvps" name="rsvps" type="radio" value="Regretfully_Accepts" /> 
          <label for="accepts2">Regretfully Accepts</label> 
         </li> 
         <li> 
          <input id="declines2" class="rsvps" name="rsvps" type="radio" value="Graciously_Declines" /> 
          <label for="declines2">Graciously Declines</label> 
         </li> 
        </ol> 
      </fieldset> 
<div id="rsvp-wrapper"> 
    <fieldset> 
    <button class="button" type="submit" value="send">RSVP!</button> 
</fieldset> 

</form> 
<div class="success"></div> 
</div> 

Các javascript:

<script type="text/javascript"> 

$(function() { 

$(".button").click(function() { 

var rsvps = $(".rsvps").val(); 

var dataString = 'rsvps=' + rsvps; 

    $.ajax({ 
     type: "POST", 
     url: "rsvp-mailer.php", 
     data: dataString, 
     success: function() { 
     $('#rsvp-wrapper').html("<div class='success'></div>"); 
     $('.success').html("<p class='italic'>Thanks!</p>") 
     .hide() 
     .fadeIn(500, function() { 
      $('.success'); 
     }); 
     } 
    }); 
    return false; 
}); 
}); 

</script> 

Và mailer.php:

<?php 

$rsvps = $_POST['rsvps']; 

$formcontent=" 

RSVP: $rsvps \n"; 

$recipient = "myemail@domain.com"; 

$subject = "RSVP"; 

$mailheader = "RSVP \r\n"; 

mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); 

?> 

Cảm ơn bạn rất nhiều cho bất kỳ cái nhìn sâu sắc, bạn có thể cung cấp.

Answer 1

này cung cấp cho một thử. Xem jQuery.post() để biết thêm thông tin.

<script type="text/javascript"> 
    $('form').submit(function() { 
     var data = $(this).serialize(); 

     $.post("rsvp-mailer.php", data, function() { 
      $('#rsvp-wrapper').html("<div class='success'></div>"); 
      $('.success').html("<p class='italic'>Thanks!</p>") 
      .hide() 
      .fadeIn(500, function() { 
       $('.success'); 
      }); 
     } 

    return false; 
    } 
</script> 

Answer 2

Thay vì truy cập vào nút radio qua một chọn lớp, hãy thử như sau:

var rsvps = $('input[name=rsvps]:radio').val(); 

Answer 3

Bạn không cần javascript để nhận các giá trị để chúng được gửi đến email. Sử dụng PHP để thay thế.

$formcontent .= $_POST['rsvp']; 

Dòng đó sẽ được thêm trước khi $ người nhận phải gửi giá trị của các nút radio.

Answer 4

thay đổi var rsvps = $(".rsvps").val();-var rsvps = $(".rsvps[selected=selected]").val();

Ngoài ra, dataString cần phải là một đối tượng JSON như var dataString = { rsvps : rsvps }; này để có thể truy cập thông qua ajax POST.