使用AJAX发送带有单选按钮的PHP mailer表单

TL；灾难恢复解决方案：将javascript中的.val更改为.serialize，用于任何无线电输入

我一直在使用它来构建一个表单，当按下submit按钮时，它会淡出按钮，淡出一条“谢谢”消息，并在后台发送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>

$（函数（）{
$（“.button”）。单击（函数（）{
var rsvps=$（“.rsvps”）.val（）；
var dataString='rsvps='+rsvps；
$.ajax（{
类型：“POST”，
url:“rsvp mailer.php”，
数据：dataString，
成功：函数（）{
$（'#rsvp wrapper'）.html（“”）；
$（'.success'）.html（
谢谢！
）
.hide（）
.fadeIn（500，函数（）{
$（'成功'）；
});  
}  
});  
返回false；
});  
});  

以及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!");

?>

---

非常感谢您提供的任何见解。

与其通过类选择器访问单选按钮，不如尝试以下操作：

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

试试这个。有关更多信息，请参阅

<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>

$（'form'）。提交（函数（）{
var data=$（this.serialize（）；
$.post（“rsvp mailer.php”，数据，函数（）{
$（'#rsvp wrapper'）.html（“”）；
$（'.success'）.html（
谢谢！
）
.hide（）
.fadeIn（500，函数（）{
$（'成功'）；
});  
}
返回false；
}

您不需要使用javascript来获取发送到电子邮件的值，而是使用PHP

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

该行将添加在$recipient应发送单选按钮的值之前。

将

var rsvps=$（“.rsvps”）.val（）；

更改为

var rsvps=$（“.rsvps[selected=selected]”.val（）；

---

此外，dataString需要是这样的json对象

var-dataString={rsvps:rsvps}；

可通过ajax POST访问。

是的！这是按顺序发送所有表单的最佳方式，稍后您可以调用其他页面上的任何元素名称..并在您呼啸时显示结果..希望这对您有好处。这将返回正确的数据，但在页面的url中，而不是电子邮件中。例如：domain.com/？rsvps=遗憾地\u DeclinesTurns我们只是将.val改为.serialize就行了。唯一的小问题是，在电子邮件中，它说

RSVP:rsvps=遗憾地拒绝

感谢您的帮助！当我这样做时，它只会发送第一个单选按钮作为响应，即使选择了另一个单选按钮。实际上，将您的代码片段改为.val.serialize就行了。唯一的一个小问题是，在电子邮件中它说，

RSVP:rsvps=遗憾地拒绝

感谢您的帮助！