admin管理员组文章数量:1026989
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 = "[email protected]";
$subject = "RSVP";
$mailheader = "RSVP \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
?>
Thank you so much for any insight you can provide.
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 = "[email protected]";
$subject = "RSVP";
$mailheader = "RSVP \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
?>
Thank you so much for any insight you can provide.
Share Improve this question edited Sep 23, 2012 at 8:15 Dan Schwer asked Sep 23, 2012 at 0:25 Dan SchwerDan Schwer 535 bronze badges4 Answers
Reset to default 4Give 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>
Rather than accessing the radio button via a class selector, try the following:
var rsvps = $('input[name=rsvps]:radio').val();
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.
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.
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 = "[email protected]";
$subject = "RSVP";
$mailheader = "RSVP \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
?>
Thank you so much for any insight you can provide.
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 = "[email protected]";
$subject = "RSVP";
$mailheader = "RSVP \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
?>
Thank you so much for any insight you can provide.
Share Improve this question edited Sep 23, 2012 at 8:15 Dan Schwer asked Sep 23, 2012 at 0:25 Dan SchwerDan Schwer 535 bronze badges4 Answers
Reset to default 4Give 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>
Rather than accessing the radio button via a class selector, try the following:
var rsvps = $('input[name=rsvps]:radio').val();
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.
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.
本文标签: javascriptPHP mailer form with radio buttons using AJAX to sendStack Overflow
版权声明:本文标题:javascript - PHP mailer form with radio buttons using AJAX to send - Stack Overflow 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://it.en369.cn/questions/1745608203a2158848.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论