JavaScript - Radio On Air Script

Hey,

I'm looking for a scrupt that looks at the current day and time and displays the relevant text such as "Breakfast Show DJ" between 6 and 10am on weekdays, "Drive Time DJ" between 5 - 8pm, "Sunday Breakfast" Sundays 6-10am, etc etc.

Does anyone know of any links to download such one from, or could possibly post one?

I got a bit of stick when asking for someone to post one before, so please if you're not gonna post one, help me out? I could just stick to using the php shoutcast radio stats, but I'd prefer that the on air dj name change to what the schedule shows.

Don't ask why, it's just me trying out new things. So please can someone help me out?

Many Thanks!

I have 4 rows in a table.

Each row consist of 4 radio buttons.

Each radio button per row has different values in it but has the same name (group)
ex:
<input type="radio" name="a" value="1">
<input type="radio" name="a" value="2">
<input type="radio" name="a" value="3">
<input type="radio" name="a" value="4">

<input type="radio" name="b" value="1">
<input type="radio" name="b" value="2">
<input type="radio" name="b" value="3">
<input type="radio" name="b" value="4">

and so on..

If I click radio button A with value 2, I want to output the total at the bottom as "2"..

Also, if I click radio button B with value 3, I want to output the total of A and B as 5

and so on..

How can I automatically calculate the answer based on which radio button was click?

update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery

Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper,

I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside.

I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout.

I am using a var= images [ with

a series of file locations and info such as below

{
src: 'romanticabride/thumbs/tn_Shauna.jpg',
srcBig: 'romanticabride/images/Shauna.jpg',
title: 'Shauna',
longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>'
},

what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work .

one of my pages is http://www.cherishbridal.co.uk/romaticabride.html

the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further
or post some code. Thank you in advance

Hi,

Been trying to figure this code out for some hours now to no avail.
I have 2 radio buttons on the page and would like to get the value from the selected button so I can use it for another function.



Code:

var alpineResort=document.SkiR.Type.checked=true;
				var alpineResort=parseFloat(alpineResort)
				
				if ( ( document.SkiR.Type[0].checked == false )
    && ( document.SkiR.Type[1].checked == false ) )
    {
        alert ( "You have no selected any value." );
        valid = false;
		document.SkiR.Type.focus()
    }

I managed to validate it, but puzzled as to how to get the value out of it. Really need some help as its quite urgent! thanks

does any expert know how to pass parameters in the <script ..> tag?

for instance;
Code:

<script type="text/javascript" src="script.js ?param1=val1&param2=val2&etc ">

in the javascript script.js, how would we read the params after the question mark?

for example, google this; google shopping cart /v2_2/cart.js

I have a script that works in seamonkey(my html editor) but when I use it in IE8 it says errors happen.
Here's the code (the first line is on line 7 of the html file):
Code:

<script type="text/javascript">
function enlarge(imageNum)
{
var numToString = "";
if(parseInt(imageNum) < 10){
numToString = "0" + imageNum;
}
else
{
numToString = imageNum + "";
}
window.open("images/LgScreenshot"+numToString+".jpg","Screenshot "+imageNum,"status=0,height=675,width=900,resizable=0");
}
</script>

And the errors:
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB0.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; InfoPath.3; .NET CLR 3.0.30729)
Timestamp: Wed, 10 Feb 2010 14:58:16 UTC


Message: Object expected
Line: 150
Char: 1
Code: 0
URI: http://samssc2site.co.cc/Features.html


Message: Invalid argument.
Line: 18
Char: 1
Code: 0
URI: http://samssc2site.co.cc/Features.html

I don't exactly know how to word my issue.

Basically, I need it so that if a user selects 'option1' in the group 'group1' when they go to 'group2' is only gives them a certain selection to choose from. If they choose 'option2' in 'group1' they will get a different set to choose from.

My main dilemma is it must do this without them having to submit.

