We help IT Professionals succeed at work.

java script function not working

der_23
der_23 asked
on
Below is my script that I used for creating form
but it doesn't work out quite right, I want to add the function that checks
that the phone textfeild are all numbers, the credit card feild are numbers with 16 characters.
I also want to add in the features that when the checkbox is ticked (the value that I set
for the checkbox is the price of each book), the value are added and the total is displayed
below as to how much it add up to.

And also in the name textfield that I have in my form, How can I put in the name of the
user from the cookie as its value.

all suggestions welcome.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function checkFields() {
missinginfo = "";
if (document.form.name.value == "") {
missinginfo += "\n     -  Name";
}

if (document.form.address.value == "") {
missinginfo += "\n     - Address";
}

if (document.form.phone.value == "") {
missinginfo += "\n     - Phone";
}

if (document.form.card.value == "") {
missinginfo += "\n     - Credit Card Number";
}

if ((document.form.from.value == "") ||
(document.form.from.value.indexOf('@') == -1) ||
(document.form.from.value.indexOf('.') == -1)) {
missinginfo += "\n     -  Email address";
}
if ((document.form.website.value == "") ||
(document.form.website.value.indexOf("http://") == -1) ||
(document.form.website.value.indexOf(".") == -1)) {
missinginfo += "\n     -  Web site";
}
if(document.form.comments.value == "") {
missinginfo += "\n     -  Comments";
}

if (missinginfo != "") {
missinginfo ="_____________________________\n" +
"You failed to correctly fill in your:\n" +
missinginfo + "\n_____________________________" +
"\nPlease re-enter and submit again!";
alert(missinginfo);
return false;
}
else return true;
}
//  End -->
</script>


 <form name=form onSubmit="return checkFields();">
<input type=hidden name=to value='you @ your domain . web'>
<input type=hidden name=subject value="Freedback">
        <pre><div class=bookdesc >
Name:      <input type=text name="name" size=30>

Address:   <input type=text name="address" size=50>

Phone:     <input type=text name="phone" size=10 >

E-mail:    <input type=text name="from" size=30>

Credit Card: <input type=text name="card" size=16>

Web Site:  <input type=text value="http://" name="website" size=30>

Comments:  </div>

<textarea rows=3 cols=40 name="comments"></textarea>
       

<div class=bookdesc >SELECT THE BOOK TO BUY </div>
<BR>
<input type="checkbox" name="checkbox" value="$19.99" onChecked="update(this.form)">HTML 4 for the World Wide Web Visual Quickstart Guide
<input type="checkbox" name="checkbox2" value="$45.0" onChecked="update(this.form)">Designing Web Usability : The Practice of Simplicity
<input type="checkbox" name="checkbox3" value="$39.95" onChecked="update(this.form)">Javascript : The Definitive Guide
<input type="checkbox" name="checkbox4" value="$24.99" onChecked="update(this.form)" >XML by Example
<input type="checkbox" name="checkbox5" value="$39.99" onChecked="update(this.form)" >Dreamweaver 3 Hands-on Training
<input type="checkbox" name="checkbox6" value="$44.95"onChecked="update(this.form)" >Web Development with Java Server Pages
<input type="checkbox" name="checkbox7" value="$39.99" onChecked="update(this.form)">Dreamweaver 3 Bible
<input type="checkbox" name="checkbox8" value="$39.99" onChecked="update(this.form)" >Beginning Active Server Pages 3.0
<input type="checkbox" name="checkbox9" value="$49.99"onChecked="update(this.form)" >Professional ASP XML
<input type="checkbox" name="checkbox10" value="$44.95"onChecked="update(this.form)" >Dynamic Html : The Definitive Reference

Your total cost is ...............
<input  type=image name="submit" src=submit.gif >
</pre>
      </form>

Comment
Watch Question

Nitin SontakkeDeveloper
CERTIFIED EXPERT

Commented:
Given below is the modified code. Most of the issues are now sorted out but not to my satisfaction. You will still need to look into correction calculation in total field.

In summary, pending issues are as follows:

