JavaScript - Need Help With Getting This Form To Work Properly
Ultimately, when the user inputs their name in a text field, choose their age from a select list, and choose the amount of hours they sleep via radio button and when they hit the submit button it is supposed to calculate the amount of years they've slept their entire life. Any hints or clues why this isn't working would be greatly appreciated.
Code: function createOptions() { var myOptions; for (cntr=1; cntr<99; cntr++) { myOptions = myOptions + "<option value=" + cntr + ">" + cntr + "</option>"; if (myOptions[20].selected) { switch(myOptions[20].value) } } } function someFunction() { var myTextElement = document.getElementById("name"); var myValue = myTextElement.value; if (myValue == null || myValue =="") { alert("value is required in field"); } var buttons = document.getElementById("hours"); if (document.getElementById("r7").checked) { myHours = 7; } if (document.getElementById("r8").checked) { myHours = 8; } if (document.getElementById("r9").checked) { myHours = 9; } if (document.getElementById("r6").checked) { myHours = 6; } var mySelect = document.getElementById('age').selectmySelect.options; for (var i = 0; i < mySelect.length; i++) { if (mySelect[i].selected) { switch(mySelect[i].value) { case "1" : mySelect[i + 1].selected = true; break; case "2" : mySelect[i + 1].selected = true; break; case "3" : mySelect[i + 1].selected = true; break; } } } mySelect.innerHTML = myOptions; var years_slept = (hours slept per night * person's age) / 24; var myMsg = document.getElementById("mymsg"); } Similar TutorialsCan someone please help me with my validation! I am a novice at Javascript and have started only learning it now as its a part of my course. I know its too long but i just put in the whole thing as the error might be anywhere. Code: <html> <head> <meta name="author" content="Trev - Cert IV in IT- Networking" /> <title>Univeristy Registration Form</title> <script language="javascript" type="text/javascript"> function Mainfunc() { var Fname = new Object(); var fn = new String(); Fname = document.getElementById ("text1"); fn=Fname.value; var Mname = new Object(); var mn = new String(); Mname = document.getElementById ("text2"); mn=Mname.value; var Lname = new Object(); var ln = new String(); Lname = document.getElementById ("text3"); ln=Lname.value; var Radd = new Object(); var radd = new String(); Radd = document.getElementById ("tarea1"); radd=Radd.value; var Dd = new Object(); var dd = new String(); Dd = document.getElementById ("text4"); dd=Dd.value; var ddd = parseInt (dd,10); if (dd!=ddd) { alert ("Please enter your Date of Birth!"); return false; } var Mm = new Object(); var mm = new String(); Mm = document.getElementById ("text5"); mm=Mm.value; var mmm = parseInt (mm,10); if (mm!=mmm) { alert ("Please enter your Month of Birth!"); return false; } var Yy = new Object(); var yy = new String(); Yy = document.getElementById ("text6"); yy=Yy.value; var yyy = parseInt (yy,10); if (yy!=yyy) { alert ("Please enter your Year of Birth!"); return false; } var Rphone = new Object(); var rp = new String(); Rphone = document.getElementById ("text7"); rp=Rphone.value; var rpp = parseInt (rp,10); if (rp!=rpp) { alert ("Please enter a valid Phone number!"); return false; } var Mphone = new Object(); var mp = new String(); Mphone = document.getElementById ("text8"); mp=Mphone.value; var mpp = parseInt (mp,10); if (mp!=mpp) { alert ("Please enter a valid Mobile number!"); return false; } var Course = new Object(); var course = new String(); Course = document.getElementById ("text9"); course=Course.value; var rad1; rad1=document.getElementById("radio1"); var rad2; rad2=document.getElementById("radio2"); var sel=document.getElementById("dept").value; var radgender; var chk1 = false; var chk2 = false; var chk3 = false; var rad1chk = false; var rad2chk = false; var genderpic; var chkbox1 = new Object(); chkbox1=document.getElementById("check1"); var chkbox2 = new Object(); chkbox2=document.getElementById("check2"); var chkbox3 = new Object(); chkbox3=document.getElementById("check3"); chk1 = chkbox1.checked; chk2 = chkbox2.checked; chk3 = chkbox3.checked; rad1chk = rad1.checked; rad2chk = rad2.checked; if ((rad1chk==false)&&(rad2chk==false)) { alert("Please select a gender!"); return false; } else if (rad1chk==true) { radgender = "Male"; document.write("<html>"); document.write("<head>"); document.write("<body bgcolor='aqua'>"); if ((chk1==true) && (chk2==false) && (chk3==false)) { document.write("<p style='font-family:arial black;color:blue;font-size:16px'> You have selected Campus A </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==false) && (chk2==true) && (chk3==false)) { document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus B </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==false) && (chk2==false) && (chk3==true)) { document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus C </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==true) && (chk2==true) && (chk3==false)) { document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus A and B </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==true) && (chk2==false) && (chk3==true)) { document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus A and C </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==false) && (chk2==true) && (chk3==true)) { document.write("<p style='font-family:arial black;color:blue;font-size:16px>You have selected Campus B and C </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==true) && (chk2==true) && (chk3==true)) { document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You have selected Campus A,B and C </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==false) && (chk2==false) && (chk3==false)) { alert("Please select a campus"); } genderpic=document.write("<img src='E:/modifying/tf.jpg'>"); document.write("<br/>"); document.write("<p style='font-family:arial black;color:blue;font-size:16px'>You are a: " + radgender + "</p>"); document.write("<br/>"); if ((fn=" ")||(mn=" ")||(ln=" ")) { alert("Please Enter your Full Name!"); return false; } else if ((fn!=" ")&&(mn!=" ")&&(ln!=" ")) { document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your full name is: " + fn + " " + mn + " " + ln + "</p>"); document.write("<br/>"); } document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your date of birth is: " + dd + "/" + mm + "/" + yy + "</p>"); document.write("<br/>"); if (radd=" ") { alert("Please enter Your Address!"); return false; } else if (radd!=" ") { document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your Residential Address is: " + radd + "</p>"); document.write("<br/>"); } document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your telephone number is: " + rp + "</p>"); document.write("<br/>"); document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your Mobile number is: " + mp + "</p>"); document.write("<br/>"); document.write("<p style='font-family:arial black;color:blue;font-size:16px'>Your department is: " + sel + "</p>"); document.write("<br/>"); if (course=" ") { alert("Please Enter the Name of your Course!"); return false; } else if (course!=" ") { document.write("<p style='font-family:arial black;color:blue;font-size:16px'>The name of your course is: " + course + "</p>"); document.write("<br/>"); } document.write("<a id='bktoform1' style='font-family:arial black;color:blue;font-size:16px' href='G:/modifying/registration_form_Trevlyn_Farrar_Yes.html' >Click here to go to the form (previous page) using hyperlink</a>"); document.write("<p id='bktoform2' style='font-family:arial black;color:blue;font-size:16px' onclick='window.history.back()'>Click here to go to the form (previous page) by just clicking this text</p>"); document.write("</body>"); document.write("</head>"); document.write("</html>"); } else { radgender = "Female"; document.write("<html>"); document.write("<head>"); document.write("<body bgcolor='pink'>"); if ((chk1==true) && (chk2==false) && (chk3==false)) { document.write("<p style='font-family:arial narrow;color:red;font-size:16px'> You have selected Campus A </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==false) && (chk2==true) && (chk3==false)) { document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus B </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==false) && (chk2==false) && (chk3==true)) { document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus C </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==true) && (chk2==true) && (chk3==false)) { document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus A and B </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==true) && (chk2==false) && (chk3==true)) { document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus A and C </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==false) && (chk2==true) && (chk3==true)) { document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus B and C </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==true) && (chk2==true) && (chk3==true)) { document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You have selected Campus A,B and C </p>"); document.write("<br/>"); document.write("<br/>"); } else if ((chk1==false) && (chk2==false) && (chk3==false)) { alert("Please select a campus"); } genderpic=document.write("<img src='E:/modifying/ms.jpg'>"); document.write("<br/>"); document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>You are a: " + radgender + "</p>"); document.write("<br/>"); if ((fn=" ")||(mn=" ")||(ln=" ")) { alert("Please Enter your Full Name!"); return false; } else if ((fn!=" ")&&(mn!=" ")&&(ln!=" ")) { document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your full name is: " + fn + " " + mn + " " + ln + "</p>"); document.write("<br/>"); } document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your date of birth is: " + dd + "/" + mm + "/" + yy + "</p>"); document.write("<br/>"); if (radd=" ") { alert("Please enter Your Address!"); return false; } else if (radd!=" ") { document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your Residential Address is: " + radd + "</p>"); document.write("<br/>"); } document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your telephone number is: " + rp + "</p>"); document.write("<br/>"); document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your Mobile number is: " + mp + "</p>"); document.write("<br/>"); document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>Your department is: " + sel + "</p>"); document.write("<br/>"); if (course=" ") { alert("Please Enter the Name of your Course!"); return false; } else if (course!=" ") { document.write("<p style='font-family:arial narrow;color:red;font-size:16px'>The name of your course is: " + course + "</p>"); document.write("<br/>"); } document.write("<a id='bktoform1' style='font-family:arial narrow;color:red;font-size:16px' href='G:/modifying/registration_form_Trevlyn_Farrar_Yes.html' >Click here to go to the form (previous page) using hyperlink</a>"); document.write("<p id='bktoform2' style='font-family:arial narrow;color:red;font-size:16px' onclick='window.history.back()'>Click here to go to the form (previous page) by just clicking this text</p>"); document.write("</body>"); document.write("</head>"); document.write("</html>"); } } </script> </head> <body> <script language="javascript" type="text/javascript"> var dt=new Date(); document.write("<p align='right'>"); document.write(dt ); document.write("</p>"); </script> <h1>Registration Form</h1> <form Name="Registration" ID="FORM1" action="" method=""> <table> <tr> <p> <td> 1. Select your gender</td> <td> <input type="radio" id="radio1" name="Gender" value="Male" /> Male <br /> <input type="radio" id="radio2" name="Gender" value="Female" /> Female <br /> </td> </p> </tr> <tr> <p> <td>2. First Name:</td> <td><input type="text" id="text1" name="Fname" value="" size="30" /></td> </p> </tr> <tr> <p> <td>3. Middle Name:</td> <td><input type="text" id="text2" name="Mname" value="" size="30"/></td> </p> </tr> <tr> <p> <td>4. Last Name:</td> <td><input type="text" id="text3" name="Lname" value="" size="30"/></td> </p> </tr> <tr> <p> <td>5. Date of Birth (dd/mm/yyyy):</td> <td><input type="text" id="text4" name="dd" value="" size="2"/>/ <input type="text" id="text5" name="mm" value="" size="2"/>/ <input type="text" id="text6" name="yy" value="" size="4"/></td> </p> </tr> <tr> <p> <td>6. Residential Address (Not P.O. Box) </td> <td><textarea rows="4" cols="40" id="tarea1"> </textarea><br /></td> </p> </tr> <tr> <p> <td>7. Residential Phone Number:</td> <td><input type="text" id="text7" name="Rphone" value="" /></td> </p> </tr> <tr> <p> <td>8. Mobile Phone Number:</td> <td><input type="text" id="text8" name="Mphone" value="" /></td> </p> </tr> <tr> <p> <td>9. Choose your campus: </td> <td><input type="checkbox" id="check1" name="Campus" value="A" />Campus A<br /> <input type="checkbox" id="check2" name="Campus" value="B" />Campus B<br /> <input type="checkbox" id="check3" name="Campus" value="C" />Campus C<br /></td> </p> </tr> <tr> <p> <td>9. Choose your Department:</td> <td><select id="dept"> <option value="Nothing. Please Select a department"> Choose an Option... </option> <option value="Applied and Physical Science"> Applied and Physical Science</option> <option value="Arts"> Arts</option> <option value="Business and Commerce"> Business and Commerce</option> <option value="Education"> Education</option> <option value="Humanities"> Humanities</option> <option value="Information Technology and Computing"> Information Technology and Computing</option> <option value="Mathematics"> Mathematics</option> <option value="Pharmaceutical Science and Medical Science"> Pharmaceutical Science and Medical Science</option> <option value="Theoretical Science"> Theoretical Science</option> </select></td> </p> </tr> <tr> <p> <td>10. Name of Course Enrolled in:</td> <td><input type="text" id="text9" name="Course" value="" size="70"/></td> </p> </tr> </table> <p> <input type="button" name="button1" id="Submit" value="Submit" /> <input type="reset" name="button2" id="button2" value="Reset" /> <input type="button" name="button3" id="Display" value="Display" onclick="Mainfunc()" > </p> </table> <a href="http://getfreestat.com" style="font-size:9px;">free hit counter</a><br><a href="http://getfreestat.com"><img src="http://getfreestat.com/count.php?c_style=69&id=1301322705" border=0 alt="free hit counter"></a><br> <h6 align="bottom">This Form was designed by Trevlyn Christopher Farrar</h6> </body> </html> ...only allow for users to enter in characters from A-Z? I have several small questions: 1) I have a validation function that allows for the user to navigate to the next webpage if they enter in all of the details correctly, then they can go to the Checkout. However, when I try it, what happens is that if the alert message about entering an invalid date appears and the user clicks on OK, then the confirmation message that is used to help the user navigate to the Checkout, when I do not want them to be able to override the validation. My coding is: Code: function ValidatePaymentDetails() { var cardnum=document.forms["payment"]["cardnumber"].value; var cardexp=document.forms["payment"]["cardexpirydate"].value; var cardsec=document.forms["payment"]["cardsecuritynumber"].value; var href="checkout.html"; if (((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec)))) { alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces"); } else if (((cardnum==null||cardnum=="")&&(cardexp==null||cardexp=="") && (cardsec==null||cardsec==""))) { alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values."); } else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp))) { alert("You have not entered any suitable values for the Card Number or Card Expiry Date fields. Enter in suitable values, possibly by removing any leading or trailing spaces"); } else if ((cardnum==null||cardnum=="")&&(cardexp==null||cardexp=="")) { alert("You have not entered any suitable values for the Card Number or the Card Expiry fields. Enter in suitable values."); } else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardsec))) { alert("You have not entered any suitable values for the Card Number or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces"); } else if((cardnum==null||cardnum=="")&&(cardsec==null||cardsec=="")) { alert("You have not entered any suitable values for the Card Number or the Card Security Number fields. Enter in suitable values."); } else if ((hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec))) { alert("You have not entered any suitable values for the Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces"); } else if((cardexp==null||cardexp=="")&&(cardsec==null||cardsec=="")) { alert("You have not entered any suitable values for the Card Expiry Date or the Card Security Number fields. Enter in suitable values."); } else if (hasWhiteSpace2(cardnum)) { alert("You have not entered in a suitable value for the Card Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces"); } else if(cardnum==null|| cardnum=="") { alert("You have not entered a suitable value for the Card Number field. Enter in a suitable value."); } else if (hasWhiteSpace2(cardexp)) { alert("You have not entered in a suitable value for the Card Expiry Date field. Enter in a suitable value, possibly by removing any leading or trailing spaces"); } else if(cardexp==null|| cardexp=="") { alert("You have not entered a suitable value for the Card Expiry Date field. Enter in a suitable value."); } else if (hasWhiteSpace2(cardsec)) { alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces"); } else if(cardsec==null|| cardsec=="") { alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value."); } else if (checknumber(cardnum)==false) { alert("You have not entered in a valid Card Number in the Card Number field. Make sure that it is in the 0000-0000-0000-0000 format and remove any leading or trailing spaces. Enter in a suitable value."); } else if (checksecnumber(cardsec)==false) { alert("You have not entered in a valid Card Security Number in the Card Security Number field. Make sure it is in the 000 format. Enter in a suitable value."); } else if (compareDate(cardexp)==true) { return true; } else { return contCheckout(); } } and the code for contCheckout() is: Code: function contCheckout() { var nav=confirm("Are you sure you want to continue your order and go to the Checkout? Click OK to continue or click on Cancel to make changes to your payment details until you are ready to continue"); if (nav===true) { location.href="checkout.html"; } else { location.href="#"; } } 2). This question is I would like a function so that only characters between A-Z can be inputted and possibly have a capital letter as only the first character. I'm sure that a regexp function will be needed, but I'm not entirely sure how to implement it 3) Final quick question, for some reason some of my alert boxes appear twice (i.e. the user clicks on OK, and then the alert box opens up again). Is there any quick fix for this? Any help is appreciated! Thanks Hi - would appreciate some help with this school project. I can't get this simple quiz to work correctly, it should give a pop-up with a pass/fail message on submit. Can anyone see the error? Instead of posting the whole code - the live version is here with all the code in the doc head... http://bit.ly/hR8JYk I have a form with a text box that is greyed out unless a checkbox is checked. The problem is if the checkbox is checked and this enables the text box to enter data and I hit reset, the text box does not reset and turn grey. It allows data to be entered. I have both the html reset button and the javascript clear form, but neither seem to work. How do I reset the text box to grey as well if reset is hit? Code: <form method="post" action="" name="resetproblemform" enctype="text/plain" onReset="return confirm('Do you really want to reset the form?')"> <div>Check Which Apply: LineTest1<input type="checkbox" name="status" value="1" style="margin-left:10px; margin-right:40px" onclick="this.form.line1test2.disabled = !this.checked;"/> Line1Test2<input type="text" name="line1test2" style="margin-left:10px; margin-right:67px" maxlength="9" disabled="disabled" size="9"/> </div> <div class="break10" style="margin-left:140px"> Line2Test1<input type="checkbox" name="status" value="3" style="margin-left:10px; margin-right:40px" onclick="this.form.line2test2.disabled = !this.checked;"/> Line2Test2<input type="text" name="line2test2" style="margin-left:10px; margin-right:67px" maxlength="9" disabled="disabled" size="9"/> </div> <div class="break10" style="margin-left:140px">Line3Test1<input type="checkbox" name="status" value="5" style="margin-left:10px"/> </div> <input type="submit" value="Submit" /> <input type="button" value="Reset JAVA" onClick="this.form.reset()" /> <input type="reset" value="Rest HTML" /> </form> the showUser function has ajax in it that calls a php file that accesses a db to perform some calculations. I wanted to use the clicked function to force required dropdowns to be selected but I cannot seem to get the submit button to do anything. It does nothing when you click it. Not sure how to proceed, have looked everywhere. If anyone has any advice I would really appreciate it. Code: <form id="forecastfilter" action="indexo_beats.php" method="get" onsubmit="clicked(this.value='yes')"> <div class="fc">Date:</div> <select name="date" onchange="showUser(this.value)"> <option value="">-- </option> <option value="Date: Past Hour">Past hour</option> <option value="Date: Past week">Past week</option> <option value="Date: Past month">Past month</option> <option value="Date: Past year">Past year</option> </select> <br /> <div class="fc">Wideouts:</div> <select name="wideouts" onchange="showUser(this.value)"> <option value="">-- </option> <option value="Wideouts: Higher">Revised Higher</option> <option value="Wideouts: Unchanged">Remains Unchanged</option> <option value="Wideouts: Lower">Revised Lower</option> </select> <br /> <div class="fc">QBs:</div> <select name="qbs" onchange="showUser(this.value)"> <option value="">-- </option> <option value="QBs: beat">Above Analyst Estimates</option> <option value="QBs: inline">Inline with Analyst Estimates</option> <option value="QBs: miss">Below Analyst Estimates</option> </select> <br /> <div class="fc">Football:</div> <select name="football" onchange="showUser(this.value)"> <option value="">-- </option> <option value="Football: beat">Above Analyst Estimates</option> <option value="Football: inline">Inline with Analyst Estimates</option> <option value="Football: miss">Below Analyst Estimates</option> </select> <br /> <div class="fc">Sentiment:</div> <select name="sentiment" onchange="showUser(this.value)"> <option value="">-- </option> <option value="Sentiment: good">Good</option> <option value="Sentiment: neutral">Neutral</option> <option value="Sentiment: bad">Bad</option> </select> <div class="searchbutton"> <input type="button" value="Search Draft" /> </div> </form> Hi guys I'm having trouble with my javascript coding. The form works fine in IE but does not work in firefox I've been pulling my hair out overt his for the last hour and can't figure it out. Code: <script type="text/javascript"> <!-- function validate_form ( ) { valid = true; if ( document.getElementById.rego_form.First_name.value == "" ) { //Alert the user to alert ( "Please fill in your first name." ); valid = false; } if ( document.getElementById.rego_form.Last_name.value == "" ) { //Alert the user to alert ( "Please fill in your last name." ); valid = false; } //Check Age if (parseInt(document.getElementById.rego_form.Age.value) < 16 || parseInt(document.rego_form.Age.value) > 90) { //Alert the user to alert ("Please enter an age between 16 and 90"); return false; } return valid; } //--> </script> This is the fields I would like them to enter into but when I do this in IE you can't click on the top 3 fields to enter data Code: <form name="rego_form" method="post" action="" onSubmit="return validate_form ( );"> <h1>Please Fill Out Your Details Below</h1> <p>Email: <input type="text" name="Email"></p> <p>First Name: <input type="text" name="First_name"></p> <p>Surame: <input type="text" name="Last_name"></p> <p>Age: <input type="text" name="Age"></p> <p>Address: <input type="text" name="Address"></p> <p>City: <input type="text" name="City"></p> <p>City: <input type="text" name="City"></p> <p><input type="submit" name="send" value="Send Details"></p> </form> Any help would be greatly appreciated! Hello everyone. My girlfriend wrote an electronic form with some Java script code. However some buttons don't work on IE (like the "submit and "default values" battens). Could someone please have a quick view and maybe tell me what should be changed? http://img2.timg.co.il/forums/1_142239233.txt Thanks Hi I have a form setup so that when you enter something in a text field and click a button it checks to see if the value entered in the text field is the "correct" letter and if its right it changes the CSS property of a div container to be shown which then has a link to a the next question. So I don't really have a submit button because my form isn't setup to work with one. This is fine by me but the only problem is when you enter a letter and click enter it acts as a submit and the submit does nothing, which is what it's suppose to do. So what I'm asking is how can I get that button to respond to an enter instead of the default submit taking over the enter key? Hi guys.. I cant figure out why the validation wont work on the form.. PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Cork Discos Mailing List</title> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/form_validation.js"></script> </head> <body> <div id="wrapper"> <div id="star1"> <div id="star2"> <div id="star3"> <div id="star4"> <div id="header"> <h1>Cork Discos Texting Service</h1> </div> <div id="content"> <form name="frm" action="index.html" method="POST" onsubmit="return validateForm()"> <table width="100%" border="0" cellspacing="2" cellpadding="3" class="mainForm"> <tr> <td class="normalText" align="left" style="padding:0px 0px 0px 33px"> <table border="0" cellspacing="3" cellpadding="2"> <tr> <td class="normalHeading" colspan="2" style="padding-bottom:6px"> <div id="error_msg" class="txtErrorMsg" align="center"></div> </td> </tr> <tr > <td class="normalText" width="30%">First Name</td> <td><input type="text" name="firstName" id="firstName" class="input1" style="width:195px" maxlength="10"/></td> </tr> <tr> <td class="normalText">Last Name</td> <td><input type="text" name="lastName" id="lastName" class="input1" style="width:195px" maxlength="10"/></td> </tr> <tr> <td class="normalText">Mobile</td> <td><input type="text" name="mobile" id="mobile" class="input1" style="width:195px" maxlength="10" onkeypress="return fnIsIntNumber(event,this);"/></td> </tr> <tr> <td class="normalText">Email</td> <td><input type="text" name="email" id="email" class="input1" style="width:195px" onblur="IsEmail(this.vlaue)"/></td> </tr> <!-- <tr> <td class="normalText">Date of Birth</td> <td> <select name="date1" style="width:43px"> <option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option><option value=11>11</option><option value=12>12</option><option value=13>13</option><option value=14>14</option><option value=15>15</option><option value=16>16</option><option value=17>17</option><option value=18>18</option><option value=19>19</option><option value=20>20</option><option value=21>21</option><option value=22>22</option><option value=23>23</option><option value=24>24</option><option value=25>25</option><option value=26>26</option><option value=27>27</option><option value=28>28</option><option value=29>29</option><option value=30>30</option><option value=31>31</option> </select> <select name="date2" style="width:43px"> <option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option><option value=11>11</option><option value=12>12</option> </select> <select name="date3" style="width:102px"> <option value=1955>1955</option><option value=1956>1956</option><option value=1957>1957</option><option value=1958>1958</option><option value=1959>1959</option><option value=1960>1960</option><option value=1961>1961</option><option value=1962>1962</option><option value=1963>1963</option><option value=1964>1964</option><option value=1965>1965</option><option value=1966>1966</option><option value=1967>1967</option><option value=1968>1968</option><option value=1969>1969</option><option value=1970>1970</option><option value=1971>1971</option><option value=1972>1972</option><option value=1973>1973</option><option value=1974>1974</option><option value=1975>1975</option><option value=1976>1976</option><option value=1977>1977</option><option value=1978>1978</option><option value=1979>1979</option><option value=1980>1980</option><option value=1981>1981</option><option value=1982>1982</option><option value=1983>1983</option><option value=1984>1984</option><option value=1985>1985</option><option value=1986>1986</option><option value=1987>1987</option><option value=1988>1988</option><option value=1989>1989</option><option value=1990>1990</option><option value=1991>1991</option><option value=1992>1992</option><option value=1993>1993</option><option value=1994>1994</option><option value=1995>1995</option><option value=1996>1996</option><option value=1997>1997</option><option value=1998>1998</option><option value=1999>1999</option><option value=2000>2000</option><option value=2001>2001</option><option value=2002>2002</option><option value=2003>2003</option><option value=2004>2004</option><option value=2005>2005</option><option value=2006>2006</option><option value=2007>2007</option><option value=2008>2008</option><option value=2009>2009</option><option value=2010>2010</option> </select> </td> </tr> <tr> <td class="normalText">Gender</td> <td valign="middle" valign="middle"> <input type="radio" name="gender" id="genderM" value="Male" /> Male <input type="radio" name="gender" id="genderFM" value="Female" checked/> Female </td> </tr> --> <tr> <td class="normalText">Comments</td> <td> <textarea name="comments" id="comments" cols="22" rows="3" ></textarea> </td> </tr> <tr> <td class="normalText"> </td> <td valign="middle"><input class="send" type="image" value="submit" src="images/submit.gif" name="submit"/></td> </tr> </table> </td> </tr> </table> </form> </div> </div> </div> </div> </div> </div> </body> </html> Here is the js PHP Code: var j = jQuery.noConflict(); function isValidEmail(str) { return (str.indexOf(".") > 2) && (str.indexOf("@") > 0); } function validateForm(){ var firstName; var lastName; var email; var mobile; var comment; var error; firstName = j('#firstName').val(); lastName = j('#lastName').val(); email = j('#email').val(); mobile = j('#mobile').val(); comment = j('#comments').val(); if(firstName=='' || firstName.length < 3){ error = 'Please Enter Your First Name'; j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(lastName=='' || lastName.length < 3){ error = 'Please Enter Your Second Name'; j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(email=='' || !isValidEmail(email)){ error = 'Please Enter Your Correct Email'; j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } //mob //$jmob_pattern = '^\d{10}$j'; if(mobile.length != 10 || isNaN(mobile)){ error = 'Please Enter Your Correct Mobile Number'; j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(comment.length < 10){ error = 'Please Enter A Comment More Than 10 Characters'; j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } return true; } Can anybody figure it out.. im trying it all morning Hi, doing form validation at college just now. The lecturer gave all of us this following example. But it doesn't seem to work in firefox. I have tried my own scripts and they seem to work so have no idea whats happening! Code: <html> <head> <title>Javascript validation program - limits field length and content</title> <script type="text/javascript"> function ValidateForm() { var msg=''; if(document.getElementById('CC').value=='') { msg+='- Please enter CC\n\n'; } else // Now test if CC is purely 2 capital letters... { var CC=RTrim(document.getElementById('CC').value); // alert(CC); if (CC.length==2) { if (isCHAR(CC)==false) { msg+=' - CC not solely 2 capital letters \n\n'; } } else msg+=' - CC not 2 letters in length \n\n'; } if(document.getElementById('NNNNNN').value=='') { msg+='- Please enter NNNNNN \n\n'; } else { // Now test if NNNNNN is purely 6 digits... var NIdigits=RTrim(document.getElementById('NNNNNN').value); if (NIdigits.length==6) { if (isInteger(NIdigits)==false) { msg+=' - NNNNNN not solely digits \n\n'; } } else msg+=' - NNNNNN not 6 digits in length\n\n'; } // Lastly check if the last field contains only 1 char if(document.getElementById('C').value=='') { msg+='- Please enter C \n\n'; } else // Now test if C is a single letter... { var C=RTrim(document.getElementById('C').value); if (C.length==1) { if (isCHAR(C)==false) { msg+=' - C not a capital letter \n\n'; } } else msg+=' C not 1 character in length'; } // alert(msg); if(msg!='') { //alert('Here...'); alert('The following fields are empty and/or invalid:\n\n'+msg); return false } else { return true } } function RTrim(str){ if (str==null){return null;} for(var i=str.length-1;str.charAt(i)==" ";i--); return str.substring(0,i+1); } //------------------------------------------------------------------- // isBlank(value) // Returns true if value only contains spaces //------------------------------------------------------------------- function isBlank(val){ if(val==null){return true;} for(var i=0;i<val.length;i++) { if ((val.charAt(i)!=' ')&&(val.charAt(i)!="\t")&&(val.charAt(i)!="\n")&&(val.charAt(i)!="\r")){return false;} } return true; } //------------------------------------------------------------------- // isInteger(value) // Returns true if value contains all digits //------------------------------------------------------------------- function isInteger(val){ if (isBlank(val)){return false;} for(var i=0;i<val.length;i++){ if(!isDigit(val.charAt(i))){return false;} } return true; } //------------------------------------------------------------------- // isCHAR(value) // Returns true if value contains all CHARS //------------------------------------------------------------------- function isCHAR(val){ if (isBlank(val)){return false;} for(var i=0;i<val.length;i++){ if(!isCAPlet(val.charAt(i))){return false;} } return true; } //------------------------------------------------------------------- // isDigit(value) // Returns true if value is a 1-character digit //------------------------------------------------------------------- function isDigit(num) { if (num.length>1){return false;} var string="1234567890"; if (string.indexOf(num)!=-1){return true;} return false; } //------------------------------------------------------------------- // isCAPlet(value) // Returns true if value is a 1-character letter //------------------------------------------------------------------- function isCAPlet(num) { if (num.length>1){return false;} var string="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; if (string.indexOf(num)!=-1){return true;} return false; } </script> </head> <body bgcolor="#FFFFFF"> <form action='http://10.205.3.202/Valid.php' method='POST' onsubmit='return ValidateForm();'> <H1>Validate NI No</H1> <p> NI-No : <INPUT TYPE="text" id='CC' NAME="CC" SIZE='2' maxlength='2' > - <INPUT TYPE="text" id='"NNNNNN"' NAME="NNNNNN" SIZE='6' maxlength='6' > <INPUT TYPE="text" id='C' NAME="C" SIZE='1' maxlength='1'> <p> <INPUT TYPE="submit" id='Process' value="Process" name="submit"> </form> </body> </html> Any help would be great. Hello fellow programmers, I am having some trouble with my javascript doing what I want it to, which is returning values (true/false || 1/0). I haven't used much javasript but I am experienced with C#, Java, Python etc so this is sort of new to me syntax wise. Here is what I have so far: http://jsfiddle.net/HpSyJ/1/ note: for some reason css doesn't like jsfiddle :S, the error messages are hidden in my Notepad++ & firefox combo though Really all I want is when I hit submit, it runs an alert or changes the error message to visible. Can someone please have a quick read over and see if anything jumps out at them? Thanks in advance, Andrew I wanted to know if document.getElementById works while accessing form elements. I tried doing this just for testing purposes This code doesnt work function validateForm() { var val = document.getElementById("id_login").getAttribute("value"); alert(val); return false; } but this does function validateForm() { alert(document.myForm.text_login.value ); return false; } Why doesnt document.getElementByid work with form objects.it works with all non form HTML objects.. Hi! I have encountered a problem with IE that I'm simply unable to solve. I have a form where the user can choose different things to input from a drop down list and depending on the choise, different kinds of textboxes of text areas etc. are loaded onto the page with JS. After the user has finished inputing text and submits the form, I read the input with PHP and process it further. Now, this works perfectly in firefox but IE doesn't seem to add the name properties to the elements (both textboxes and text areas) because PHP cannot find them and no info is printed from the input. The creation of the elements (adding them to the page...) works just fine, it's just getting the data from them that's the problem. Since it works in FF I know it's not a PHP problem. I've used the recommended .name to set the property (although I've also tried .setAttribute() etc), yet it still doesn't work. What can I do to solve this? My relevant JS code: Code: function addTextbox(idName, head) { var target = document.getElementById('addThings'); var newDiv = document.createElement("div"); newDiv.id = "container"; newDiv.name = "container"; newDiv.setAttribute("className", "intNew"); //IE newDiv.setAttribute("class", "intNew"); //FF var newTextbox = document.createElement("input"); newTextbox.type = "text"; newTextbox.id = idName; //-- newTextbox.name = idName; //Doesn't work in IE?.. newTextbox.setAttribute("className", "newWidth"); //IE newTextbox.setAttribute("class", "newWidth"); //FF var text = document.createTextNode(head + ":"); target.appendChild(newDiv); newDiv.appendChild(text); newDiv.innerHTML += "<br />"; newDiv.appendChild(newTextbox); newDiv.innerHTML += "<p />"; } (The text area function is the same, more or less) The PHP code, if anyone's interested: Code: if($_POST['createBtn']) { $head = $_POST['head']; //1 $intro = $_POST['intro']; //2 $question = $_POST['question']; //3 $answer = $_POST['answer']; //3 $image = $_POST['image']; //? $author = $_POST['author']; //5 $end = $_POST['end']; //4 //sammanfattning printHTMLTop(9); $today = date('Y-m-d'); $text = <<<END <div class="intContainer"> <div class="intHeadRow"><b>$head </b></div> <div class="stpdIEContainer"> <div class="intTextContainer"> <p /> $intro <p /> END; if($question != "" && answer != "") { foreach($question as $k) { $text .= $k . "<p />"; foreach($answer as $j) { $text .= $j . "<p />"; } } } $text .= <<<END <p /> $end <p /> <i>Skrivet av: $author den $today</i> </div> <!-- intTextContainer --> <div class="intImgContainer"> </div></div> <!-- stpdIEContainer --> </div> <!-- intContainer --> END; //Prints to new file (on server) $file = file_put_contents('interviews/interview01.html', $text); //Set name //Add to DB //print newly created file $page = file_get_contents('interviews/interview01.html'); echo $page; printHTMLBottom(); Hi Guys, im using chrome and ff and it worked fine till i tested on ie7 and the form just wont send on ie7. it gives me a validation error msg "SOME VALUES ARE NOT ACCEPTABLE" when i try to submit. ive tried so many things and i cant figure out why ie7 wont send upon submit like ff does, code seems to be fine, pls see validation coding line 7 - 32 , any jsGURU advice will be much appreciated! Code: <?php defined('_JEXEC') or die('Restricted access'); ?> <?php JHTML::_('behavior.formvalidation'); ?> <script language="javascript" type="text/javascript"> function submitbutton(pressbutton) { var form = document.adminForm; if (pressbutton == 'cancel') { submitform( pressbutton ); return; } // do field validation if (document.getElementById('jformfirstname').value == ""){ alert( "<?php echo JText::_( 'Firstname is missing.', true ); ?>" ); } else if (document.getElementById('jformsurname').value == ""){ alert( "<?php echo JText::_( 'Surname is missing.', true ); ?>" ); } else if (document.getElementById('jformemail').value == ""){ alert( "<?php echo JText::_( 'Email is missing.', true ); ?>" ); } else if (document.getElementById('jformphone1').value == ""){ alert( "<?php echo JText::_( 'Phone1 is missing.', true ); ?>" ); } else { if (document.formvalidator.isValid(form)) { submitform( pressbutton ); } else { alert("<?php echo JText::_( 'SOME VALUES ARE NOT ACCEPTABLE.', true ); ?>"); } } } </script> <?php if ($this->courseid){ ?> <?php if ( $this->params->def( 'show_page_title', 1 ) ) : ?> <div class="componentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>"> <?php echo $this->courseDetails->title; ?> </div> <?php endif; ?> <h3>Course Details</h3> <table cellSpacing=0 cellPadding=5 width="90%" border=0> <tr> <td width="20%"><?php echo JText::_( 'Course Title' ); ?>:</td> <td width="30%"><?php echo $this->courseDetails->title;?></td> <td width="20%"><?php echo JText::_( 'Code' ); ?>:</td> <td width="30%"><?php echo $this->courseDetails->code;?></td> </tr> <tr> <td><?php echo JText::_( 'Price' ); ?>:</td> <td><?php echo (number_format($this->courseDetails->price,2));?></td> <td><?php echo JText::_( 'No. of Days' ); ?>:</td> <td><?php echo $this->courseDetails->capacity;?></td> </tr> <tr> <?php if ($_GET['hide'] != 1 ) { ?> <td><?php echo JText::_( 'Location' ); ?>:</td> <td><?php echo $this->courseDetails->course_location;?></td> <?php } else { echo "<td> </td>"; echo "<td> </td>"; } ?> </tr> <tr> <?php if ($_GET['hide'] != 1 ) { ?> <td><?php echo JText::_( 'Start Date' ); ?>:</td> <td><?php echo Date('d-M-y', strtotime($this->courseDetails->start_date));?></td> <?php } else { echo "<td> </td>"; echo "<td> </td>"; } ?> </tr> </table> <?php } ?> <?php if ( $this->params->def( 'show_course_sessions', 1 ) && ($this->courseid) ) : ?> <h3>Sessions</h3> <table cellSpacing=0 cellPadding=5 width="90%" border=0> <tr> <td width="20%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>"> <?php echo JText::_('Day'); ?> </td> <td width="20%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>"> <?php echo JText::_('Start Time'); ?> </td> <td width="20%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>"> <?php echo JText::_('Finish Time'); ?> </td> <td width="10%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>"> <?php echo JText::_('Duration'); ?> </td> <td width="30%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>"> <?php echo JText::_('Location'); ?> </td> </tr> <?php $k = 0; $n=count( $this->course_sessions ); if ($n > 0){ for ($i=0, $n; $i < $n; $i++) { $row = &$this->course_sessions[$i]; ?> <tr> <td align="center"> <?php echo $row->session_day;?> </td> <td align="center"> <?php echo date('H:i', strtotime($row->start_time));?> </td> <td align="center"> <?php echo date('H:i', strtotime($row->finish_time));?> </td> <td align="center"> <?php echo $row->duration;?> </td> <td align="center"> <?php echo $row->session_location;?> </td> </tr> <?php $k = 1 - $k; } } else { ?> <tr> <td colspan="5"><? echo JText::_( 'There are no sessions for this course' );?></td></tr><?php } ?> </table> <?php endif; ?> <form action="<?php echo $this->action ?>" method="post" name="adminForm" id="adminForm" class="form-validate"> <?php if ( $this->params->def( 'show_page_title', 1 ) ) : ?> <div class="componentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>"> <?php echo $this->escape($this->params->get('page_title')); ?> </div> <?php endif; ?> <table cellpadding="4" cellspacing="1" border="0" width="100%"> <tr> <td width="15%"> <label for="jformcourseid"> <?php echo JText::_( 'Course' ); ?>: </label> </td> <td> <?php echo $this->lists['courseid'];?>* </td> </tr> <?php if ($_GET['hide'] == 1 ) { ?> <tr> <td valign="top"> <label for="jformcity"> <?php echo JText::_( 'I want to attend this course here' ); ?>: </label> </td> <td width="80%"> <select class="required" type="text" id="jformcountry" name="jform[country]" value="<?php echo $this->escape($this->booking->country);?>" />* <option>Choose your Location</option> <option>Melbourne</option> <option>Sydney</option> <option>Auckland</option> </select> </td> </tr> <?php } ?> <tr> <td valign="top"> <label for="jformfirstname"> <?php echo JText::_( 'Firstname' ); ?>: </label> </td> <td width="80%"> <input class="required" type="text" id="jformfirstname" name="jform[firstname]" size="50" maxlength="250" value="<?php echo $this->escape($this->booking->firstname);?>" />* </td> </tr> <tr> <td valign="top"> <label for="jformsurname"> <?php echo JText::_( 'Surname' ); ?>: </label> </td> <td valign="top"> <input class="required" type="text" id="jformsurname" name="jform[surname]" size="50" maxlength="250" value="<?php echo $this->escape($this->booking->surname);?>" />* </td> </tr> <?php if($this->userid > 0) { ?> <tr> <td valign="top"> <label for="jformusername"> <?php echo JText::_( 'Username' ); ?>: </label> </td> <td width="80%"> <input class="required" type="text" id="jformusername" name="jform[username]" size="50" maxlength="100" value="<?php echo $this->escape($this->username);?>" READONLY/>* </td> </tr> <?php } ?> <tr> <td valign="top"> <label for="jformdepartment"> <?php echo JText::_( 'Company' ); ?>: </label> </td> <td width="80%"> <input class="inputbox" type="text" id="jformdepartment" name="jform[department]" size="50" maxlength="30" value="<?php echo $this->escape($this->booking->department);?>" /> </td> </tr> <tr> <td valign="top"> <label for="jformemail"> <?php echo JText::_( 'Email' ); ?>: </label> </td> <td width="80%"> <input class="validate-email" type="text" id="jformemail" name="jform[email]" size="50" maxlength="100" value="<?php echo $this->escape($this->email);?>"/>* </td> </tr> <tr> <td valign="top"> <label for="jformphone1"> <?php echo JText::_( 'Phone Number' ); ?>: </label> </td> <td width="80%"> <input class="required" type="text" id="jformphone1" name="jform[phone1]" size="50" maxlength="20" value="<?php echo $this->escape($this->booking->phone1);?>" />* </td> </tr> <tr> <td valign="top"> <label for="jformcity"> <?php echo JText::_( 'Locations' ); ?>: </label> </td> <td width="80%"> <select type="text" id="jformcity" name="jform[city]" value="<?php echo $this->escape($this->booking->city);?>" /> <option>Choose your Location</option> <option>Melbourne</option> <option>Sydney</option> <option>Auckland</option> </select> </td> </tr> <tr> <td valign="top"> <label for="jforminstitution"> <?php echo JText::_( 'Referral Source' ); ?>: </label> </td> <td width="80%"> <select type="text" id="jforminstitution" name="jform[institution]" value="<?php echo $this->escape($this->booking->institution);?>" /> <option>How did you find out about us?</option> <option>Search Engine</option> <option>Friends</option> <option>Others</option> </select> </td> </tr> <tr> <td valign="top"> <label for="jformdescription"> <?php echo JText::_( 'Comments' ); ?>: </label> </td> <td> <textarea class="inputbox" cols="47" rows="6" id="jformdescription" name="jform[description]"><?php echo $this->escape( $this->booking->description);?></textarea> </td> </tr> </table> <div> <button type="button" class="button validate" onclick="submitbutton('save')"> <?php echo JText::_('Save') ?> </button> <button type="button" onclick="submitbutton('cancel')"> <?php echo JText::_('Cancel') ?> </button> </div> <input type="hidden" name="jform[id]" value="<?php echo $this->booking->id; ?>" /> <input type="hidden" name="jform[ordering]" value="<?php echo $this->booking->ordering; ?>" /> <input type="hidden" name="jform[approved]" value="<?php echo $this->booking->approved; ?>" /> <input type="hidden" name="jform[userid]" value="<?php echo $this->userid; ?>" /> <input type="hidden" name="option" value="com_courseman" /> <input type="hidden" name="controller" value="booking" /> <input type="hidden" name="task" value="" /> <?php echo JHTML::_( 'form.token' ); ?> </form> </br> Fields marked with an asterisk (*) are required. </br> </br> Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here. Code: function fade(obj, duration, toggle) { steps = 1000; elem = document.getElementById(obj); function fadeIn() { for(var i = 0; i <= 1; i+=(1/steps)) { setTimeout("elem.style.opacity = "+ i +"", i * duration); setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration); } } function fadeOut() { for(var i = 0; i <= 1; i+=(1/steps)) { setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration); setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration); } } /* One for Fade in and anything will be fade out*/ if(toggle == 1) { fadeIn(); } else { fadeOut(); } } Thanks, Jon W |