hello, this is my first attempt in javascript. im trying to make custom radio buttons here is the code i have:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	<head>
		
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		
		<title>Untitled Document</title>
		
		<style type="text/css">
		
			.hide {display:none;}
		
			.radio {width:16px;height:16px;}
		
		</style>
		
		<script type="text/javascript">
			
			// declare variables or different states
			var off = 'images/check-off.png';
			var on = 'images/check-on.png';
			var radioImage = document.createElement('img');
			
			function replaceRadios(){
				
				var radios = document.getElementsByName('radio1');
				
				radios.type = 'radio'
				
				for (r = 1; r < radios.length; r++) {
					
					// if radio is checked configure the img src to var on
					if (radios[r].type = 'radio' && radios[r].checked) {
						
						radioImage.src = on;	
						radioImage.className= 'radio on';
								
					} else {
							
						// otherwise configure the img src to var normal/off and give it a class of radio
						radioImage.src = off;
						radioImage.className= 'radio off';

					}
						
					// give the image an id of radio
					radioImage.className = 'radio';
					
					radioImage.onclick= radioStates;
							
					radios[r].parentNode.insertBefore(radioImage,radios[r]);
						
					// hide the radio button to show image
					radios[r].className = 'hide';
				
					}
					
				}
					
				function radioStates(r) {
				
					var radios = document.getElementsByName('radio1');
				
					if (radios.checked = true) {
				
						radioImage.setAttribute("class", "radio on");
						radioImage.src = on;
					
					} else if (radios.checked = false) {
					
						radioImage.setAttribute("class", "radio off");
						radioImage.src = off;
						
					} else {
					
						radioImage.setAttribute("class", "radio off");
						radioImage.src = off;
						
					}
					
    			}	
		
				setTimeout("replaceRadios()", 0);
		
		</script>
		
	</head>
	
	<body>
	
		<form name="radiotest">
	
			<input type="radio"  id="radio1" class="radio" name="radio1" />
	
			<input type="radio"  id="radio2" class="radio" name="radio1" />
	
			<input type="submit" id="submit" name="submit" />
	
		</form>
	
	</body>

</html>

If anyone could help me, I would greatly appreciate it.

hi can someone help me on my code on javascript sory im a newbie can you check this and help me what i need to do to add all the radio botton and check box. i already finish the add formula on the checkbox but i do not know how to add the two selected radio buttons to my checkbox buttons help please...

for example:
O selected is 80
O 60
O 60

O selected is 15
O 15
O 25

chkbox 22
chkbox 30
chkbox 8



Code:

function Compute(form)
{
if(form.radio1[0].checked)
form.text1.value=form.radio1[0].value;   <---- the value of this is 80
else if(form.radio1[1].checked)
form.text1.value=form.radio1[1].value;   <---- 60
else if(form.radio1[2].checked)
form.text1.value=form.radio1[2].value;   <---- 60
else if(form.radio1[0].checked)
form.text1.value=form.radio1[0].value;   <---- 15
else if(form.radio2[1].checked)
form.text1.value=form.radio2[1].value;   <---- 15
else if(form.radio2[2].checked)
form.text1.value=form.radio2[2].value;   <---- 25
var a=0;
if(form.chk1.checked)    <----22
a = a + eval(form.chk1.value);
if(form.chk2.checked)    <----30
a = a + eval(form.chk2.value);
if(form.chk3.checked)    <----8
a = a + eval(form.chk3.value);
if(form.chk1.checked && form.chk2.checked)
a = eval(form.chk1.value) + eval(form.chk2.value);
if(form.chk1.checked && form.chk3.checked)
a = eval(form.chk1.value) + eval(form.chk3.value);
if(form.chk2.checked && form.chk1.checked)
a = eval(form.chk2.value) + eval(form.chk1.value);
if(form.chk2.checked && form.chk3.checked)
a = eval(form.chk2.value) + eval(form.chk3.value);
if(form.chk3.checked && form.chk1.checked)
a = eval(form.chk3.value) + eval(form.chk1.value);
if(form.chk3.checked && form.chk2.checked)
a = eval(form.chk3.value) + eval(form.chk2.value);
if(form.chk1.checked && form.chk2.checked && form.chk3.checked)
a = eval(form.chk1.value) + eval(form.chk2.value) + eval(form.chk3.value);
form.text1.value=a;
}

On my website I have a radio button as any other normal radio button.

<input type="radio" name="crime" value="4" id="4" class="submit">

is there any way to get rid of this radio button and click something for example
<tr>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section.

I'm creating a unit converter program using radio buttons and i can't seem to get one aspect working. i can't seem to get another set of radio buttons to display. the way the program is supposed to work is there will be 3 radio buttons saying to convert length, weight, and volume. if the user selects to convert weight, another set of radio buttons will appear with 2 options, to convert from pounds to kilograms, or kilograms to pounds. then the user enters the number in a text box and clicks to convert button. my problem is getting the second set of radio buttons to display. I have no clue how to get this to work. to get a better understanding of whats going on, here is the program without the radio buttons that i created. i'm trying to use radio buttons in place of the prompting message.