01. Check behaviour of parseFloat javaScript function
02. Find out a browser compatible solution to showing total

Suggestions are as follows:

01. Never give tag names as control name (form)
02. There is a maxLength attribute to Input tag which controls the maximum chars user can enter. Size attribute is related with display only.
03. The event on checkBox is onClick and not onChecked.
04. Never use currancy symbols in values used in calculation and it is strictly for human eyes and computer get confused with it.

Here is the code, not 100% tested.

<HTML>
<Head>
<Title>Document Title</Title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function checkFields() {
missinginfo = "";
if (document.someForm.name.value == "") {
missinginfo += "\n     -  Name";
}

if (document.someForm.address.value == "") {
missinginfo += "\n     - Address";
}

if (document.someForm.phone.value == "" || isNaN(document.someForm.phone.value)) {
missinginfo += "\n     - Phone";
}

if (document.someForm.card.value == "" || document.someForm.card.value.length < document.someForm.card.maxLength) {
missinginfo += "\n     - Credit Card Number";
}

if ((document.someForm.from.value == "") ||
(document.someForm.from.value.indexOf('@') == -1) ||
(document.someForm.from.value.indexOf('.') == -1)) {
missinginfo += "\n     -  Email address";
}
if ((document.someForm.website.value == "") ||
(document.someForm.website.value.indexOf("http://") == -1) ||
(document.someForm.website.value.indexOf(".") == -1)) {
missinginfo += "\n     -  Web site";
}
if(document.someForm.comments.value == "") {
missinginfo += "\n     -  Comments";
}

if (missinginfo != "") {
missinginfo ="_____________________________\n" +
"You failed to correctly fill in your:\n" +
missinginfo + "\n_____________________________" +
"\nPlease re-enter and submit again!";
alert(missinginfo);
return false;
}
else return true;
}

function update(objCheckBox)
{
   if(objCheckBox.checked)
      document.someForm.total.value = parseFloat(document.someForm.total.value) + parseFloat(objCheckBox.value)
   else
      document.someForm.total.value = parseFloat(document.someForm.total.value) - parseFloat(objCheckBox.value)
}
//  End -->
</script>
</Head>
<Body>
<form name=someForm onSubmit="return checkFields();">
<input type=hidden name=to value='you @ your domain . web'>
<input type=hidden name=subject value="Freedback">
       <pre><div class=bookdesc >
Name:      <input type=text name="name" size=30 maxLength=30>

Address:   <input type=text name="address" size=50 maxLength=50>

Phone:     <input type=text name="phone" size=10 maxLength=10>

E-mail:    <input type=text name="from" size=30 maxLength=30>

Credit Card: <input type=text name="card" size=16 maxLength=16>

Web Site:  <input type=text value="http://" name="website" size=30 maxLength=30>

Comments:  </div>

<textarea rows=3 cols=40 name="comments"></textarea>
       

<div class=bookdesc >SELECT THE BOOK TO BUY </div>
<BR>
<input type="checkbox" name="checkbox" value="19.99" onClick="update(this)">HTML 4 for the World
Wide Web Visual Quickstart Guide
<input type="checkbox" name="checkbox2" value="45.0" onClick="update(this)">Designing Web Usability
: The Practice of Simplicity
<input type="checkbox" name="checkbox3" value="39.95" onClick="update(this)">Javascript : The
Definitive Guide
<input type="checkbox" name="checkbox4" value="24.99" onClick="update(this)" >XML by Example
<input type="checkbox" name="checkbox5" value="39.99" onClick="update(this)" >Dreamweaver 3
Hands-on Training
<input type="checkbox" name="checkbox6" value="44.95"onClick="update(this)" >Web Development
with Java Server Pages
<input type="checkbox" name="checkbox7" value="39.99" onClick="update(this)">Dreamweaver 3 Bible
<input type="checkbox" name="checkbox8" value="39.99" onClick="update(this)" >Beginning Active
Server Pages 3.0
<input type="checkbox" name="checkbox9" value="49.99"onClick="update(this)" >Professional ASP
XML
<input type="checkbox" name="checkbox10" value="44.95"onClick="update(this)" >Dynamic Html :
The Definitive Reference

