469,647 Members | 1,730 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,647 developers. It's quick & easy.

AJAX -- passing on radio button values

I see several postings on this but I am still unable to figure out my problem. I can pass the values of my text field but not radio button (or even checkboxes).

My PHP file

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.     //declare our variables
  3.     $day = $_GET['day'];
  4.     $date = $_GET['date'];
  5.     $groupname = $_GET['groupname'];
  6.     $contactperson = $_GET['contactperson'];
  7.     $phonenumber = $_GET['phonenumber'];
  8.     $emailaddress = $_GET['emailaddress'];
  9.     $lengthtime = $_GET['lengthtime'];
  10.     $participants = $_GET['participants'];
  11.     $dvd = $_GET['dvd'];
  12.     $comments = $_GET['comments'];
  13.     $ben = "Ben's";
  14.     $todayis = date("l, F j, Y, g:i a") ;
  15.     $subject = "You have a new TO-GO BOX request from $groupname";                
  16.     $message = " TO-GO BOX REQUEST INFORMATION: \r \n Group Name: $groupname \r Date and Day of pickup: $day on $date \r \n CONTACT PERSON INFORMATION: \r $contactperson \r $phonenumber \r $emailaddress \r \n ACTIVITY INFORMATION: \r Time length of activity: $lengthtime \r Number of participants: $participants \r  DVD: \r $dvd \r \n ADDITIONAL COMMENTS: \r $comments";
  17.  
  18.     //put your email address here
  19.     mail("xxxxxx@xxxxxxxx.org", $subject, $message);
  20. ?>
  21.  
  22.     <h1><span>Thank you  <h3><?php echo $contactperson ?></h3></span></h1>
  23.         <p><span>Your request has been processed.</span></p>
  24.         <p><span>We will see you on your pickup day: <?php echo $day ?>. Thank you!!</span></p>
  25.         <p><span>We are located in xxxxxxxxxxxx</span></p>
  26. <h3>Message sent on: <?php echo $todayis ?></h3>
  27. <a href="javascript:window.close();">
  28.  
  29.  
  30.  
