|
JavaScript - How Come This Form Validation Wont Work
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 Similar TutorialsHi 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>
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 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>
Problem solved, thanks for looking.
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. 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> 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. 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. http://www.dyn-web.com/tutorials/iframes/refs.php I dont get it 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> Can 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>
Hello all, new here Seems like a very nice place to be apart of. I have my website www.gebcn.com. If you view source you will see all that I have done, but more importantly my problem. I have the JS code at the top there and I am unable to W3C validate my HTML because of the JS. I am using XHTML strict and would like to stay using it. The JS I have at the top is my form validation code. I am able to do any validating that I need with this "snippet" of code, I have shrank it from my library version just to use for this newsletter. Until now W3C validating was not important now for some reason it is and I am faced with this problem. I am not a Javascript guy more of a HTML/CSS guy and I can manipulate JS to suit my needs. <problem> I have tried to make this "snippet" of JS code an external file but receive multiple errors with the JS calling for the FORM NAME as it is not on the same page. The form NAME=NEWSLETTER is another problem, as W3C says I am unable to use attribute "NAME" in this location. <problem> I would like to keep the JS close to how it is now as I have a library to use this JS over and over again. Any pointers in the right direction or solutions to my problem would be greatly appreciated. Thanks! Hopefully it is not to hard huh If there is anything anyone needs, the code pasted here, or anything else please let me know. Thanks again! ...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 Validation is here - http://jquery.bassistance.de/validate/demo/ - JGrowl is here - http://stanlemon.net/projects/jgrowl.html - How can I get those 2 to work so that a Jgrowl window is activated when a validation from a form is called? I have 2 bucks to give for an answer in my Paypal account - I'm a newb, bare with me Thanks, Jon I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
Hi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html>
<head>
<script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "simple"
});
</script>
<script language="javascript">
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
function err_check(){
var email = document.getElementById('to_email').value;
if(email.length==0){
alert('Please Enter Email Address');
return false;
}
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
email = document.getElementById('cc_email').value;
if(email.length != 0){
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
}
var answer = confirm ("Send E-Mail?");
if (!answer){
return false;
}
}
</script>
<!-- /TinyMCE -->
<style type="text/css">
body, table, td, th{
background-color:#CCCCCC;
font-family: Arial;
font-size:14px;
}
.que{
font-weight:bold;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<?php
include 'library/database.php';
include 'library/opendb.php';
$query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$from_email = $row[0];
$from_person = $row[1];
$from_mobile = $row[2];
$query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error());
$row = mysql_fetch_row($query);
$cusid = $row[0];
$query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$toer = $row[0];
include 'library/closedb.php';
?>
<table width="100%" border="0">
<tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr>
<tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr>
<tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr>
<tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr>
<tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td>
</tr>
<tr>
<td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td>
<td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr>
<tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td>
<td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr>
<tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr>
<tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
<?php
echo "<br><br><br>" . $from_person . "<br>" . $from_mobile;
?>
</textarea>
</td></tr>
</table>
</form>
</body>
</html>
|
|||||||