AJAX -- passing on radio button values

ToddFur

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

 
<?php

    //declare our variables

    $day = $_GET['day'];

    $date = $_GET['date'];

    $groupname = $_GET['groupname'];

    $contactperson = $_GET['contactperson'];

    $phonenumber = $_GET['phonenumber'];

    $emailaddress = $_GET['emailaddress'];

    $lengthtime = $_GET['lengthtime'];

    $participants = $_GET['participants'];

    $dvd = $_GET['dvd'];

    $comments = $_GET['comments'];

    $ben = "Ben's";

    $todayis = date("l, F j, Y, g:i a") ;

    $subject = "You have a new TO-GO BOX request from $groupname";                

    $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";
 
    //put your email address here

    mail("xxxxxx@xxxxxxxx.org", $subject, $message);

?>
 
    <h1><span>Thank you  <h3><?php echo $contactperson ?></h3></span></h1>

        <p><span>Your request has been processed.</span></p>

        <p><span>We will see you on your pickup day: <?php echo $day ?>. Thank you!!</span></p>

        <p><span>We are located in xxxxxxxxxxxx</span></p>

<h3>Message sent on: <?php echo $todayis ?></h3>

<a href="javascript:window.close();">

my HTML file

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<script type="text/javascript" src="http://www.xxxxxxx.org/jquery.js"></script> 
 
<script type="text/javascript">
 
$(function() {

    //trigger ajax on submit

    $('#contactForm').submit( function(){
 
        //hide the form

        $('#contactForm').hide();
 
        //show the loading bar

        $('.loader').append($('.bar')); 

        $('.bar').css({display:'block'});
 
        //send the ajax request 

        $.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()},    

        //return the data

        function(data){

            //hide the graphic

            $('.bar').css({display:'none'}); 

            $('.loader').append(data);  

        });    
 
        //stay on the page                    

        return false;    

    });

});
 
</script>
 
<style type="text/css">
 
body {

    font-family:helvetica;    

    background-color: #FF9900;

}
 
.loader {
 
}
 
.bar{

    display:none;    

    background: url('ajax-loader.gif') no-repeat;

    margin-left:20px;

    margin-top:50px;

    height:20px;

    width: 230px;

}
 
#contactForm{

    float:left;    

     position:relative;

    background-color: #ff9900;    

    height: 200px;

}
 
#container {

    padding:20px;

     float:left;    

     position:relative;

     height: 200px;

      width: 100px;

}

.style2 {font-size: 12pt}

.style3 {

    font-family: Arial, Helvetica, sans-serif

}

.style4 {font-size: 10pt}

</style>

</head>

    <body>

    <div class="loader">

    <div class="bar"></div>

    <div id="container">

    <form id="contactForm" method="post" action="mailtogoform.php">

      <table width="100%" border="0" cellspacing="0" cellpadding="0">

        <tr>

          <td width="14%">&nbsp;</td>

          <td width="86%">            <div align="left">
 
            <p class="style36 style2 style3"><strong>TO-GO BOX FORM</strong></p>
 
          </div>
 
            <p> <strong>CONTACT DETAILS</strong> </p>

            <p align="left">

                <label for="groupname"><span class="style4">Group Name</span> </label>

                <input id="groupname" name="groupname" />

            </p>

            <p align="left">

                <label for="contactperson"><span class="style4">Contact person</span></label>

                <input id="contactperson" name="contactperson" />

            </p>
 
            <p align="left">

                <label for="phonenumber"><span class="style4">Phone Number:</span> </label>

                <input id="phonenumber" name="phonenumber" />

            </p>
 
            <p align="left">

                <label for="emailaddress"><span class="style4">Email Address:</span> </label>

                <input id="emailaddress" name="emailaddress" />

            </p>

            <p> <strong>ACTIVITY DETAILS</strong> </p>
 
                    <p align="left">Select a pick-up day:  <br> <br>

                    <input name="day" type="radio" value="Wed 10-3pm">Wed 10-3pm<br>

                    <input name="day" type="radio" value="Thurs 10-3pm">Thurs 10-3pm<br>

                    <input name="day" type="radio" value="Fri 10-7pm">Fri 10-7pm<br>

                    <input name="day" type="radio" value="Sat 10-3pm">Sat 10-3pm<br>

                    <input name="day" type="radio" value="Sun 10-3pm">Sun 10-3pm<br>

                    </p>
 
            <p align="left">

                <label for="date">On what date? (i.e Jan 5, 2009):</label>

                <input id="date" name="date" />

            </p>

            <p align="left">

                <label for="lengthtime">Length of bead making activity: </label>

                <input id="lengthtime" name="lengthtime" />

            </p>
 
            <p align="left">

                <label for="participants">Number of participants:</label>

                <input id="participants" name="participants" />

            </p>
 
            <p>

            Include DVD?<br>

            <input name="dvd" type="radio" value="Yes" onchange="radio_checker();">Yes<br>

            <input name="dvd" type="radio" value="No" onchange="radio_checker();">No<br>

            </p>
 
            <p align="left">    

              <span class="style2">

                <label for="comments"><strong>ADDITIONAL COMMENTS:</strong> </label>

              </span>

              <textarea id="comments" name="comments" rows="10" cols="90" ></textarea>

            </p>

            <div align="center"> 

        <p><strong>***Your $10 processing fee helps support our <br> 

        &quot;To-Go Box&quot; Program - Thank you! $30 refundable <br> 

    deposit will also be collected at time of pick up*** </strong></p> 

        </div>

            <p align="center">

                <input class="submit" type="submit" value="submit"/>

            </p>

        </form>        

       </td>

        </tr>

      </table>

    </div>

</body>

</html>

acoder

For radio buttons and checkboxes, get the elements and add the values of the checked ones (find by looping over all the elements).

ToddFur

Uhmmm... Can you point me to an example? Not sure I understand.

acoder

OK, so let's take the "dvd" radio button:

Expand|Select|Wrap|Line Numbers

 var radios = document.getElementsByName("dvd");

// loop over them:

for (i = 0; i < radios.length; i++) {

    if (radios[i].checked) str += "&dvd=" + encodeURIComponent(radios[i].value);

}

AJAX -- passing on radio button values

re: AJAX -- passing on radio button values

re: AJAX -- passing on radio button values

re: AJAX -- passing on radio button values

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about