Code:

<!DOCTYPE html>
<html>
    <head>
        <title> Conversions of Weight and Length</title>
        
        <script type="text/javascript">
        
        function clearMe() 
        { 
            var _s=top; 
            var _d=_s.document; 
            _d.open(); 
            _d.write(""); 
            _d.close(); 
        } 
        function main()
        {
                      
            
            var repeat = confirm("Do you want to perform another conversion ? \r" + "<p><b>Note:</b> Pressing OK allows for another conversion, and pressing CANCEL exits</p>");
            
            if(repeat==true)
                {
                    convert();
                }
            else 
                {
                    alert("Your program has been terminated!");
                    self.close();            
                }
        }
            
        
       
        function convert()
        {
            var unit, direction, value, result, original_units, new_units;
            document.write("<br/><br/>")
            document.write("Weight and Length conversion menu" + "<br/><br/>");
            document.write("1. convert length" + "<br />");
            document.write("2. convert weight" + "<br />");
            document.write("3. convert volume" + "<br />");
              
                   unit = window.prompt("select conversion type: ");
              
              if ((unit<0) || (unit>3))
              {
                  alert("Select Menu option 1, 2, or 3!");
                  unit = window.prompt("Select conversion type: ");
              }
              switch (unit)
              {
                  case '1':
                     direction = choose_direction("<br /><br />1. Feet to meters<br />" , "2. Meters to feet <br />");
                      if (direction =='1')
                          {
                              original_units = "meters"; new_units = "meters";
                             
                          }
                          else {
                              new_units = "feet"; original_units = "meters";
                          }
                          break;
                  case '2':
                      direction = choose_direction("<br /><br />1. Pounds to kilograms <br />", "2. Kilograms to pounds <br /> <br />"); 
                      if (direction =='1')
                          {
                             original_units = "pounds"; new_units = "kilograms";
                             
                          }
                          else {
                              new_units = "pounds"; original_units = "kilograms";
                          }
                          break;
                  case '3':
                      direction = choose_direction("<br /><br />1. Gallons to liters<br />", "2. Liters to gallons <br /><br />");
                      if (direction =='1')
                          {
                             original_units = "gallons"; new_units = "liters";
                             
                          }
                          else {
                              new_units = "gallons"; original_units = "liters";
                          }
                          break;
                          
                          
              
              }
               value = window.prompt("Enter value to be converted:")
              
              
              switch(unit)
              {
                  case '1':
                      result = feet_meters(value, direction);
                      break;
                  case '2':
                      result = pounds_kilograms(value, direction);
                      break;
                  case '3':
                      result = gallons_liters(value, direction);
                      break;
              }
              document.write(value + original_units + " = " + result + new_units);
                          
        }
        function choose_direction(option1, option2)
        {
             var direction;
            document.write(option1);
            document.write(option2);
            do
            {
                window.prompt("Select a conversion direction");
                return direction;
            }
            while ((direction!='1') || (direction !='2'));
                              
        }
        function pounds_kilograms(value, direction)
        {
            if (direction == '1')
               return parseFloat(value)/parseFloat(2.2046);
            
            else
                return parseFloat(value)*parseFloat(2.2046);
        }
        function gallons_liters(value, direction)
        {
            if (direction == '1')
                return parseFloat(value)*parseFloat(3.7854);
            else
                return parseFloat(value)/parseFloat(3.7854);
        }
        function feet_meters(value, direction)
        {
            if (direction == '1')
                return parseFloat(value)/parseFloat(3.2808);
            else
                return parseFloat(value)*parseFloat(3.2808);
        }
        
        </script>
    </head>
    <body>
        <h1> weight and length conversion </h1>
        <script type="text/javascript">
          convert();            
           main();
        </script>
        
    </body>
</html>

On my website I have a radio button as any other normal radio button.

<input type="radio" name="crime" value="4" id="4" class="submit">

is there any way to get rid of this radio button and click something for example
<tr>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section.

All:

I need some help with a radio button code. It seems simple but I am really new at JavaScript so I need help. I have created a JavaScript code that has three radio buttons (High, Medium, and Low). When you click on high two text boxes appear so that an email address can be added.

What I need help with is making the text boxes disappear if someone accidentally click high and then went back to low or medium. Currently the High button stays clicked and the text boxes still show. Any help would be great.

Thanks,

Stephen



Code:

 <script type="text/javascript"> 
