JavaScript - Form Wont Send In Ie7, Validation Wont Work?
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> Similar TutorialsHi 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 Hey, First time poster... Apreciate any help here getting this thing to work (apoligise if its in the wrong section as it does cover php aswell) Problem is getting this form to work, it seems to go through ok, but it never makes it back to my mailbox. Its from a template that didnt explain how to get it to work. Codes.... the js in html head Code: <script type="text/javascript" src="js/forms.js"></script> the form html body Code: <form action="#" id="ContactForm"> <div class="success"> Contact form submitted!<br> <strong>We will be in touch soon.</strong> </div> <fieldset> <div class="wrapper"><label class="name"> <span class="bg"><input type="text" value="Name" class="input"></span> <span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span> </label></div> <div class="wrapper"><label class="email"> <span class="bg"><input type="text" value="Email" class="input"></span> <span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span> </label></div> <div class="wrapper"><label class="phone"> <span class="bg"><input type="tel" value="Phone" class="input"></span> <span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span> </label></div> <div class="wrapper"><label class="comment"> <span class="bg"><textarea rows="1" cols="1">Message</textarea></span> <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span> </label></div> <div class="btns relative"><a href="#" class="button1" data-type="reset"><img src="images/button_hover.png" alt=""><strong>Clear</strong></a><a href="#" class="button1" data-type="submit"><img src="images/button_hover.png" alt=""><strong>Submit</strong></a></div> </fieldset> </form> The Js code Code: (function($){ $.fn.extend({ forms:function(opt){ if(opt===undefined) opt={} this.each(function(){ var th=$(this), data=th.data('forms'), _={ errorCl:'error', emptyCl:'empty', invalidCl:'invalid', successCl:'success', successShow:'4000', mailHandlerURL:'submit.php', ownerEmail:'admin@bundesign.net', stripHTML:true, smtpMailServer:'localhost', targets:'input,textarea', controls:'a[data-type=reset],a[data-type=submit]', validate:true, rx:{ ".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'}, ".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'}, ".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'}, ".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'}, ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'}, ".comment":{rx:/.{20}/,target:'textarea'} }, preFu:function(){ _.labels.each(function(){ var label=$(this), inp=$(_.targets,this), defVal=inp.attr('value'), trueVal=(function(){ var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html() return tmp })() trueVal!=defVal &&inp.val(defVal=trueVal||defVal) label.data({defVal:defVal}) inp .bind('focus',function(){ inp.val()==defVal &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl)) }) .bind('blur',function(){ !inp.val() ?inp.val(defVal) :(_.isValid(label) ?_.showErrorFu(label) :_.hideErrorFu(label)), (_.isEmpty(label) ?_.showEmptyFu(label) :_.hideEmptyFu(label)) }) .bind('keyup',function(){ label.hasClass(_.invalidCl) &&_.isValid(label) ?_.showErrorFu(label) :_.hideErrorFu(label) }) label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide() }) _.success=$('.'+_.successCl,_.form).hide() }, isValid:function(el){ var ret=true, empt=_.isEmpty(el) if(empt) ret=false, el.addClass(_.invalidCl) else $.each(_.rx,function(k,d){ if(el.is(k)) d.rx.test(el.find(d.target).val()) ?(el.removeClass(_.invalidCl),ret=false) :el.addClass(_.invalidCl) }) return ret }, isEmpty:function(el){ var tmp return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal') }, validateFu:function(){ _.labels.each(function(){ var th=$(this) _.isEmpty(th) ?_.showEmptyFu(th) :_.hideEmptyFu(th) _.isValid(th) ?_.showErrorFu(th) :_.hideErrorFu(th) }) }, submitFu:function(){ _.validateFu() if(!_.form.has('.'+_.invalidCl).length) $.ajax({ type: "POST", url:_.mailHandlerURL, data:{ name:$('.name input',_.form).val()||'nope', email:$('.email input',_.form).val()||'nope', phone:$('.phone input',_.form).val()||'nope', fax:$('.fax input',_.form).val()||'nope', state:$('.state input',_.form).val()||'nope', comment:$('.comment textarea',_.form).val()||'nope', owner_email:_.ownerEmail, stripHTML:_.stripHTML }, success: function(){ _.showFu() } }) }, showFu:function(){ _.success.slideDown(function(){ setTimeout(function(){ _.success.slideUp() _.form.trigger('reset') },_.successShow) }) }, controlsFu:function(){ $(_.controls,_.form).each(function(){ var th=$(this) th .bind('click',function(){ _.form.trigger(th.data('type')) return false }) }) }, showErrorFu:function(label){ label.find('.'+_.errorCl).slideDown() }, hideErrorFu:function(label){ label.find('.'+_.errorCl).slideUp() }, showEmptyFu:function(label){ label.find('.'+_.emptyCl).slideDown() _.hideErrorFu(label) }, hideEmptyFu:function(label){ label.find('.'+_.emptyCl).slideUp() }, init:function(){ _.form=this _.labels=$('label',_.form) _.preFu() _.controlsFu() _.form .bind('submit',function(){ if(_.validate) _.submitFu() else _.form[0].submit() return false }) .bind('reset',function(){ _.labels.removeClass(_.invalidCl) _.labels.each(function(){ var th=$(this) _.hideErrorFu(th) _.hideEmptyFu(th) }) }) _.form.trigger('reset') } } if(!data) (typeof opt=='object'?$.extend(_,opt):_).init.call(th), th.data({cScroll:_}), data=_ else _=typeof opt=='object'?$.extend(data,opt):data }) return this } }) })(jQuery) the php ( this is possibly where the problem lies, but i assume it goes hand in hand with the JS, is reason why i posted it here as the js seemed really complex. Code: <?php $myemail = "admin@bundesign.net"; $name = $_POST["name"]; $email = $_POST["email"]; $comment = $_POST["comment"]; $phone = $_POST["phone"]; $from = "Bundesign Web <admin@bundesign.net>"; $subject = "Bundesign Web"; $message .= "$name <br> $email <br> $phone <br> $comment"; mail($myemail, $subject, $message,); ?> submit.php is located in the root and also i stuck it in the js folder just in case thats where it was looking. Thanks for any help, Chris. Problem solved, thanks for looking.
hey all, what it says in the title, this block of code wont work and i dont know why. the first prompt box appears but not the "can vote, but can't drink" reply. can anyone offer any ideas? <!DOCTYPE html> <html> <head> <title>legal age</title> <script type="text/javascript"> var your_age = prompt("how old are you?"); if ((age > 18) && (age < 21)) { document.writeln("can vote, but can't drink."); } </script> </body> </html> kind regards, Redd . This will work in firefox but not IE. Any alternative I am new to coding and not sure how to do this. Code: <div id="leftnav"> <ul> <li><a href="home.html"><img src="home1.gif" onmouseover="document.homeb.src='home2.gif';" onmouseout="document.homeb.src='home1.gif';" id= "homeb" alt="home1"></a></li> <li><a href="striping.html"><img src="striping.gif" alt="striping" id="striping" onmouseover= "document.striping.src='striping2.gif';" onmouseout="document.striping.src='striping.gif';"> </a></li> <li><a href="design.html"><img src="design.gif" alt="design" id="design" onmouseover= "document.design.src='design2.gif';" onmouseout= "document.design.src='design.gif';"></a></li> <li><a href="lettering.html"><img src= "lettering.gif" alt="lettering" id="lettering" onmouseover= "document.lettering.src='lettering2.gif';" onmouseout= "document.lettering.src='lettering.gif';"></a></li> <li><a href="contact.html"><img src="contact.gif" alt="contact" id="contact" onmouseover= "document.contact.src='contact2.gif';" onmouseout= "document.contact.src='contact.gif';"></a></li> </ul> </div> http://www.dyn-web.com/tutorials/iframes/refs.php I dont get it hello! i created a javascript for opening a page on a new window and added it on an html file. i then used the said html file as the source of my iframe on a joomla page. but the javascript isnt working. any help? the said iframe is called Scroll News on this page: http://dumplingdesigns.freehostia.com/ thanks in advance! Hi, any help with this would be very much appreciated. Apologies for cross-posting. I think I ut this in the wrong place to begin with. I have a script containing functions to change an image from clicking a button or changing the selection in a combobox. The buttons either request that the next image in the array is called or the previous, depending on the button. The combo box changes to the chosen image. The script works fine for me in firefox and safari but I can't get it to work in ie and aftermany hours I can't see any reason why. As far as I can work out the problem with the script is in the changeImage function while trying to set the new image. Code: document.images['priceImg'] = followingImg; document.images['priceImg'].src = followingSrc; Thanks in advance. The following is the script: Code: var followingImg; var followingSrc; var presentImg; var presentSrc; var count = 0; // Create an array of price list page images and locations var numImages = 8; var pimages=new Array(); pimages[0]=new Image(); pimages[0].src="../images/priceList/price_walls.jpg"; pimages[1]=new Image(); pimages[1].src="../images/priceList/price_nestle.jpg"; pimages[2]=new Image(); pimages[2].src="../images/priceList/price_franco.jpg"; pimages[3]=new Image(); pimages[3].src="../images/priceList/price_ben1.jpg"; pimages[4]=new Image(); pimages[4].src="../images/priceList/price_ben2.jpg"; pimages[5]=new Image(); pimages[5].src="../images/priceList/price_ron.jpg"; pimages[6]=new Image(); pimages[6].src="../images/priceList/price_cartridge_9654.jpg"; pimages[7]=new Image(); pimages[7].src="../images/priceList/price_sun1.jpg"; pimages[8]=new Image(); pimages[8].src="../images/priceList/price_sun2.jpg"; // Retrieves the current image from the image element function getCurImage() { if (document.images) { presentImg = document.images['priceImg']; presentSrc = document.images['priceImg'].src; var curId = 0; // Loops through pimages array to find which image is currently being displayed for (i=0;i<pimages.length;i++) { if (pimages[i].src == presentSrc) { curId = i; } } return curId; } } //**************************// // I think this is where it has trouble // //**************************// // Sets the new image function changeImg() { document.images['priceImg'] = followingImg; document.images['priceImg'].src = followingSrc; } // Called by 'next' button. // Calls getCurrentImg then chooses the next image then calls changeImg. function slideItForward() { var curID = getCurImage(); if (count == 0) { followingImg = pimages[0]; followingSrc = pimages[0].src; count++; } else { // Add one to current image id for next image var nextId = (curID + 1); if (nextId <= numImages) { followingImg = pimages[nextId]; followingSrc = pimages[nextId].src; // If at end of images stay on same page } else { followingImg = document.images['priceImg']; followingSrc = document.images['priceImg'].src; } } // display new image changeImg(); setText(nextId); } // Called by 'previous' button. // Calls getCurrentImg then chooses the next image then calls changeImg. function slideItBackward() { var curID = getCurImage(); // take one from current image id for next image var nextId = (curID - 1); if (nextId >= 0) { followingImg = pimages[nextId]; followingSrc = pimages[nextId].src; // If at start of images stay on same page } else { followingImg = document.images['priceImg']; followingSrc = document.images['priceImg'].src; } // display new image changeImg(); setText(nextId); } // Called by optionbox "newPage". // Takes users choice and displays it. function choosePage(page) { if (page == 1) { // Retrieve combobox option and its value var index = document.getElementById('newPageOne').selectedIndex; var newId = document.getElementById('newPageOne').options[index].value; } else { // Retrieve combobox option and its value var index = document.getElementById('newPageTwo').selectedIndex; var newId = document.getElementById('newPageTwo').options[index].value; } // Convert string to int newId = parseInt(newId); // If new id is default setting do nothing if (newId == 0) { return; // Else choose the image from the pimages array and call changeImg } else { // Changes value to accomodate for value vs array position newId = (newId - 1); followingImg = pimages[newId]; followingSrc = pimages[newId].src; // display new image changeImg(); document.getElementById("newPageOne").value = (newId+1); document.getElementById("newPageTwo").value = (newId+1); } } // Changes the text in the combobox function setText(id) { id = id + 1; document.getElementById("newPageOne").value = id; document.getElementById("newPageTwo").value = id; //document.getElementsByName('newPage').value = id; } The following is the relevent section of the html: Code: <input style="margin-bottom:10px; margin-top: 20px" type="button" name="PreBut" value="Previous" onclick="slideItBackward();" /> <input style="margin-bottom:10px" type="button" name="nxtBut" value="Next" onclick="slideItForward();" /> <select style="margin-bottom:10px" name="newPage" id="newPageOne" onchange="choosePage(page = 1);"> <option value="1"> Walls </option> <option value="2"> Nestle, Treats and Cadburies Impulse </option> <option value="3"> Franco, Mars and Ijsboerke Impulse </option> <option value="4"> Bennets Scooping </option> <option value="5"> Bennets Scooping Cont.. </option> <option value="6"> Individual tubs and Ice cream cartridges </option> <option value="7"> Ronaldo Ice creams and Sorbets </option> <option value="8"> Sundries, Cones, etc </option> <option value="9"> Sundries, Cones, etc Cont.. </option> </select> <center> <div id="price-display"> <img src="../images/priceList/price_img1.jpg" id="priceImg" name="priceImg" alt="Robertos Ice cream wholesale pricelist" ></img> </div> </center> <input style="margin-top: 10px" type="button" name="preBut" value="Previous" onclick="slideItBackward();" /> <input type="button" name="nxtBut" value="Next" onclick="slideItForward();" /> <select name="newPage" id="newPageTwo" onchange="choosePage(page = 2);"> <option value="1"> Walls </option> <option value="2"> Nestle, Treats, Cadburies Impulse </option> <option value="3"> Franco, Mars Ijsboerke Impulse </option> <option value="4"> Bennets Scooping </option> <option value="5"> Bennets Scooping Cont.. </option> <option value="6"> Individual tubs and Ice cream cartridges </option> <option value="7"> Ronaldo Ice creams and Sorbets </option> <option value="8"> Sundries, Cones, etc </option> <option value="9"> Sundries, Cones, etc Cont.. </option> </select> HTML: Code: <!-- video player begin --> <div id="playerHolder"> <div class="player" id="playerDiv"> <div id="playerwidget"></div> <div id="adCompanionBanner" style="visibility:hidden;"></div> </div> </div> In firefox, I type Code: javascript:document.getElementById("player").sendEvent(''SEEK", 0); into the Address bar and hit enter. Why doesn't it work? How do I correctly "seek" a video. Hi I can get both to work separately. If Iput the slideshow below the menu bar in the body it does not play if I put the slideshow first the menu bar does not appear Can anybody help please file uploaded. Im writing a piece of javascript that dynamically adds a link to a page, this is the code i'm using Code: var newP; newP = document.createElement("a"); newP.innerHTML = "Click here"; newP.setAttribute("href","http://mywebsite.com/link.html"); var p2 = document.getElementById("Div1"); p2.parentNode.insertBefore(newP,p2); However, it wont work?!?! the link appears in the right place on the page when i remove the line Code: newP.setAttribute("href","http://mywebsite.com/link.html"); and if i view the source the link is <a>Click here</a> (without any href) so there's got to be something wrong with that line but i don't know what it is. Can anyone help me? How do i add a href to the anchor?? I'm using firefox. I'm a real novice and out of my depth with this, i hope someone can help. I have a small script that searches a single page for a keyword, it works fine with IE, but will not work with Firefox. Below is the code thats checks which browser is running and the action to take. Code: var NS4 = (document.layers); var IE4 = (document.all); var win = window; var n = 0; function findInPage(str) { var txt, i, found; if (str == "") return false; if (NS4) { if (!win.find(str)) while(win.find(str, false, true)) n++; else n++; if (n == 0) alert("Not found."); } if (IE4) { txt = win.document.body.createTextRange(); for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) { txt.moveStart("character", 1); txt.moveEnd("textedit"); } Can anyone help me out with this problem. Many thanks Jasper Hi, I've created a gallery with multiple slideshows; each of them show/hide when you click on their corresponding link. The first slideshow appears when the page loads, but the others are hidden with a div style. It works great in most browsers, except Internet Explorer . For some reason, IE only shows part of the slideshows; the whole iframe is there, but only a small portion of the photos appear (although the slideshow itself also continue to run fine). I realized that the problem is the div style (style="display:none; ). When I remove it from all the slideshows, then they appear fully instead of partially in Internet Explorer. However, the purpose of hiding them is defeated, as they all show up at once when the page loads. I want to keep them all hidden until you click on their respective link to show them. The page can be viewed he www.raynemakerimages.com/galleries.html Firefox shows how it should display.... Anyway, I'm looking for a relatively easy fix for this....help is appreciated. Thanks. Coding: Code: <script type="text/javascript" language="JavaScript"> <!-- function HideContent(d) { document.getElementById(d).style.display = "none"; } function ShowContent(d) { document.getElementById(d).style.display = "block"; } function ShowContent(d) { if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } else { document.getElementById(d).style.display = "none"; } } //--> </script> The hide/show links: Code: <div align="center" class="class1"> <a href="javascript:ShowContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32"> <span class="class1">Family </span></a> | <a href="javascript:ShowContent('artistic'), HideContent('family'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32"> Artistic </a> | <a href="javascript:ShowContent('intimate'), HideContent('family'), HideContent('artistic'),HideContent('maternity'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32"> Intimate </a> | <a href="javascript:ShowContent('maternity'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('newborns'),HideContent('miscellaneous')" class="style1 style32"> Maternity </a> | <a href="javascript:ShowContent('newborns'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('miscellaneous')" class="style1 style32">Newborns </a> | <a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32"> Miscellaneous</a><a href="javascript:ShowContent('miscellaneous'), HideContent('family'), HideContent('artistic'),HideContent('intimate'),HideContent('maternity'),HideContent('newborns')" class="style1 style32"></a> </div> The slideshows: Quote: <table width="960" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image: url(images/bg3.jpg)"> <tr> <td> <div id="family"> <p align="center"><span class="style33">Family Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563240423&tags=Family" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> <tr> <td> <div id="intimate" style="display:none;"><p align="center"><span class="style33">Intimate Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563795631&tags=Intimate" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> <tr> <td > <div id="artistic" style="display:none;"><p align="center"><span class="style33">Artistic Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563696337&tags=Artistic" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> <tr> <td> <div id="maternity" style="display:none;"><p align="center"><span class="style33">Maternity Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996323&tags=Maternity" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> <tr> <td> <div id="newborns" style="display:none;"><p align="center"><span class="style33">Newborns Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625563996817&tags=Newborns" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> <tr> <td> <div id="miscellaneous" style="display:none;"><p align="center"><span class="style33">Miscellaneous Gallery</span><br /><iframe align="center" src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=57634260@N08&set_id=72157625689475348&tags=Miscellaneous" frameBorder="0" width="700" height="700" scrolling="no"></iframe><br/></p></div> </td> </tr> </table> 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. Any idea why my code will not add a row? Code: function addRow() { var tbl = document.getElementById('thetable'); var lastRow = tbl.rows.length; var row = tbl.insertRow(lastRow); var cell1 = row.insertCell(0); cell1.setAttribute('align','center') var input = document.createElement('input'); input.name = 'date' + lastRow; input.id = 'date' + lastRow; cell1.appendChild(input); var cell2 = row.insertCell(1); cell2.setAttribute('align','center') input = document.createElement('input'); input.name = 'goals' + lastRow; input.id = 'goals' + lastRow; cell2.appendChild(input); var cell3 = row.insertCell(1); cell3.setAttribute('align','center') input = document.createElement('input'); input.name = 'venue' + lastRow; input.id = 'venue' + lastRow; cell3.appendChild(input); var cell4 = row.insertCell(1); cell4.setAttribute('align','center'); input = document.createElement('select'); input.name = 'terrain' + lastRow; input.id = 'terrain' + lastRow; var s = "Road/Track/Multi Terrain/Cross Country".split("/"); for(var i=0;i<s.length;i++) { var o = document.createElement("option"); o.value = s[i]; o.text = s[i]; input.add(o); } cell4.appendChild(input); } window.onload = function() { var cell5 = document.getElementById("cell5"); cell5.setAttribute('align','center'); input.name = 'distance' + lastRow; input.id = 'distance' + lastRow; var input = document.createElement("select"); var s = "3000m/5000m/10,000m/5 Miles/10 Miles/20 Miles/Half Marathon/Marathon /Other".split("/"); for(var i=0;i<s.length;i++) { var o = document.createElement("option"); input.options[i] = new Option(s[i], s[i]); } cell5.appendChild(input); } } function delRow() { var tbl = document.getElementById('thetable'); var lastRow = tbl.rows.length; if (lastRow > 2) tbl.deleteRow(lastRow - 1); } </script> 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 hi I created a forloop and that runs fine, but it wont run any code after the loop finishes. I've tryed playing around with it but nothing I do will make it display the alert. Heres the problem code: Code: function price() { var price=0; for(var i=1; i<=15; i++) { if(document.form.partPrice[i].value == "price" == false) { price+=Number(document.form.partPrice[i].value); alert("test"); } } //wont run any code after here alert(price); } I'm not sure whats wrong, its probably something small that im overlooking but I just cant find whats wrong thanks in advance! My function the_magnitude() takes in values from 4 different asp:textboxes. The textboxes "easting" and "northing" contain numbers that don't change, but the textboxes "east" and "north" contain numbers inputed by the user, and the function returns "error" as a value to be put into another textbox that we'll call "error box". So what it's suppose to do is when I update the information in either "east" or"north" it will update, on change, the number in the "error box". It kinda works. My problem is that if the number is a value that changes the style to red, #ff0000, in the function it wont update the "error box" and it just leaves a red zero that is a default number in the box. The only way I can get the number to change is if I end up with a number less than 200, which would make the text green. I'm pretty sure it's a problem with my javascript. here is my function Code: <script type="text/javascript"> function the_magnitude(easting, east, northing, north, error) { var a = easting.value; var b = east.value; var c = northing.value; var d = north.value; var total = Math.sqrt(((a - b) * (a - b)) + ((c - d) * (c - d))); if (total > 200) { document.getElementById('TextBox155').style.color = "#ff0000"; document.getElementById('TextBox155').style.fontWeight = "bold"; } else { document.getElementById('TextBox155').style.color = "#008000"; document.getElementById('TextBox155').style.fontWeight = "bold"; error.value = roundNumber(total); } } </script> and here are the two buttons that I input numbers into for east and north Code: <html> <body> <asp:TextBox ID="TextBox153" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif; font-size: small; text-align: center" Width="0.75in" onchange="the_magnitude(document.getElementById('TextBox153'), document.getElementById('TextBox212'), document.getElementById('TextBox154'), document.getElementById('TextBox213'), document.getElementById('TextBox155'))" ></asp:TextBox> </body> </html> Code: <html> <body> <asp:TextBox ID="TextBox153" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif; font-size: small; text-align: center" Width="0.75in" onchange="the_magnitude(document.getElementById('TextBox153'), document.getElementById('TextBox212'), document.getElementById('TextBox154'), document.getElementById('TextBox213'), document.getElementById('TextBox155'))" ></asp:TextBox> </body> </html> and here is the textbox that I want the return of the function to go into. Code: <html> <body> <asp:TextBox ID="TextBox155" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif; font-size: small; text-align: center" Width="0.5in">0</asp:TextBox> </body> </html> Hi I have a CMS system using Tinymce and after making some alterations noticed the updates weren't showing up. After much messing (sql, set up etc) I started to delete the content bits at a time and came to the conclusion that is was the character ' as in what's any ideas why this is and how to solve it i'm thinking its due to php code! Cheers |