Formulario de correo de PHP con botones de radio que usa AJAX para enviar

TL; Solución DR: cambie .val en javascript para .serializar para cualquier entrada de radio.Formulario de correo de PHP con botones de radio que usa AJAX para enviar

He estado usando this tutorial para crear un formulario que, cuando se presiona el botón Enviar, desaparece el botón y se desvanece en un mensaje de "gracias" y envía el archivo mailer.php en segundo plano. Mi formulario tiene botones de opción y no puedo entender cómo obtener el javascript para enviar el botón que se seleccionó a través de mi correo electrónico.

Aquí está el formulario 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>

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

Y el 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!"); 

?>

Muchas gracias por cualquier idea que puede proporcionar.

Fuente

2012-09-23 Dan Schwer

seguirlo. Vea jQuery.post() para más información.

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

Fuente

2012-09-23 00:58:42

¡Sí !, esta es la mejor manera de enviar todo el formulario en orden y luego llamar al nombre de cualquier elemento en otra página ... y mostrar el resultado como desees ... espero que esto funcione bien para ti. – Rafee

Esto devuelve los datos correctos, pero en la URL de la página, no un correo electrónico. E.G: domain.com/?rsvps=Regretfully_Declines –

Resulta que el cambio de .val a .serialize funcionó. El único pequeño problema es que en el correo electrónico dice 'RSVP: rsvps = Regretfully_Declines' ¡Gracias por su ayuda! –

En lugar de acceder al botón de radio a través de un selector de clase, pruebe lo siguiente:

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

Fuente

2012-09-23 00:54:40 endyourif

Cuando lo hago, simplemente me envía el primer botón de radio como respuesta, aunque se haya seleccionado otra radio. –

En realidad, tomar su fragmento y cambiar .val para .serializar funcionó. El único pequeño problema es que en el correo electrónico dice 'RSVP: rsvps = Regretfully_Declines' ¡Gracias por su ayuda! –

No necesita javascript para obtener los valores para poder enviarlos al correo electrónico. Use PHP en su lugar.

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

Esa línea se agregará antes de $ destinatario debe enviar el valor de los botones de opción.

Fuente

2012-09-23 01:06:22 noel

cambio var rsvps = $(".rsvps").val(); a var rsvps = $(".rsvps[selected=selected]").val();

Además, dataString tiene que ser un objeto JSON como esto var dataString = { rsvps : rsvps }; sea accesible a través ajax POST.

Fuente

2012-09-23 01:27:50

Vuelve como "indefinido" ... –

Formulario de correo de PHP con botones de radio que usa AJAX para enviar

Respuesta

Cuestiones relacionadas