Javascript Calculator Issue with Array - javascript

I'm trying to build a proof of concept using an example I came up with to show how we can implement JavaScript within Sharepoint by building a calculator.
Everything seems to be fine but I'm giving myself a headache trying to figure out why everything is either undefinied or NaN.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
function calc (form) {
var multipliers = [ 0.5, 0.25, 0.10, 0.05, 100, 50 ];
var bonus;
var imyindex = form.level.value-1;
if (form.level.value < 5)
{
bonus = (((form.salary.value * multipliers[imyindex]) * form.profit.value) * form.growth.value);
}
else bonus = multipliers[imyindex];
alert (multipliers[imyindex]);
alert (imyindex);
alert ("Your bonus is " + bonus);
}
</script>
</head>
<body>
<table width="161" border="-1">
<tr>
<td width="85%"><form id="form" name="form" method="get" action="">
<p>
<label for="level">Level: </label>
<select name="level" id="level">
<option value=”1”>A</option>
<option value=”2”>B</option>
<option value=”3”>C</option>
<option value=”4”>D</option>
<option value=”5”>E</option>
<option value=”6”>F</option>
</select>
</p>
<p>
<label for="salary">Salary: </label>
<input type="text" name="salary" id="salary" />
</p>
<p>
<label for="salary">Profit: </label>
<input name="profit" type="text" id="profit" value=".25" />
</p>
<p>
<label for="salary">Growth: </label>
<input name="growth" type="text" id="growth" value=".75" />
</p>
<p>
<center>
<INPUT TYPE="button" NAME="button" Value="Calculate" onClick="calc(this.form)"/>
</p>
</form></td>
</tr>
</table>
</body>
</html>

You have smart quotes around your <option> values. This is causing the value to be ”1” rather than just 1, and that's throwing your calculations way off.

You are using the wrong type of quotes. Perhaps you are using another text editor which introduced the curly quotes: ”.
This quotes make the the value selected to be ”1” rather than 1, therefore it is being mistakenly being marked as text, and therefore causing var imyindex = form.level.value-1; to equal NaN.
Replace the curly quotes to double " or single ' quotes, and your problem should be solved.

Here is the working code : You can't send form as a object to the function on click and the option shouldn't have string value or you could use parseInt to convert them to the integer
otherwise the working example is here live just use :)
http://jsfiddle.net/ALJ6W/

I'm the developer of software called Appizy that avoid headaches while creating calculators. Basically it transforms a OpenDocument spreadsheet into HTML+CSS+JS..
You just have to create your calculator on OpenOffice or LibreOffice. Then Appizy turns it instantly into a stand-alone web app.
I hope it can help you to solve your issue !
Best,
Nicolas

Related

Select the value of a form - JavaScript

