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

Posted

技术标签:

【中文标题】带有单选按钮的 PHP 邮件表单使用 AJAX 发送【英文标题】:PHP mailer form with radio buttons using AJAX to send 【发布时间】:2012-09-14 22:51:19 【问题描述】:

TL; DR 解决方案:javascript 中的 .val 更改为 .serialize 以用于任何无线电输入。

我一直在使用this tutorial 构建一个表单,当提交按钮被按下时,按钮淡出并淡出“谢谢”消息并在后台发送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 = "myemail@domain.com";

$subject = "RSVP";

$mailheader = "RSVP \r\n";

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

?>

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

【问题讨论】:

【参考方案1】:

var rsvps = $(".rsvps").val(); 更改为var rsvps = $(".rsvps[selected=selected]").val();

另外,dataString 必须是像 var dataString = rsvps : rsvps ; 这样的 json 对象,才能通过 ajax POST 访问。

【讨论】:

【参考方案2】:

您不需要 javascript 来获取值以便将它们发送到电子邮件。改用 PHP。

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

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

【讨论】:

【参考方案3】:

试试这个。请参阅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>

【讨论】:

是的!这是按顺序发送所有表单的最佳方式,然后您可以在其他页面上调用任何元素名称..并根据需要显示结果..希望这对您有好处. 这是返回正确的数据,但在页面的 url 中,而不是电子邮件。例如:domain.com/?rsvps=Regretfully_Declines 原来只是将 .val 更改为 .serialize 有效。唯一的小问题是电子邮件中写着RSVP: rsvps=Regretfully_Declines 感谢您的帮助!【参考方案4】:

不要通过类选择器访问单选按钮,请尝试以下操作:

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

【讨论】:

当我这样做时,它只会向我发送第一个单选按钮作为响应,即使已选择了另一个单选按钮。 实际上采用您的 sn-p 并将 .val 更改为 .serialize 工作。唯一的小问题是电子邮件中写着RSVP: rsvps=Regretfully_Declines感谢您的帮助!

以上是关于带有单选按钮的 PHP 邮件表单使用 AJAX 发送的主要内容,如果未能解决你的问题,请参考以下文章

PHP 单选按钮 - 出错后保留表单中的值

jQuery、AJAX 表单处理 - 单选按钮值问题,

通过 AJAX 更新单选按钮更改的表单值

预选单选按钮

单选按钮的预选

如何以在 php 中作为字符串回显的形式填充单选按钮?