2012-09-23 11 views
5

TL; Rozwiązanie DR: zmienić .val w javascript dla .serialize dla jakichkolwiek wejść radiowych.Formularz PHP mailer z przyciskami radiowymi za pomocą AJAX do wysyłania

Użyłem this tutorial do zbudowania formularza, który po naciśnięciu przycisku "Wyślij" powoduje zanikanie przycisku i zanika w wiadomości "dziękuję" i wysyła plik mailer.php w tle. Moja forma ma przyciski radiowe i nie mogę się domyślić, jak uzyskać javascript do wysłania którego przycisku został wybrany do mojego e-maila.

Oto html forma:

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

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

?> 

Dziękuję bardzo za wszelkie wglądu można dostarczyć.

Odpowiedz

4

spróbuj tego. Aby uzyskać więcej informacji, patrz 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> 
+0

Tak !, jest to najlepszy sposób na przesłanie wszystkich formularzy w kolejności, a następnie wywołanie dowolnej nazwy elementu na innej stronie .. i wyświetl wynik, jak chcesz .. mam nadzieję, że to działa dobrze dla ciebie. – Rafee

+0

Powoduje to zwrócenie poprawnych danych, ale w adresie URL strony, a nie e-maila. E.G: domain.com/?rsvps=Regretfully_Declines –

+0

Okazuje się, że właśnie zmienia się .val na .serialize działało. Jedynym małym problemem jest to, że w wiadomości e-mail jest napisane: RSVP: rsvps = Regretfully_Declines' Dzięki za pomoc! –

1

Zamiast dostępu do przycisku radiowego poprzez selektor klasy, spróbuj wykonać następujące czynności:

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

Kiedy to robię, po prostu przesyła mi pierwszy przycisk radiowy, mimo że wybrano inne radio. –

+0

Właściwie wykonanie fragmentu i zmiana .val na .serialize działały. Jedynym małym problemem jest to, że w wiadomości e-mail jest napisane: RSVP: rsvps = Regretfully_Declines' Dzięki za pomoc! –

0

Nie potrzebujesz javascript, aby uzyskać wartości, aby mogły zostać wysłane na adres e-mail. Zamiast tego użyj PHP.

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

Linia zostanie dodana, zanim $ odbiorca wyśle ​​wartość przycisków radiowych.

0

zmiana var rsvps = $(".rsvps").val(); do var rsvps = $(".rsvps[selected=selected]").val();

Również dataString musi być obiekt JSON jak ten var dataString = { rsvps : rsvps }; być dostępne za pośrednictwem AJAX POST.

+0

Powraca jako "niezdefiniowany" ... –