function showHide(el){ 
obj = document.getElementById(el).style; 
   (obj.display == 'none')? obj.display = 'block' : obj.display = 'none'; 
} 
</script> 
<form id="form1" name="form1" method="post" action=""> 
 <label> 
  <input type="Checkbox" name="High" value="High" onclick="showHide('group1')" /> High
  
 </label>

  

    <label> 
  <input type="Checkbox" name="Medium" value="Button" /> Mediun
  </label> 

  <label> 
  <input type="Checkbox" name="Medium" value="Button" /> Low
  </label> 
<p id="group1" style="display: none;"> 
    <label> 
    <b>friend1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</b><input type="Text" name="textGroup1" value="@gmail.com" /> <br/>
</label> 
    <br /> 
    <label> 
<b>friend2&nbsp;&nbsp;&nbsp</b><input type="text" name="textGroup1" value="@gmail.com" /> 
</label> 
    
  </p> 
  
</form>

Hi,

I could not get the radio to work.
I need to be able tot select the different radio buttons in which it will produce different rates for calculation. But after reaching here, am not sure what is wrong with the coding as there are no error msgs, and it only uses the 18/0.18 rates, even when 25/0.28 rates are selected.
Could someone advise me?
Thanks

Code as show below-
Code:

<a name="A"></a>
<script language="JavaScript">

function stocks(form) {
shares = form.shares.value * 1;
buyprice = form.buyprice.value * 1;
sellprice = form.sellprice.value * 1;
dividends = form.dividends.value * 1;
buyoption = form.buyoption.value * 1;
selloption = form.selloption.value * 1;

//Checking Buy Commission
if (buyoption>24) 
 {
 bco1=25;
 bco2=0.28;
 }
 else
 {
 bco1=18;
 bco2=0.18;
 }

//Checking Sell Commission
if (selloption>24) 
 {
 sco1=25;
 sco2=0.28;
 }
 else
 {
 sco1=18;
 sco2=0.18;
 }

//Calc Buying Cost
ba1=shares*buyprice;
ba2=bco1;
ba3=(shares*buyprice)/100*0.04;
ba4=(shares*buyprice)/100*0.0075;
ba5=(ba2+ba3+ba4)/100*7;
baf=Math.round((ba1+ba2+ba3+ba4+ba5)*100)/100;

bb1=shares*buyprice;
bb2=(shares*buyprice)/100*bco2;
bb3=(shares*buyprice)/100*0.04;
bb4=(shares*buyprice)/100*0.0075;
bb5=(bb2+bb3+bb4)/100*7;
bbf=Math.round((bb1+bb2+bb3+bb4+bb5)*100)/100;

//Compare Cost
if (baf>bbf) 
 {
 bc=baf;
 }
 else
 {
 bc=bbf;
 }

//Calc Selling Cost
sa1=shares*sellprice;
sa2=sco1;
sa3=(shares*sellprice)/100*0.04;
sa4=(shares*sellprice)/100*0.0075;
sa5=(sa2+sa3+sa4)/100*7;
saf=Math.round((sa1-(sa2+sa3+sa4+sa5))*100)/100;

sb1=shares*sellprice;
sb2=(shares*sellprice)/100*sco2;
sb3=(shares*sellprice)/100*0.04;
sb4=(shares*sellprice)/100*0.0075;
sb5=(sb2+sb3+sb4)/100*7;
sbf=Math.round((sb1-(sb2+sb3+sb4+sb5))*100)/100;

//Compare Returns
if (saf<sbf) 
 {
 tr=saf;
 }
 else
 {
 tr=sbf;
 }

//Calc Break Even Price
bepwod1=(bc/shares);
bepwd1=((bc-dividends)/shares);
bepwod=bepwod1.toFixed(3);
bepwd=bepwd1.toFixed(3);

//Calc Profit and Loss
plwod1=tr-bc;
plwd1=tr+dividends-bc;
plwod=plwod1.toFixed(3);
plwd=plwd1.toFixed(3);

//Returning Values
bought = bc; // Total Cost
sold = tr; // Total Returns

form.buycost.value  = "$ " + bought;
form.sellcost.value = "$ " + sold;
form.breakevenpricewod.value = "$ " + bepwod;
form.breakevenpricewd.value = "$ " + bepwd;
form.profitlosswod.value = "$ " + plwod;
form.profitlosswd.value = "$ " + plwd;
}
</script>