I am new to JavaScript and I am trying to understand HOW the code works.
In my form I have two inputs:
First Name: which has to be filled by the user
Countries: which has to be selected by the user (but the countries are already there)
Once the user click the "Add this destination" button, it should appear his name plus the destination he has chosen.
I understand why the "destination" appears.
HOWEVER I do not understand HOW the first name can be passed if the form is empty. Even if I write something in "first name", its value is not passed into the result string I want to display.
My questions are two:
1) Why is not my code working?
2) MORE IMPORTANTLY: how the browser (?) understands that there has been a change in the filed of "first name" from empty to be filled with a name/string?
var x;
var destination = document.myTravelForm.destination.value;
var firstName = document.myTravelForm.firstname.value;
x = document.getElementById("banana").addEventListener("click", function() {
document.getElementById("travelerInfo").innerHTML = firstName + " you chose: " + destination
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> Welcone to the booking site </h1>
<h4> Please, choose a destination </h4>
<form name="myTravelForm">
<label> First name: </label><br>
<input type="text" name="firstname" id="firstname" /><br>
<br>
<select name="destination">
<option value="Antarctica" selected>Antarctica</option>
<option value="Costa Rica">Costa Rica</option>
</select>
<input type="button" value="Add this destination" id="banana" />
</form>
<div id="travelerInfo"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
You need to get the form values when you are clicking on the button, if you get them before click, you will get their initial values. Try something like this:
var x;
x = document.getElementById("banana").addEventListener("click", function() {
var destination = document.myTravelForm.destination.value;
var firstName = document.myTravelForm.firstname.value;
document.getElementById("travelerInfo").innerHTML = firstName + " you chose: " + destination;
});
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> Welcone to the booking site </h1>
<h4> Please, choose a destination </h4>
<form name="myTravelForm">
<label> First name: </label><br>
<input type="text" name="firstname" id="firstname" /><br>
<br>
<select name="destination">
<option value="Antarctica" selected>Antarctica</option>
<option value="Costa Rica">Costa Rica</option>
</select>
<input type="button" value="Add this destination" id="banana" />
</form>
<div id="travelerInfo"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Matheus Pitz answered your first question fine, the variables are initialzed at the beginning of the script where they are undefined.
As for your second question how does the browser understand that there has been a change. The browser has several build in technologies that work together to allow this.
First your HTML documents are parsed by a browser and it will show a Javascript model of it which consists of various nodes. This is called the DOM (document object model).
The browser has all sorts of built in JS functions to manipulate the DOM and thus manipulate the view. For example:
document.getElementById("travelerInfo").innerHTML = 'test';
getElementById() Is an example of such a method which allows you to access a DOM node and perform various operations on it.
Hopefully this was helpful and I would strongly suggest you to read MDN article about the DOM. This will increase your understanding and make you a better developer.
For first part:
Because you're getting the value before it's event entered
Put that code inside your click callback.
2nd part
I don't really understand what do you mean by "How does browser...". You just get the value out of input
var destination = document.myTravelForm.destination;
var firstName = document.myTravelForm.firstname
document.getElementById("banana").addEventListener("click", function() {
document.getElementById("travelerInfo").innerHTML = firstName.value + " you chose: " + destination.value
});
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> Welcone to the booking site </h1>
<h4> Please, choose a destination </h4>
<form name="myTravelForm">
<label> First name: </label><br>
<input type="text" name="firstname" id="firstname"/><br>
<br>
<select name="destination">
<option value="Antarctica" selected>Antarctica</option>
<option value="Costa Rica">Costa Rica</option>
</select>
<input type="button" value="Add this destination" id="banana"/>
</form>
<div id="travelerInfo"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Why do my JavaScript calls not work in a form after switching the doctype to HTML5

I have a form that uses JavaScript to reveal additional fields depending on user selections. The code worked fine using the XHTML 1.1 doctype (not my choice... lame school project guidelines), but after switching to the HTML5 doctype nothing works. The only way I can get any JavaScript to work inside the form is to put it directly in the onchange="" setting; just adding the function call there will not work. I've tried event listeners also, and that doesn't work either.
For simplicity's sake I'm only showing code for one of the dynamic fields:
<!DOCTYPE html>
<html><head>
<?php include "phpself.php"; ?>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
document.getElementById("visitor").addEventListener("change", function(ev) {
Visitor();
});
function Visitor() {
var visitor = document.getElementById("visitor").value;
if (visitor=="Other") {
var othertext="<label>What would you consider yourself?</label><br/><input type="text" name="other_visitor" id="other_visitor"/>";
document.getElementById("vother").innerHTML=(othertext);
}
}
</script>
</head><body>
<form action=\"".getPHPSelf()."\" enctype="text/plain" method="post" onsubmit="return FormValid();" >
<fieldset style="width=50%;">
<legend>Comments</legend>
<label>I am a:</label>
<select name="visitor" id="visitor" onchange="Visitor();">
<option value="" disabled selected style="display:none;">select...</option>
<option value="Friend">Friend</option>
<option value="Client">Client</option>
<option value="Other">Other</option>
</select>
<br/><br/><div id="vother"></div>
<input type="submit" value="Submit"/><input type="reset" value="Reset"/>
</fieldset>
</form>
</body></html>
I'm aware that other people have asked similar questions, but none of the answers I've found work for me.
I verified some issues in your code:
this line is not valid (syntax error):
var othertext="<label>What would you consider yourself?</label><br/><input type="text" name="other_visitor" id="other_visitor"/>";
You should escape the double quotes, or replace them with single quotes.
This will work:
var othertext = "<label>What would you consider yourself?</label><br/><input type=text name='other_visitor' id='other_visitor' />";
Get rid of the inline onchange="Visitor(); binder or the document.getElementById("visitor").addEventListener. You should choose one of the approachs.
move your <script> tag to the bottom of your body (just before </body>). Or wrap your code into DOMContentLoaded event (IE9+).
(optional). You don't need parenthesis around (othertext) here:
document.getElementById("vother").innerHTML = (othertext);
Working code: https://jsfiddle.net/mrlew/txk11m6c/
You should put your script at bottom like given below or use window.onload.
<!DOCTYPE html>
<html><head>
<?php include "phpself.php"; ?>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head><body>
<form action=\"".getPHPSelf()."\" enctype="text/plain" method="post" onsubmit="return FormValid();" >
<fieldset style="width=50%;">
<legend>Comments</legend>
<label>I am a:</label>
<select name="visitor" id="visitor" onchange="Visitor();">
<option value="" disabled selected style="display:none;">select...</option>
<option value="Friend">Friend</option>
<option value="Client">Client</option>
<option value="Other">Other</option>
</select>
<br/><br/><div id="vother"></div>
<input type="submit" value="Submit"/><input type="reset" value="Reset"/>
</fieldset>
</form>
<script type="text/javascript">
document.getElementById("visitor").addEventListener("change", function(ev) {
Visitor();
});
function Visitor() {
var visitor = document.getElementById("visitor").value;
if (visitor=="Other") {
var othertext="<label>What would you consider yourself?</label><br/><input type="text" name="other_visitor" id="other_visitor"/>";
document.getElementById("vother").innerHTML=(othertext);
}
}
</script>
</body></html>
Here's my two cents:
<!DOCTYPE html>
<html><head>
<?php include "phpself.php"; ?>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() { // ~ F I X ~ Run code when the rest of page is done loading instead of immediately when browser reads it. This is a very common problem I've noticed newbies have with JS
document.removeEventListener("DOMContentLoaded",this); // Remove event after it's served purpose
document.getElementById("visitor").addEventListener("change", Visitor); // Also removed redundant function, Visitor can already be called by itself
function Visitor() {
var visitor = document.getElementById("visitor").value;
if (visitor=="Other") {
var othertext="<label>What would you consider yourself?</label><br/><input type=\"text\" name=\"other_visitor\" id=\"other_visitor\"/>"; // Backslashed quotations that were clearly meant to be included part of string
document.getElementById("vother").innerHTML=(othertext);
}
}
});
</script>
</head><body>
<form action=\"".getPHPSelf()."\" enctype="text/plain" method="post" onsubmit="return FormValid();" >
<fieldset style="width=50%;">
<legend>Comments</legend>
<label>I am a:</label>
<select name="visitor" id="visitor">
<option value="" disabled selected style="display:none;">select... </option>
<option value="Friend">Friend</option>
<option value="Client">Client</option>
<option value="Other">Other</option>
</select>
<br/><br/><div id="vother"></div>
<input type="submit" value="Submit"/><input type="reset" value="Reset"/>
</fieldset>
</form>
</body></html>

When I click on "convert" it won't do anything

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript">
//This is gobal array for currency and exchange rate which are used in this web page
var strCurrency=['Yen','US Dollar','Euro','Swiss Frank','Danish Korona'];
var dblExchangeRate=[128.7,1.59,1.15,2.06,9.69];
//this function will allow the user to see if their currency covert
function Currency()
{
//collect information from text boxes and combo box
var txtSterling=document.getElementById("txtSterling")
var sleCurrency=document.getElementById("cmbCurrency")
var txtCovert=document.getElementById("txtCovert")
var cmbCurrency=document.getElementById("cmbCurrency")
//this will make sure text box is empty from the start
txtCovert.value='';
//this will check to see when the user enter in numbers is vaild and there are no characters
if (isNaN(txtSterling.value))
{
txtSterling.value='';
alert('Please enter in numerical value only');
txtSterling.focus();
return;
//this will check the index of cmbCurrency and display the new currency coverstion in txtCovert. This is done by multiplying txtSterling by exchange rate for the new currency
var strSlectCurrency= cmbCurrency.selectedIndex;
var strCurrency= cmbCurrency.options[strSlectCurrency].text;
txtCovert.value= (txtSterling.value * dblExchangeRate[strSlectCurrency]).toFixed(2) + '' + strCurrency;
}
}
</script>
<body>
<h1 align="center">Money Currency Converter</h1>
<p align="left"> </p>
<p align="left">Please enter in the amount you wish to covert £
<input type="text" name="txtSterling" id="txtSterling"/>
</p>
<p align="left">Please select a currency
<select name="cmbCurrency" id="cmbCurrency" onChange="Currency()">
<option>Euro</option>
<option>US Dollar</option>
<option>Swiss Frank</option>
<option>Danish Korona</option>
<option>Yen</option>
</select>
</p>
<p align="left">
<input type="button" name="cmdCurrency" id="cmdCurrency" value="Convert" onCr65trfg5trrfrfd87lick="Currency()" />
</p>
<p align="left">
<input type="text" name="txtCovert" id="txtCovert" />
</p>
</body>
</html>
Why does nothing happen when I click "Convert", despite the fact that I have set an event handler on the button?
onCr65trfg5trrfrfd87lick should read onclick.
There are several things wrong with this code:
onCr65trfg5trrfrfd87lick should read onclick.
if (isNaN(txtSterling.value)) should be if (isNaN(parseInt(txtSterling.value,10))), since the former co-erces the empty string ("") to 0, which is not NaN. Your error handling block won't work without this change. Note also that this will not allow the user to write complex strings like "1,000". Improving this is left as an exercise to the reader.
You've put all your code into the empty string handling block. Even once this block is fixed, your code will be broken.
Your arrays strCurrency and dblExchangeRate do not match the order of currencies in the dropdown box, so the values are wrong.
The Danish currency is the Krone, not the Korona (which is a misspelt alcoholic beverage).
You've also misspelt "convert" in a few places.
Here's the fixed version (though IMO it still has style problems that are out of the scope of this question):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript"><!--
//This is gobal array for currency and exchange rate which are used in this web page
var strCurrency=['Yen','US Dollar','Euro','Swiss Frank','Danish Krone'];
var dblExchangeRate=[128.7,1.59,1.15,2.06,9.69];
//this function will allow the user to see if their currency covert
function Currency() {
//collect information from text boxes and combo box
var txtSterling=document.getElementById("txtSterling")
var sleCurrency=document.getElementById("cmbCurrency")
var txtCovert=document.getElementById("txtCovert")
var cmbCurrency=document.getElementById("cmbCurrency")
//this will make sure text box is empty from the start
txtCovert.value='';
//this will check to see when the user enter in numbers is vaild and there are no characters
if (isNaN(parseInt(txtSterling.value, 10))) {
txtSterling.value='';
alert('Please enter in numerical value only');
txtSterling.focus();
return;
}
//this will check the index of cmbCurrency and display the new currency coverstion in txtCovert. This is done by multiplying txtSterling by exchange rate for the new currency
var strSlectCurrency= cmbCurrency.selectedIndex;
var strCurrency= cmbCurrency.options[strSlectCurrency].text;
txtCovert.value= (txtSterling.value * dblExchangeRate[strSlectCurrency]).toFixed(2) + ' ' + strCurrency;
}
//--></script>
<body>
<h1 align="center">Money Currency Converter</h1>
<p align="left"> </p>
<p align="left">Please enter in the amount you wish to covert £
<input type="text" name="txtSterling" id="txtSterling"/>
</p>
<p align="left">Please select a currency
<select name="cmbCurrency" id="cmbCurrency" onChange="Currency()">
<option>Yen</option>
<option>US Dollar</option>
<option>Euro</option>
<option>Swiss Frank</option>
<option>Danish Krone</option>
</select>
</p>
<p align="left">
<input type="button" name="cmdCurrency" id="cmdCurrency" value="Convert" onClick="Currency()" />
</p>
<p align="left">
<input type="text" name="txtCovert" id="txtCovert" />
</p>
</body>
</html>
See it working here.
Hope this helps.
Your if block is wrong. It should be
if (isNaN(txtSterling.value))
{
txtSterling.value='';
alert('Please enter in numerical value only');
txtSterling.focus();
return;
}
//this will check the index of cmbCurrency and display the new currency coverstion in txtCovert. This is done by multiplying txtSterling by exchange rate for the new currency
var strSlectCurrency= cmbCurrency.selectedIndex;
var strCurrency= cmbCurrency.options[strSlectCurrency].text;
txtCovert.value= (txtSterling.value * dblExchangeRate[strSlectCurrency]).toFixed(2) + '' + strCurrency;

Passing html values into javascript functions

I was making a javascript function in which I need to confirm the input. I wrote the following code but its giving negative value i.e. "else" part even if i enter a valid value. Can some one please suggest a solution?
Html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript App</title>
<script type="text/javascript" src="app1.js">
</script>
</head>
<body><h1 id="heading1" style="text-align:center; height:auto; width:auto; font-family:'Arial Black', Gadget, sans-serif">Determinant of a nxn matrix</h1>
<p id="paragraph1" style="font-family:'Arial Black', Gadget, sans-serif"> This program allows you to compute the determinant of a nxn matrix</p>
<p>
Input the order of the matrix
<br />
<input type="text" maxlength="3" name="value" />
<input type="button" value="submit" onclick="verifyorder(value)" />
</p>
<p id="error"></p>
<p id="detspace"></p>
</body>
</html>
Javascript File:
function verifyorder(order){
;
if(order>0){
return true;
}
else{
alert("Sorry, you need to enter a positive integer value, try again");
document.getElementById('error').innerHTML="Sorry, you need to enter a positive integer value, try again";
}
}
Give the textbox an id of "txtValue" and change the input button declaration to the following:
<input type="button" value="submit" onclick="verifyorder(document.getElementById('txtValue').value)" />
Here is the JSfiddle Demo
I changed your HTML and give your input textfield an id of value. I removed the passed param for your verifyorder function, and instead grab the content of your textfield by using document.getElementById(); then i convert the str into value with +order so you can check if it's greater than zero:
<input type="text" maxlength="3" name="value" id='value' />
<input type="button" value="submit" onclick="verifyorder()" />
</p>
<p id="error"></p>
<p id="detspace"></p>
function verifyorder() {
var order = document.getElementById('value').value;
if (+order > 0) {
alert(+order);
return true;
}
else {
alert("Sorry, you need to enter a positive integer value, try again");
document.getElementById('error').innerHTML = "Sorry, you need to enter a positive integer value, try again";
}
}
Simply put id attribute in your input text field -
<input type="text" maxlength="3" name="value" id="value" />
Try: if(parseInt(order)>0){....

Validating Dates in Javascript with Unusual Form Field Ids - Salesforce.com Web-To-Case Integration

Ok, I need help. This is my first question here.
Background:
I am working on a charity project, and my portion of the project is to build the Web-To-Case functionality with Salesforce.com. Salesforce.com, if you were unaware, gives its software away free to qualified non-profits. Anyway, the Web-To-Case feature in Salesforce.com generates an HTML form that, when submitted, will send the data back to Salesforce.com and create a ticket. The IDs for the form elements are strings of numbers and letters that would appear to correspond to the fields in Salesforce.com.
Goal:
I was trying to build in validation of the dates on a particular form because we found out that unless the dates were formatted just so (12/30/2009 12:00 PM), anything the user entered would not make it into Salesforce.com
Problem:
Found a script online (javascript) and modified it to suit my needs. Problem - it does not work. I get a little error in the corner of the browser but it doesn't stop the form from going through (it also doesn't validate) - "Expected ')'" on line 16.
I would love to attach the code here...I hope that's OK. Normally I would cut out only the relevant bits but I fear that people would then say "Hey this will never work - you don't have a closing HTML tag" or whatnot. I'm not sure if it will paste well - it came from a .htm file and the HTML may be interpreted by this forum and that would be...well...not ideal! Okay, I think I figured out how to escape it but there was so much to escape that I cut out most of the comments and most of the truly irrelevant things..
You can see how the form field ids are all funky - most of the examples I saw had straightforward form ids and names...so I wondered if Javascript just can't deal with strings starting with digits as id/names on fields.
I'm also wondering - because I can't verify it by testing since it's not working for other reasons - if my regular expression comes anything close to the date format I specified above. I had to make up my own regular expression since I didn't find anything out in the world like what I wanted.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cambridge Cares About AIDS: Request an Asset</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
<SCRIPT LANGUAGE="JavaScript"> // Original JavaScript code by Chirp Internet: www.chirp.com.au // Please acknowledge use of this code by including this header. //Code modified to validate a date/time field by Shannon Davis, Company Name Removed.
function checkDates(form)
{
checkDate(form.00N80000003LGJ5);
checkDate(form.00N80000003LGNt);
}
function checkDate(field)
{
var allowBlank = false;
var minYear = (new Date()).getFullYear();
var maxYear = 2100;
var errorMsg = "";
// regular expression to match required date format
re = /^(\d{1,2})\/(\d{1,2})\/(\d{4})\s(\d{1,2}):(\d{2})+\s([ap]m)+$/;
if(field.value != '') {
if(regs = field.value.match(re)) {
if(regs[1] < 1 || regs[1] > 12) {
errorMsg = "Invalid value for day: " + regs[1];
} else if(regs[2] < 1 || regs[2] > 31) {
errorMsg = "Invalid value for month: " + regs[2];
} else if(regs[3] < minYear || regs[3] > maxYear) {
errorMsg = "Invalid value for year: " + regs[3] + " - must be between " + minYear + " and " + maxYear;
}
} else {
errorMsg = "Invalid date format: " + field.value;
}
} else if(!allowBlank) {
errorMsg = "Empty date not allowed!";
}
if(errorMsg != "") {
alert(errorMsg);
field.focus();
return false;
}
return true;
}
</SCRIPT>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
</head>
<BODY>
<div id="container">
<div id="top_photo">
<img src="images/ccaa_banner.jpg" alt="banner" width="800" height="181" />
</div>
<div id="left_colum" style="width: 200; height: 256"><a href="index.html">
<img src="images/cca_logo.gif" alt="logo" border="0" width="178" height="84" /></a>
<p class="address">Cambridge Cares About AIDS<br />17 Sellers Street<br /> Cambridge, MA 02139<br />617.661.3040</p>
<br />
</div>
<div id="right_colum">
<div id="content">
<form id="form" name="form" action="https://www.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST">
<input type=hidden name="orgid" value="00D80000000M3if">
<input type=hidden name="retURL" value="http://wilmwebtest/CCAA/thank_you.htm">
<table border=0>
<tr><TD><label for="email">CCA Email:*</label></TD><td><input id="email" maxlength="80" name="email" size="40" type="text" /><br> </td></tr>
<tr>
<td><label for="subject">Subject:</label></td><td><input id="subject" maxlength="80" name="subject" size="40" type="text" /><br></td>
</tr>
<tr><td>
<label for="description">Description*</label></td>
<td>
<textarea name="description" rows="4" cols="25"></textarea><br></td>
</tr><tr>
<input type="hidden" name="recordType" id="recordType" value="0012800000006ZWz">
<tr> <td colspan="2">
<p>Date Format: mm/dd/yyyy hh:mm am/pm<br>example: "08/30/2009 12:00 am"</td></tr>
<tr><td>When Needed (Start):*</td>
<td><input id="00N80000003LGJ5" name="00N80000003LGJ5" size="40" type="text" /></span><br></td></tr>
<tr>
<td>
When Needed (End):<span class="dateInput">*</td>
<TD>
<input id="00N80000003LGNt" name="00N80000003LGNt" size="40" type="text" /></span><br></td>
</tr>
</table>
<input type="hidden" id="external" name="external" value="1" /><br>
<input type="submit" name="submit" value="Submit Asset Request" onClick="checkDates (this.form);" >
</form>
</div>
</div>
<div id="clearit">
</div>
</div>
</body>
</html>
Your checkDate function is correct. The problem is in your checkDates function. Javascript doesn't like variables that begin with numbers. Change it to:
function checkDates(form)
{
checkDate(form.elements['00N80000003LGJ5']);
checkDate(form.elements['00N80000003LGNt']);
}
and it should work as intended.
Also, in order for an invalid date to cancel the form from being submitted, you must change your submit button's onClick attribute to:
onclick="return checkDates( this.form )"
Otherwise, the form will be submitted no matter what.
On a side note, the error message you mention sounds like a classic 'WTF?' Internet Explorer error message. Consider upgrading to the latest version of IE (IE8), which has much better error messages than the previous versions, or using Firefox. Firefox's Error Console is second to none when it comes to tracking down Javascript (and CSS) errors.

Categories

Resources