By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,118 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

AJAX -- passing on radio button values

P: 2
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
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
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

P: 2
Uhmmm... Can you point me to an example? Not sure I understand.
Jan 16 '09 #3

acoder
Expert Mod 15k+
P: 16,027
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.