<center>
<form name='stockform'>
<table border=0>
<tr>
<td align=left>* No. of Shares</td>
<td>:</td>
<td><input type="text" name="shares" /></td>
<td align=left>Total Cost</td>
<td>:</td>
<td><input type="text" readonly="readonly" name="buycost" /></td>
</tr>
<tr>
<td align=left>* Buying Price</td>
<td>:</td>
<td><input type="text" name="buyprice" /></td>
<td align=left>Total Returns</td>
<td>:</td>
<td><input type="text" readonly="readonly" name="sellcost" /></td>
</tr>
<tr>
<td align=left>* Selling Price</td>
<td>:</td>
<td><input type="text" name="sellprice" /></td>
<td align=left>Break Even Price w/o Dividends</td>
<td>:</td>
<td><input type="text" readonly="readonly" name="breakevenpricewod" /></td>
</tr>
<tr>
<td align=left>* Dividends</td>
<td>:</td>
<td><input type="text" name="dividends" /></td>
<td align=left>Break Even Price w Dividends</td>
<td>:</td>
<td><input type="text" readonly="readonly" name="breakevenpricewd" /></td>
</tr>
<tr>
<td align=left>Buy @ Commission</td>
<td>:</td>
<td><input type="radio" name="buyoption" value="18" checked>$18/0.18%<br>
<input type="radio" name="buyoption" value="25">$25/0.28%<br></td>
<td align=left>Profit & Loss w/o Dividends</td>
<td>:</td>
<td><input type="text" readonly="readonly" name="profitlosswod" /></td>
</tr>
<tr>
<td align=left>Sell @ Commission</td>
<td>:</td>
<td><input type="radio" name="selloption" value="18">$18/0.18%<br>
<input type="radio" name="selloption" value="25" checked>$25/0.28%<br></td>
<td align=left>Profit & Loss w Dividends</td>
<td>:</td>
<td><input type="text" readonly="readonly" name="profitlosswd" /></td>
</tr>
<tr>
<td colspan=3 align=center>
<input type="button" name="calc" value="Calculate" onclick="javascript:stocks(this.form)" />
</td>
<td align=left></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</center>

I'm Confused.
My HTML:

<form action="mail.php" class="contactForm" name="cform" method="post">
<div class="left">
<h1>Insurance Details</h1>
<label>Type of Cover:</label>
.
.
.
<span class="gender-missing"><br />Please select your gender.<br /></span>
<label>Gender:</label>
<input class="radio" id="gender" name="gender" type="radio" value="Male" />&nbsp;Male&nbsp;&nbsp;
<input class="radio" id="gender" name="gender" type="radio" value="Female" />&nbsp;Female&nbsp;&nbsp;

Script.js:

$('.contactForm').submit( function(){
//statements to validate the form
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var digitNum = /^([0-9])/;

var num1 = document.getElementById('tel');
var num2 = document.getElementById('mobile');
var email = document.getElementById('email');
var dollarUnit = document.getElementById('amount_cover');
var gender = document.getElementsById('gender');


if((document.cform.gender[0].checked== false)&&(document.cform.gender[1].checked== false))
{$('.gender-missing').show();
} else {$('.gender-missing').hide();}
if((document.cform.smoke[0].checked== false)&&(document.cform.smoke[1].checked== false))
{$('.smoke-missing').show();
} else {$('.smoke-missing').hide();}
if((document.cform.residency[0].checked== false)&&(document.cform.residency[1].checked== false))
{$('.residency-missing').show();
} else {$('.residency-missing').hide();}

if (!filter.test(email.value)) {
$('.email-missing').show();
} else {$('.email-missing').hide();}
if (document.cform.name.value == "") {
$('.name-missing').show();
} else {$('.name-missing').hide();}
if (document.cform.address.value == "") {
$('.address-missing').show();
} else {$('.address-missing').hide();}
if (!digitNum.test(num1.value)) {
$('.tel-missing').show();
} else {$('.tel-missing').hide();}
if (!digitNum.test(num2.value)) {
$('.mobile-missing').show();
} else {$('.mobile-missing').hide();}
if (!digitNum.test(dollarUnit.value)) {
$('.cover-missing').show();
} else {$('.cover-missing').hide();}
if (document.cform.message.value == "") {
$('.message-missing').show();
} else {$('.message-missing').hide();}
if ((document.cform.name.value == "") || ((document.cform.gender[0].checked== false) && (document.cform.gender[1].checked== false)) || ((document.cform.smoke[0].checked== false) && (document.cform.smoke[1].checked== false)) || ((document.cform.residency[0].checked== false) && (document.cform.residency[1].checked== false)) || (!digitNum.test(dollarUnit.value)) || (!filter.test(email.value)) || (!digitNum.test(num2.value)) || (!digitNum.test(num1.value)) || (document.cform.message.value == "")){
return false;
}

if ((document.cform.name.value != "") && ((document.cform.gender[0].checked == true) || (document.cform.gender[1].checked == true)) && ((document.cform.smoke[0].checked== true) || (document.cform.smoke[1].checked== true)) && ((document.cform.residency[0].checked== true) || (document.cform.residency[1].checked== true)) && (digitNum.test(dollarUnit.value)) && (digitNum.test(num1.value)) && (digitNum.test(num2.value)) && (filter.test(email.value)) && (document.cform.message.value != "")) {
//hide the form
$('.contactForm').hide();

//show the loading bar
$('.loader').append($('.bar'));
$('.bar').css({display:'block'});

//send the ajax request
$.post('mail.php',{coverType:$('#coverType').val(),
coverRequired:$('#coverRequired').val(),
amount_cover:$('#amount_cover').val(),
terms:$('#terms').val(),
message:$('#message').val(),
name:$('#name').val(),
gender:$('#gender').val(),
status:$('#status').val(),
Birth_month:$('#Birth_month').val(),
days:$('#days').val(),
years:$('#years').val(),
smoke:$('#smoke').val(),
residency:$('#residency').val(),
email:$('#email').val(),
address:$('#address').val(),
tel:$('#tel').val(),
mobile:$('#mobile').val()},

//return the data
function(data){
//hide the graphic
$('.bar').css({display:'none'});
$('.loader').append(data);
});

//waits 2000, then closes the form and fades out
setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 5000);
setTimeout('$(".contact").animate({"marginLeft": "-=963px"}, "slow")',4900);

//stay on the page
return false;
}
});
//only need force for IE6
$("#backgroundPopup").css({
"height": document.documentElement.clientHeight
});

mail.php code:
<?php
//declare our variables

$coverType = $_POST['coverType'];
$coverRequired = $_POST['coverRequired'];
$amount_cover = $_POST['amount_cover'];
$terms = $_POST['terms'];
$message = stripslashes(nl2br($_POST['message']));

$name = $_POST['name'];
$gender = $_POST['gender'];
$status = $_POST['status'];
$Birth_month = $_POST['Birth_month'];
$days = $_POST['days'];
$years = $_POST['years'];
$smoke = $_POST['smoke'];
$residency = $_POST['residency'];

$email = $_POST['email'];
$address = $_POST['address'];
$tel = $_POST['tel'];
$mobile = $_POST['mobile'];

//get todays date
$todayis = date("l, F j, Y, g:i a") ;
//set a title for the message
$subject = "Message from Your Website";
$body = "PERSONAL DETAILS \nFull Name: $name \nGender: $gender \nMarital Status: $status \nBirth Date: $Birth_month $days, $years \nHave you smoke in the past 12 Months? $smoke \nU.S. Residency for at least 12 Months? $residency \n\nCONTACT DETAILS\nEmail Address: $email \nAddress: $address \nTelephone #: $tel \nMobile Number: $mobile \n\nINSURANCE DETAILS\nCover Type: $coverType \nCover Required: $coverRequired \nAmount: $amount_cover \nTerms(Years): $terms \nMessage: \n$message";

$headers = 'From: '.$email.'' . "\r\n" .
'Reply-To: '.$email.'' . "\r\n" .
'Content-type: text/plain; charset=utf-8' . "\r\n" .
'X-Mailer: PHP/' . phpversion();

//put your email address here
mail("me@myemail.com", $subject, $body, $headers);
?>
<!--Display a thankyou message in the callback -->
<div id="mail_response">
<h3>Thank you for your interest <?php echo $name ?>!</h3><br />
<p>We have received your personal information and we will forward it to the next available insurance agent .You can expect to hear from us within 24 hours.</p>
<br /><br />
<h5>Message sent on: </h5>
<p><?php echo $todayis ?></p>
</div>

Problem is the thank you message loads in a new page. BUt if I delete this line: var gender = document.getElementsById('gender'); The form run properly, when submit button is click, it will hide the forms and replace by a thank you message but problem is the data send in the email is not the right value eg. in Gender: I select Female. BUt I receive Male as value. Why is that?
for live demo: http://gbv.lifeandhealthbenefits.com/
for full Script Code: http://gbv.lifeandhealthbenefits.com/js/scripts.js