Форма почтовой программы 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!");
?>
Большое вам спасибо за любую информацию, которую вы можете предоставить.
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>
Вместо того, чтобы обращаться к переключателю с помощью селектора классов, попробуйте выполнить следующее:
var rsvps = $('input[name=rsvps]:radio').val();
Вам не нужен javascript, чтобы получить значения, чтобы отправить их по электронной почте. Вместо этого используйте PHP.
$formcontent .= $_POST['rsvp'];
Эта строка будет добавлена перед тем, как $получатель должен отправить значение переключателей.
Измените var rsvps = $(".rsvps").val();
на var rsvps = $(".rsvps[selected=selected]").val();
Кроме того, dataString должен быть объектом json, подобным этому var dataString = { rsvps : rsvps };
, чтобы быть доступным через ajax POST.