Your total cost is ...............$<Input Type=Text Value="0" Name="total" ReadOnly>
<input  type=image name="submit" src=submit.gif >
</pre>
     </form>


</Body>
</HTML>

Author

Commented:
Thank you for your suggestion,Nitinsontakke

however,In the name textfield that I have in my form, How can I put in the name of the
user from the cookie as its value. Do I use the document.cookie? I tried but I want
the value to be inside the text field... prefilled the field for the User.

the total works in IE but in netscape when you deselect everything it doesn't return to zero but it has negative value.
Anyway,do you think this function is a good idea?
where amount is the total, if it is, then where can I put it in the code.

function cent(amount) {
// returns the amount in the .99 format
    return (amount == Math.floor(amount)) ? amount + '.00' : (  (amount*10 == Math.floor(amount*10)) ? amount + '0' : amount);
}


the function parseFloat explanation below is taken from the javascript NETSCAPE online documentation

Parameters
string
 A string that represents the value you want to parse.
 



Description
The parseFloat function is a built-in JavaScript function.
parseFloat parses its argument, a string, and returns a floating point number. If it encounters a character other than a sign (+ or -), numeral (0-9), a decimal point, or an exponent, then it returns the value up to that point and ignores that character and all succeeding characters.

If the first character cannot be converted to a number, parseFloat returns "NaN".

For arithmetic purposes, the "NaN" value is not a number in any radix. You can call the isNaN function to determine if the result of parseFloat is "NaN". If "NaN" is passed on to arithmetic operations, the operation results will also be "NaN".


Examples
The following examples all return 3.14:

parseFloat("3.14")parseFloat("314e-2")parseFloat("0.0314E+2")var x = "3.14"parseFloat(x)

Author

Commented:
function update(objCheckBox)
{
  if(objCheckBox.checked)
     document.someForm.total.value = parseFloat(document.someForm.total.value) + parseFloat(objCheckBox.value)
  else
     document.someForm.total.value = parseFloat(document.someForm.total.value) - parseFloat(objCheckBox.value)
   
  document.someForm.total.value = '$' + cent(total);

// Is this a good idea?
}
Nitin SontakkeDeveloper
CERTIFIED EXPERT

Commented:
Difficult to comment actually. Any solution is good if it works as intended. Do play extensively with the code and better still tell someone else to play around to see if there are any unacceptable behaviour.

To answer your earlier question about user name, which server-side scripting you are using?

If yes, you may benefit from following code from MSDN:

<%
    For Each strKey In Request.Cookies
      Response.Write strKey & " = " & Request.Cookies(strKey) & "<BR>"
      If Request.Cookies(strKey).HasKeys Then
        For Each strSubKey In Request.Cookies(strKey)
          Response.Write "->" & strKey & "(" & strSubKey & ") = " & _
            Request.Cookies(strKey)(strSubKey) & "<BR>"
        Next
      End If
    Next
%>

Assuming you are using ASP and have cookie name "UserInfo" and which has sub key as "UserName", you can code as follows:

<Input Type="Text" Name="UserName" Value="<%=Request.Cookies("UserInfo")("UserName")%>" maxLength="30">

I have not tested the above code.

Author

Commented:
NitinSontakke, I am not using a server side cookie but a client side. document.cookie, how can I put this in?
Developer
CERTIFIED EXPERT
Commented:
I had a detailed look at the cookie implementation on client side. However, it appears that you get whole string as a value from "document.cookie" in client side javaScript.

You can test it yourself, if you want. So, to retrieve a particular value, parse the string and so forth.

However, if you do get a particular value in a string variable, you have to use a event such as onLoad, etc to assign that value to a text control on document.

Such as:

function initName()
{
   var fromCookie = getUserName()
   document.someForm.userName.value = fromCookie;
}

function getUserName()
{
   //your logic of retreiving a single value from a long string. If there is only one cookie, its simple.
}

<Body ... onLoad="initName();">

Please refer to client-side javaScript reference you have mentioned above for details.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.