Link to home
Start Free TrialLog in
Avatar of der_23
der_23Flag for Thailand

asked on

java script function not working

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>

Avatar of Nitin Sontakke
Nitin Sontakke
Flag of India image
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>
Avatar of der_23
der_23
Flag of Thailand image

ASKER

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)
Avatar of der_23
der_23
Flag of Thailand image

ASKER

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?
}
Avatar of Nitin Sontakke
Nitin Sontakke
Flag of India image
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.
Avatar of der_23
der_23
Flag of Thailand image

ASKER

NitinSontakke, I am not using a server side cookie but a client side. document.cookie, how can I put this in?
ASKER CERTIFIED SOLUTION
Avatar of Nitin Sontakke
Nitin Sontakke
Flag of India image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial