JavaScript - Cycling Through An Array With Buttons
I've got a table in which I want to have certain elements changeable if the user presses a button. The elements are stored in an array and I want to cycle through them when the button is pressed.
Here's a section of what I'm working with so far: Code: <tr> <td valign="top"> <dl> <script type="text/javascript"> var w=0; var s=0; var c=0; var slugga_replace_list = new Array("Slugga","Shoota","Shoota/Rokkit","Shoota/Skorcha","Twin-Linked Shoota"); var choppa_replace_list = new Array("Choppa","Big Choppa","Power Klaw"); var warboss_wargear = new Array(); warboss_wargear[0] = slugga_replace_list[s]; warboss_wargear[1] = choppa_replace_list[c]; warboss_wargear[2] = "Stikkbombz"; for (w=0; w<2; w++) { document.write("<dt><input type='button' name='subtract' value='-' onclick='subtract()'>"+warboss_wargear[w]+"<input type='button' name='add' value='+' onclick='add()'/></dt>"); } function add() { s++ return s; } function subtract() { s-- return s; } </script> </dl> </td> </tr> I've tried using the ++ and -- to change the value of s, but it's not changing the text. Am I in the neighborhood at least? Similar TutorialsHi Guys, I'm currently working on a page working with separate categories and a whole lotta check boxes. My objective is to have one checkbox deselect the other checkboxes in its category without interfering with the rest. How would I go about doing this assuming the id tag is already in use and differs per tag? I was thinking about cycling through all checkbox tags and sorting them out via class but I'm looking for something possibly more efficient. I can get the code to open 'variouslinks()' when I click the 'Go HERE' link but I cannot get it to open them in a new window. I tried using HTML and JAVASCRIPT. Can someone please tell me what I am doing wrong???? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script> var variouslinks=new Array() variouslinks[0]="http://www.Facebook.com"; variouslinks[1]="http://www.Myspace.com"; variouslinks[2]="http://www.FriendFinder.com"; variouslinks[3]="http://www.AshleyMadison.com"; variouslinks[4]="http://www.Pets.com"; function variouslink(){ window.location=variouslinks[Math.floor(Math.various()*variouslinks.length)]; } function openNewWindow(){ var newWindow=window.open(this.getAttribute('href'), '_blank'); newWindow.focus(); return false;} </script> </head> <body> <a href="javascript:variouslink()" rel="nofollow" target="javascript:openNewWindow()">Go HERE</a> </body> </html> I basically want a random image to show up on my webpage and start scrolling through more images i've set to that list. Here's what I have thus far. However, It'll always start by bringing up the same image and then change to an error image: Code: <html> <head> <script type="text/javascript" language="javascript"> <!-- Hide script from old browsers adImages = new Array("http://i155.photobucket.com/albums/s298/Connorconway/Office_Season_6_Blu-Ray.jpg","http://i155.photobucket.com/albums/s298/Connorconway/Halloween_Blu_Ray.jpg") imgCt = adImages.length firstTime = true function rotate() { if (document.images) { if (firstTime) { thisAd = Math.floor((Math.random * imgCt)) firstTime = false } else { thisAd++ if (thisAd == imgCt) { thisAd = 0 } } document.myPicture.src=adImages [thisAd] setTimeout("rotate()", 3 * 1000) } } //--> End hiding script from old browsers </script> </head> <body onload="rotate()"> <img src="http://i155.photobucket.com/albums/s298/Connorconway/Office_Season_6_Blu-Ray.jpg" width="400" height="300" name="myPicture" alt="Ad Banner" /> </body> </html> Here's the Website I'm having problems on (So you can visually see what I mean - Under "TV ManiaX Home Page sub-heading): http://tvmaniax.myfastforum.org/index.html Thank you for any help you can give _________________ Can somebody please explain why when the lines of code that are commented out are reintroduced that this code breaks instead of resulting in each of the four circles being a different color? Code: <!DOCTYPE HTML> <html> <head><title>Circles</title></head> <body> <canvas id="myCanvas" width="512" height="128" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var i=0; var axisX=128; var axisY=64; var radius=56; //var colors=[red, green, blue, yellow]; //var currentColor; function drawCircle(){ //currentColor=colors[i]; var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); //cxt.fillStyle=currentColor; cxt.strokeStyle="black"; cxt.beginPath(); cxt.arc(axisX,axisY,radius,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); cxt.stroke(); } for (i=0;i<4;i++){ drawCircle(); axisX=axisX+84; } </script> </body> </html> What am I doing wrong? Thank you! Hey all! So there I was newly hired and tasked with pouring through someone else's code to see what could be modified and brought up to date. After successfully finding the errors and correcting them and fulfilling the tasks my new supervisor assigned me, he slaps me on the back and says, "Well done! Now make it dynamic!" By which he meant the chapter buttons I spent hours creating from the existing code. Here's what he wants: the old code has an array, we'll call it someArray, that is assigned its values by the instructional developer as html pages are added to the course. So for example the code might look like this, Code: var someArray = new Array(4); someArray[0] = "video1/video1.html"; someArray[1] = "video2/video2.html"; someArray[2] = "video3/video3.html"; Now, each page has an associated chapter button. So video1/video1.html would have ch1Btn, video2/video2.html would have ch2Btn and so forth. Each button in turn calls a specific function which does only one thing - sets the currentPage variable to page associated with that button/array contents. For example, I have created the following functions to call each page: Code: function doCh1(){currentPage = 0; goToPage();} function doCh2(){currentPage = 1; goToPage();} function doCh3(){currentPage = 2; goToPage();} I should mention that all this is being done from within an html wrapper that calls each page into an iframe. The currentPage variable is assigned the url of one of the elements from the pageArray. My supervisor wants to be able to manually add pages to the pageArray and have the javascript code generate the associated buttons and function calls so when the learner clicks on one of the dynamically created buttons, s/he is taken to the correct page. Currently I'm using static images with the onclick calling the correct function to set my currentPage value and send the learner on his/her merry way. Is there a way to do all of this dynamically? If so, can you help me get my head around this by providing some examples? Sorry for the long post. Thank you, M Dear Forum Members HI, I am no coder, however I am modifying my website and changing the slideshow to the one found on this website, most wonderful, the Cut & Paste JavaScript Slideshow( http://www.javascriptkit.com/script/.../jsslide.shtml ) I have it working now, and I have but one question, does the code include a way to limit the number of times that it cycles through the slides? So it just freezes on one photo after x number of cycles? many thanks, and happy holidays... So here's my problem. I have a long list of buttons that I want to declare their onclick with values from an array. It looks something like this. It seems simple but obviously there's something that I'm not seeing that isn't allowing this to run.Here's what the code looks like Code: <html> <body> <form name="form1"> <input type="button" name="one"> <input type="button" name="two"> <input type="button" name="three"> </form> <script> function hello() { .... .... } goodbye = ["one","two","three"] for(i=0;i< 3; i++) { document.form1.goodbye[i].onclick=hello; } If anybody could help me out with this I would greatly appreciate it. Within my project, using PHP/HTML/Javascript, I am trying to set up a page where a corresponding submit button is enabled when a given checkbox is checked. What complicates my attempt is that the checkboxes and submit buttons are in the form of arrays. Here is a snippet of my code: Code: <form name="myform4" id="list_apps" method="post"> <?php for ($i=0; $i<$num_rows;$i++) { ?> <p> <input type="checkbox" name="app[]" id="app[]" onclick="enable_perm()"> <input name="set_perm[]" type="submit" id="set_perm[]" value="Set Permissions"> </p> <?php } </form> Here is my attempt at using Javascript to disable the first submit button after clicking any check box: Code: function enable_perm() { document.myform4.set_perm[0].disabled = true; } What am I missing here, or, how do I enable/disable submit buttons that are part of an array? hello, I created this program to hold 5 cd's and some information relating to them. I keep getting an error that says: cannot find symbol symbol : class ButtonListener location: class inventoryprogram.InventoryProgram ActionListener btnListen = new ButtonListener(); // create listener here is the part of code with the actionlistener in it [CODE] private JPanel createButtonPanel() { // begin method createButtonpanel method ActionListener btnListen = new ButtonListener(); // create listener // create button objects JButton nextButton = new JButton("Display Cd"); // create and label button nextButton.setActionCommand("Next"); // action command for click nextButton.addActionListener(btnListen); nextButton.addActionListener(this); JPanel panel = new JPanel(); panel.add(nextButton); // add next button to panel return panel; // return panel } // end method createButtonPanel [ICODE] Hi all, I'm having trouble getting the following right: Code: <IMG border="0" onMouseOver=this.src="home2.gif" onMouseOut=this.src="home.gif" onClick=this.src="home2.gif" SRC="home.gif"> The idea is that after somebody clicks it, the button will remain home2.gif, but ofcourse if u mouseout after the click it will return to home.gif. Can somebody please help me with this problem?! I'm not really good at js, so I've been struggling with this for quite a few days ! Thnx alot! Sjaroow I am working on a page where the user will select a location from a dynamically generated dropdown list. I was able to create the php multidimensional array (tested and working) from a MySql database using the users information at login, but I'm having problems converting it to a javascript multidimensional array. I need to be able to access variables that I can pass to a number of text fields within an html form. For instance, if a user belongs to a company with multiple addresses, I need to be able to let them select the address they need to prepopulate specific text fields. php array creation: Code: if ($row_locations) { while ($row_locations = mysql_fetch_assoc($locations)) { $mail[$row_locations['comp_id']]=array('mailto'=>$row_locations['mailto'], 'madd'=>$row_locations['madd'], 'madd2'=>$row_locations['madd2'], 'mcity'=>$row_locations['mcity'], 'mstate'=>$row_locations['mstate'], 'mzip'=>$row_locations['mzip'], 'billto'=>$row_locations['billto'], 'badd'=>$row_locations['badd'], 'badd2'=>$row_locations['badd2'], 'bcity'=>$row_locations['bcity'], 'bstate'=>$row_locations['bstate'], 'bzip'=>$row_locations['bzip']); } } javascript function - this should create the array and send variables to text fields. Code: function updateAddress() { var mail = $.parseJSON(<?php print json_encode(json_encode($mail)); ?>); { if (comp_id in mail) { document.getElementById('mailto').value=mail.comp_id.mailto.value; document.getElementById('madd').value=mail.comp_id.madd.value; document.getElementById('madd2').value=mail.comp_id.madd2.value; document.getElementById('mcity').value=mail.comp_id.mcity.value; document.getElementById('mstate').value=mail.comp_id.mstate.value; document.getElementById('mzip').value=mail.comp_id.mzip.value; } else { document.getElementById('mailto').value=''; document.getElementById('madd').value=''; document.getElementById('madd2').value=''; document.getElementById('mcity').value=''; document.getElementById('mstate').value=''; document.getElementById('mzip').value=''; } } } Where is this breaking? Thanks in advance. To be clear my approach to coding is basically that of building some kind of Java Frakenstein's Monster... which also explains why everything I create invariably ends up in a windmill on fire... This is what I have managed to put together so far: Code: <script type="text/javascript"> var homeDown = new Array() homeDown[0] = "images/home001.png"; homeDown[1] = "images/home002.png"; homeDown[2] = "images/home003.png"; homeDown[3] = "images/home004.png"; homeDown[4] = "images/home005.png"; homeDown[5] = "images/home006.png"; homeDown[6] = "images/home007.png"; homeDown[7] = "images/home008.png"; homeDown[8] = "images/home009.png"; homeDown[9] = "images/home010.png"; homeDown[10] = "images/home011.png"; homeDown[11] = "images/home012.png"; homeDown[12] = "images/home013.png"; homeDown[13] = "images/home014.png"; homeDown[14] = "images/home015.png"; var homeOver = new Array() homeOver[0] = "images/image001.png"; homeOver[1] = "images/image002.png"; homeOver[2] = "images/image003.png"; homeOver[3] = "images/image004.png"; var x=0; function NormalImage() { document.getElementById("button1").src="images/home.png"; } function MouseOver() { document.getElementById("button1").src=homeOver[x]; x++; setTimeout("MouseOver()", 8); } function MouseDown() { document.getElementById("button1").src=homeDown[x]; x++; setTimeout("MouseDown()", 8); } </script> ...and the HTML: Code: <a href="http://www.google.com"> <img id="button1" src="images/home.png" onmousedown="MouseDown(button1)" onmouseover="MouseOver(button1)" onmouseout="NormalImage(button1)"/> </a> I'm sure that's probably the wrong way of doing it but it vaguely works. What I ultimately want is a button that will play the long image sequence on click and the shorter sequence on mouse over. However at the moment it appears that the states of the mouse being over and clicked are clashing so I need something to ignore mouseover images on click and another bit to reset the count on mouseover so it can play again. If I remove the mouseover event the animation on mousedown plays well, though I suspect it might be necessary to preload the images when it's online. Alternatively if anyone feels like writing a much easier bit of script that will do the same thing and slap me for being stupid that is acceptable too... hello, Im trying to write a program when the user clicks on the button, the textbox should display "how are you ". This is what I tried : <html> <head> <title>"Click"</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <p> <input name="text1" type="text" id="text1" value="textbox 1" onFocus="this.style.background ='yellow'" onBlur="this.style.background='white'"> </p> <p> <input name="text2" type="text" id="text2" value="textbox 2" onFocus="this.style.background = 'yellow'" onBlur="this.style.background='white'"> </p> <p> <button onclick="textbox1.value="how are you">Click Me!</button> </p> </body> </html> I'm having trouble with a 3-state rollover with rollClick staying active for a series of buttons. Each button reveals it's own content within the same page. Here's a working example of what I have. The roll in and out works fine at first, but after the second click the images start getting jumbled together. Something to do with the lastClick code at the bottom I think. HTML-side my button images get class="rollover" and a unique id. Code: window.onload = rolloverInit; document.getElementsByClassName = function(cl) { var retnode = []; var myclass = new RegExp('\\b'+cl+'\\b'); var elem = this.getElementsByTagName('*'); for (var i = 0; i < elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) retnode.push(elem[i]); } return retnode; }; function rolloverInit(){ var rollOvers = document.getElementsByClassName("rollover"); for(var i=0; i<rollOvers.length; i++){ setupRollover(rollOvers[i]); } } function setupRollover(thisImage){ //UP thisImage.outImage = new Image(); thisImage.outImage.src = "images/" + thisImage.id + "1.gif"; thisImage.onerror = thisImage; thisImage.onmouseout = rollOut; //OVER thisImage.clickImage = new Image(); thisImage.clickImage.src = "images/" + thisImage.id + "2.gif"; thisImage.onerror = rollOut; thisImage.onmousedown = rollClick; //DOWN thisImage.overImage = new Image(); thisImage.overImage.src = "images/" + thisImage.id+"2.gif"; thisImage.onerror = rollOut; thisImage.onmouseover = rollOver; thisImage.onmouseup = rollOver; } function rollOver() { this.src = this.overImage.src; } function rollOut() { this.src = this.outImage.src; } function rollClick() { if(lastClick){ lastClick.onmouseout = rollOut; lastClick.src = this.outImage.src; } this.src = this.clickImage.src; this.onmouseout = rollClick; lastClick = this; } var lastClick = null; What I'd also like, since these buttons act as tabs, is for the first button to already be in the rollClick active state on page load (since that button's content is already displayed by default). Is this possible? Thanks for any help you can provide! 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> There has to be a way to do what I want to do but I'm fugged iif I know how. Here's the problem... A page has three frames - top, left and disp. Top and left contain a number of buttons that display another page in disp. All the buttons need to behave as one set of radio buttons; when a button is clicked any other button returns to the non-clicked state. The really awkward bit is there's an image in top that changes depending on the currently clicked button and that image is behind the buttons. Here it is in pseudocode of sorts. Code: On click button[n] Button[LastClicked].Image := Button[LastClicked].UnClickedImage; Button[n].Image := Button[n].ClickedImage; Top.Image := Button[n].TopImage; end; I hope that makes sense. If some kind soul has any idea of how to do that I'd be very grateful. Thanks. Simon. 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 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" /> Male <input class="radio" id="gender" name="gender" type="radio" value="Female" /> Female 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 Hi, I have buttons like these: PHP Code: <button type="button" onclick="izdas()">Iždas</button> <button type="button" onclick="miestas()">Miestas</button> <button type="button" onclick="map()">Žemėlapis</button> <button type="button" onclick="infantry()">Kariuomenė</button> <button type="button" onclick="biuld()">Statiniai</button> How I can add images on them?? Size would be 100x20px. Also, I would e thankful if someone would help me position them in one vertical line. Thanks in advance... how can i make a button that takes the user to the top of the page without the url#top being displayed in addy bar? i just dont like the way it looks thanks peeps |