Форма почтовой программы PHP с переключателями, использующими AJAX для отправки


Решение TL; DR: измените .val в javascript на .сериализовать для любых радиовходов.

Я использовал этот учебник для создания формы, которая при нажатии кнопки "Отправить" исчезает, исчезает в сообщении "спасибо" и отправляет mailer.php на заднем плане. В моей форме есть переключатели, и я, похоже, не могу понять, как заставить javascript отправлять выбранную кнопку на мою электронную почту.

Вот форма 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>

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>

И mailer.php :

<?php 

$rsvps = $_POST['rsvps'];

$formcontent="

RSVP: $rsvps \n";

$recipient = "[email protected]";

$subject = "RSVP";

$mailheader = "RSVP \r\n";

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

?>

Большое вам спасибо за любую информацию, которую вы можете предоставить.

Author: Dan Schwer, 2012-09-23

4 answers

Попробуйте это сделать. Смотрите jQuery.post() для получения дополнительной информации.

<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>
 4
Author: Sam Williams, 2012-09-23 00:58:42

Вместо того, чтобы обращаться к переключателю с помощью селектора классов, попробуйте выполнить следующее:

var rsvps = $('input[name=rsvps]:radio').val();
 1
Author: endyourif, 2012-09-23 00:54:40

Вам не нужен javascript, чтобы получить значения, чтобы отправить их по электронной почте. Вместо этого используйте PHP.

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

Эта строка будет добавлена перед тем, как $получатель должен отправить значение переключателей.

 0
Author: noel, 2012-09-23 01:06:22

Измените var rsvps = $(".rsvps").val(); на var rsvps = $(".rsvps[selected=selected]").val();

Кроме того, dataString должен быть объектом json, подобным этому var dataString = { rsvps : rsvps };, чтобы быть доступным через ajax POST.

 0
Author: Teena Thomas, 2012-09-23 01:27:50