my HTML file

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://www.xxxxxxx.org/jquery.js"></script> 
  4.  
  5. <script type="text/javascript">
  6.  
  7.  
  8.  
  9. $(function() {
  10.     //trigger ajax on submit
  11.     $('#contactForm').submit( function(){
  12.  
  13.         //hide the form
  14.         $('#contactForm').hide();
  15.  
  16.         //show the loading bar
  17.         $('.loader').append($('.bar')); 
  18.         $('.bar').css({display:'block'});
  19.  
  20.         //send the ajax request 
  21.         $.get('mailtogoform.php',{day:$('#day').val(), date:$('#date').val(), groupname:$('#groupname').val(), contactperson:$('#contactperson').val(), phonenumber:$('#phonenumber').val(), emailaddress:$('#emailaddress').val(), lengthtime:$('#lengthtime').val(), participants:$('#participants').val(), dvd:$('#dvd').val(), comments:$('#comments').val()},    
  22.         //return the data
  23.         function(data){
  24.             //hide the graphic
  25.             $('.bar').css({display:'none'}); 
  26.             $('.loader').append(data);  
  27.         });    
  28.  
  29.         //stay on the page                    
  30.         return false;    
  31.     });
  32. });
  33.  
  34.  
  35. </script>
  36.  
  37. <style type="text/css">
  38.  
  39. body {
  40.     font-family:helvetica;    
  41.     background-color: #FF9900;
  42. }
  43.  
  44. .loader {
  45.  
  46. }
  47.  
  48. .bar{
  49.     display:none;    
  50.     background: url('ajax-loader.gif') no-repeat;
  51.     margin-left:20px;
  52.     margin-top:50px;
  53.     height:20px;
  54.     width: 230px;
  55. }
  56.  
  57. #contactForm{
  58.     float:left;    
  59.      position:relative;
  60.     background-color: #ff9900;    
  61.     height: 200px;
  62. }
  63.  
  64. #container {
  65.     padding:20px;
  66.      float:left;    
  67.      position:relative;
  68.      height: 200px;
  69.       width: 100px;
  70. }
  71. .style2 {font-size: 12pt}
  72. .style3 {
  73.     font-family: Arial, Helvetica, sans-serif
  74. }
  75. .style4 {font-size: 10pt}
  76. </style>
  77. </head>
  78.     <body>
  79.     <div class="loader">
  80.     <div class="bar"></div>
  81.     <div id="container">
  82.     <form id="contactForm" method="post" action="mailtogoform.php">
  83.       <table width="100%" border="0" cellspacing="0" cellpadding="0">
  84.         <tr>
  85.           <td width="14%">&nbsp;</td>
  86.           <td width="86%">            <div align="left">
  87.  
  88.  
  89.             <p class="style36 style2 style3"><strong>TO-GO BOX FORM</strong></p>
  90.  
  91.           </div>
  92.  
  93.             <p> <strong>CONTACT DETAILS</strong> </p>
  94.             <p align="left">
  95.                 <label for="groupname"><span class="style4">Group Name</span> </label>
  96.                 <input id="groupname" name="groupname" />
  97.             </p>
  98.             <p align="left">
  99.                 <label for="contactperson"><span class="style4">Contact person</span></label>
  100.                 <input id="contactperson" name="contactperson" />
  101.             </p>
  102.  
  103.             <p align="left">
  104.                 <label for="phonenumber"><span class="style4">Phone Number:</span> </label>
  105.                 <input id="phonenumber" name="phonenumber" />
  106.             </p>
  107.  
  108.             <p align="left">
  109.                 <label for="emailaddress"><span class="style4">Email Address:</span> </label>
  110.                 <input id="emailaddress" name="emailaddress" />
  111.             </p>
  112.             <p> <strong>ACTIVITY DETAILS</strong> </p>
  113.  
  114.  
  115.                     <p align="left">Select a pick-up day:  <br> <br>
  116.                     <input name="day" type="radio" value="Wed 10-3pm">Wed 10-3pm<br>
  117.                     <input name="day" type="radio" value="Thurs 10-3pm">Thurs 10-3pm<br>
  118.                     <input name="day" type="radio" value="Fri 10-7pm">Fri 10-7pm<br>
  119.                     <input name="day" type="radio" value="Sat 10-3pm">Sat 10-3pm<br>
  120.                     <input name="day" type="radio" value="Sun 10-3pm">Sun 10-3pm<br>
  121.                     </p>
  122.  
  123.  
  124.             <p align="left">
  125.                 <label for="date">On what date? (i.e Jan 5, 2009):</label>
  126.                 <input id="date" name="date" />
  127.             </p>
  128.             <p align="left">
  129.                 <label for="lengthtime">Length of bead making activity: </label>
  130.                 <input id="lengthtime" name="lengthtime" />
  131.             </p>
  132.  
  133.             <p align="left">
  134.                 <label for="participants">Number of participants:</label>
  135.                 <input id="participants" name="participants" />
  136.             </p>
  137.  
  138.  
  139.             <p>
  140.             Include DVD?<br>
  141.             <input name="dvd" type="radio" value="Yes" onchange="radio_checker();">Yes<br>
  142.             <input name="dvd" type="radio" value="No" onchange="radio_checker();">No<br>
  143.             </p>
  144.  
  145.  
  146.             <p align="left">    
  147.               <span class="style2">
  148.                 <label for="comments"><strong>ADDITIONAL COMMENTS:</strong> </label>
  149.               </span>
  150.               <textarea id="comments" name="comments" rows="10" cols="90" ></textarea>
  151.             </p>
  152.             <div align="center"> 
  153.         <p><strong>***Your $10 processing fee helps support our <br> 
  154.         &quot;To-Go Box&quot; Program - Thank you! $30 refundable <br> 
  155.     deposit will also be collected at time of pick up*** </strong></p> 
  156.         </div>
  157.             <p align="center">
  158.                 <input class="submit" type="submit" value="submit"/>
  159.             </p>
  160.         </form>        
  161.        </td>
  162.         </tr>
  163.       </table>
  164.     </div>
  165. </body>
  166. </html>
  167.  
  168.  
  169.  
Jan 15 '09 #1
3 6533
acoder
16,027 Expert Mod 8TB
For radio buttons and checkboxes, get the elements and add the values of the checked ones (find by looping over all the elements).
Jan 15 '09 #2
Uhmmm... Can you point me to an example? Not sure I understand.
Jan 16 '09 #3
acoder
16,027 Expert Mod 8TB
OK, so let's take the "dvd" radio button:
Expand|Select|Wrap|Line Numbers
  1. var radios = document.getElementsByName("dvd");
  2. // loop over them:
  3. for (i = 0; i < radios.length; i++) {
  4.     if (radios[i].checked) str += "&dvd=" + encodeURIComponent(radios[i].value);
  5. }
Jan 18 '09 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Dave Harris | last post: by
1 post views Thread by ghjk | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.