PHP mailer form with radio buttons using AJAX to send

Question

TL; DR Solution: change .val in the javascript to .serialize for any radio inputs.

I've been using this tutorial to build a form that, when the submit button is pressed, fades out the button and fades in a "thanks" message and sends the mailer.php in the background. My form has radio buttons and I cannot seem to figure out how to get the javascript to send which button was selected through to my email.

Here's the form 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>

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

And the 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!");

?>

Thank you so much for any insight you can provide.

score 4 · Accepted Answer · answered Sep 23 '12 at 00:58

4

Give this a try. See jQuery.post() for more info.

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

answered Sep 23 '12 at 00:58

Sam Williams

743
1
6
15

Yes!, this is the best way to send all the form in order and later you call any element name on other page.. and display the result as you whish.. hope this works good for you. – Rafee Sep 23 '12 at 01:02
This is returning the correct data, but in the url of the page, not an email. E.G: domain.com/?rsvps=Regretfully_Declines – Dan Schwer Sep 23 '12 at 07:26
Turns out just changing .val to .serialize worked. The only small issue is that in the email it says `RSVP: rsvps=Regretfully_Declines` Thanks for your help! – Dan Schwer Sep 23 '12 at 08:14

score 1 · Answer 2 · answered Sep 23 '12 at 00:54

1

Rather than accessing the radio button via a class selector, try the following:

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

answered Sep 23 '12 at 00:54

endyourif

2,186
19
33

When I do that it just sends me the first radio button as a response, even though another radio has been selected. – Dan Schwer Sep 23 '12 at 07:28
Actually taking your snippet and changing .val to .serialize worked. The only small issue is that in the email it says `RSVP: rsvps=Regretfully_Declines` Thanks for your help! – Dan Schwer Sep 23 '12 at 08:13

score 0 · Answer 3 · answered Sep 23 '12 at 01:06

0

You don't need javascript to get the values in order for them to be sent to the email. Use PHP instead.

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

That line will added before $recipient should send the value of the radio buttons.

answered Sep 23 '12 at 01:06

noel

2,257
3
24
39

score 0 · Answer 4 · answered Sep 23 '12 at 01:27

0

change var rsvps = $(".rsvps").val(); to var rsvps = $(".rsvps[selected=selected]").val();

Also, dataString needs to be a json object like this var dataString = { rsvps : rsvps }; to be accessible via ajax POST.

answered Sep 23 '12 at 01:27

Teena Thomas

5,139
1
13
17

PHP mailer form with radio buttons using AJAX to send

4 Answers4