Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Javascript doesn't seem to be executing

    Hey all,



    I'm extremely new to Javascript, and I can't seem to understand why the Javascript code I have in my file isn't executing.

    The Javascript was originally in another .js file, but I changed it around so it was in the document, as I had thought it was something wrong with that.

    Seems that wasn't it.


    Here's my entire code.
    Code:
    <!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>
    <!--29th Feb 2008 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Joe's Fruit Shop - Order Page</title>
    <style type="text/css">
    body { background-color: #66CC99; font-family: verdana, arial, helvetica, sans-serif; font-size:12pt; margin-left: 5%; margin-right: 5%;}
    h1 { text-align: center; }
    table { width: 900px; }
    c { font-size:13pt; color:#FF3366; font-weight:bold; }
    cc { font-size:12pt; }
    s1 { font-size:13pt; color:#FF3366; font-weight:bold; }
    
    </style>
    <script language="JavaScript">
    var name;
    if(name.length >2 && <25){
    	document.write("You have filled in the name field correctly.")
    }else {document.write("You have filled in the name field incorrectly.")
    }
    
    var address;
    if(address.length >5 && <40){
    	document.write("You have filled in your address correctly.")
    }else {document.write("You have filled in your address incorrectly.")
    }
    
    var suburb;
    if(suburb.length >5 && <20){
    	document.write("You have filled in your suburb correctly.")
    }else {document.write("You have filled in your suburb incorrectly.")
    }
    
    var postcode;
    if(postcode.length != 4){
    	document.write("Your postcode must contain four numbers.")
    }else {document.write("You have filled in your postcode correctly.")
    }
    
    var email;
    if(email.indexOf("@") == -1 || email == "") {
    	alert ("Your email address is not valid." "<br/>" "Please make sure the field is not left blank, and that it includes an "@" symbol.");
    	}else {
    	alert ("You have entered your email address correctly");
    	}
    </script>
    </head>
    <body>
        <table border="0">
        <tr>
        <td colspan="2" align="center"> <img src="../images/joes_header.jpg" alt="Joe's Fruit Shop" title="Joe's Fruit Shop" /> </td>
        </tr>
        <tr>
        <td colspan="2" align="center"> 	<h1>Joe's Fruit Shop</h1>
    </td>
        </tr>
        <tr>
        <td valign="top" align="center"> 
    <p><a href="home.html" title="Home Page">Home</a>
    <br />
    <br />
    <img src="../images/berry.gif" alt="strawberry" title="strawberry" />
    <br />
    <br />
    Produce
    <br />
    <br />
    <img src="../images/berry.gif" alt="strawberry" title="strawberry" />
    <br />
    <br />
    <a href="history.html" title="History">History</a>
    <br />
    <br />
    <img src="../images/berry.gif" alt="strawberry" title="strawberry" /></p>
    <br /> 
    </td>
    
    <td valign="top">    
    
      <form name="form1" method="post">
       <p>The <c>»</c> indicates that the field must be filled in.</p>
       
    
         
          
        <p>
        
        
       <s1>»</s1>Name: <span style="font-size:12pt"> 
          <input tabindex="2" type="text" name="name" size="25" title="name">
          
          
          
          </span> </p>
    
          <p>
          
          
          <s1>»</s1>Address: 
          <input type="text" name="address" size="40" title="Formfield: Address">
          
          </p>
    			<p>
                
                
                
                <s1>»</s1>Suburb: 
                <input type="text" name="suburb" size="20" title="Formfield: Suburb"> 
                
                
                <s1>»</s1>Postcode: 
               <input type="text" name="postcode" size="4" title="Formfield: Postcode"></p>
        <p>
        
       <s1>»</s1>Email address: <span style="font-size:12pt"> 
          <input tabindex="10" type="text" name="email" size="20" maxlength="20" title="Formfield: Email Address">
    
          </span> </p>
          
          
          
          
          <p>Orders:</p>
    			<p><textarea rows="5" name="text6" cols="50" title="Formfield: Orders"></textarea></p>
    			<hr class="divider">
         <p>Credit card details:</p>
        <p><s1>»</s1>Type: <cc>
          <select tabindex="1" name="select1">
            <option value="AMEX" selected>AMEX</option>
            <option value="VISA">Visa</option>
            <option value="MCRD">MasterCard</option>
            <option value="DINR">Diners Club</option>
            <option value="BANK">Bankcard</option>
          </select>
          </cc>
          
           <s1>»</s1>Expiry date: <cc>
          <select tabindex="2" name="select2">
            <option value="1" selected>01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
    
            <option value="5">05</option>
            <option value="6">06</option>
            <option value="7">07</option>
            <option value="8">08</option>
            <option value="9">09</option>
            <option value="10">10</option>
    
            <option value="11">11</option>
            <option value="12">12</option>
          </select>
          
          <select tabindex="3" name="select3">
            <option value="1" selected>2006</option>
            <option value="2">2007</option>
            <option value="3">2008</option>
    
            <option value="4">2009</option>
          </select>
          </cc> </p><hr class="divider">
        <span style="font-size:12pt">
        <p><span style="font-size:12pt"> 
          <input tabindex="28" type="submit" name="Submit" value="Submit">
          <input tabindex="29" type="submit" name="Submit2" value="Clear Form">
          </span> </p>
    
      </span></form>
    	<hr />
    
    <br />
    <div align="center"><a href="#" target="_self" title="Back To Top">Back To Top</a></div>
    <br />
    	<hr />
    	<br />
    <div style="style definition;"> <div align="center" style="font-size:10pt"> | <a href="contact_us.html" title="Contact Us">Contact Us</a> | <a href="copyright.html" title="Copyright" target="_blank">Copyright</a> | <a href="privacy.html" title="Privacy" target="_blank">Privacy</a> | <a href="mailto:xss@gmail.com?subject=Joe's Website Query" title="Joe's Website Query">Web Administrator</a> |</div>
    
     </td>
        </tr>
    
        </table>
    </body>
    </html>

    Cheers

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Under an XHTML doctype, a javascript embedded code (and any other embedded script code) must be isolated inside CDATA islands, to prevent XML interpretation of some special characters like < > & ...
    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    .. code here ..
    /*]]>*/
    </script>
    But you could leave the code as external, and get rid of troubles...
    Last edited by Kor; 05-03-2008 at 07:02 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    I guess that as this is Joe's Fruit Shop it is a homework assignment.
    I am sorry to say that there are a good many fundamental errors. So many in fact that short of re-writing it I can do no more than point out some of the grossest ones.

    Some of them are:-

    The whole of your script should be enclosed in a function, say
    function checkInputs(), and called when the submit button is pressed. As it is it runs (or attempts to run) on page load.

    var name; // you have already declared a variable called "name" as an input. It is a bad idea to give variables names such as "name" or "id" which are also HTML atributes. Change to "custName" or something.

    Likewise do not give a submit button the name "submit".

    The syntax of each test should be:-

    if (document.form1.custName.length >2 && document.form1.custName.length <25){ // why 25? And it would be better to alert only if the value was not entered correctly. And what happens apart from the alert if the name is blank or too long?


    if(name.length >2 && name.length <25){

    Same error repeated with
    if(address.length >5 && <40){
    and so on.

    Note proper use of quotes in:-
    alert ("Your email address is not valid.\nPlease make sure the field is not left blank, and that it includes an '@' symbol."); // newline is \n, not the HTML tag <br>

    Your reset button should be something like:-

    <input type="reset" value="Reset The Order Form" onClick="willReset=confirm('Are you sure you want to clear all your entries? ');return willReset;">

    It is your responsibility to die() if necessary….. - PHP Manual
    Last edited by Philip M; 05-03-2008 at 07:33 AM.

  • #4
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    First off, thanks for taking your time to post up the errors and fixes in my code, Kor & Philip M.
    Quote Originally Posted by Kor View Post
    Under an XHTML doctype, a javascript embedded code (and any other embedded script code) must be isolated inside CDATA islands, to prevent XML interpretation of some special characters like < > & ...
    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    .. code here ..
    /*]]>*/
    </script>
    But you could leave the code as external, and get rid of troubles...
    Thanks for tip, added that.

    If I was to go external, the code would go like this:
    <script language="JavaScript" src="/javascript/form.js"></script>

    Right?

    Quote Originally Posted by Philip M View Post
    I guess that as this is Joe's Fruit Shop it is a homework assignment.
    I am sorry to say that there are a good many fundamental errors. So many in fact that short of re-writing it I can do no more than point out some of the grossest ones.
    Quote Originally Posted by Philip M View Post
    I guess that as this is Joe's Fruit Shop it is a homework assignment.
    I am sorry to say that there are a good many fundamental errors. So many in fact that short of re-writing it I can do no more than point out some of the grossest ones.

    Some of them are:-

    The whole of your script should be enclosed in a function, say
    function checkInputs(), and called when the submit button is pressed. As it is it runs (or attempts to run) on page load.

    var name; // you have already declared a variable called "name" as an input. It is a bad idea to give variables names such as "name" or "id" which are also HTML atributes. Change to "custName" or something.

    Likewise do not give a submit button the name "submit".

    The syntax of each test should be:-

    if (document.form1.custName.length >2 && document.form1.custName.length <25){ // why 25? And it would be better to alert only if the value was not entered correctly. And what happens apart from the alert if the name is blank or too long?


    if(name.length >2 && name.length <25){

    Same error repeated with
    if(address.length >5 && <40){
    and so on.

    Note proper use of quotes in:-
    alert ("Your email address is not valid.\nPlease make sure the field is not left blank, and that it includes an '@' symbol."); // newline is \n, not the HTML tag <br>

    Your reset button should be something like:-

    <input type="reset" value="Reset The Order Form" onClick="willReset=confirm('Are you sure you want to clear all your entries? ');return willReset;">

    It is your responsibility to die() if necessary….. - PHP Manual

    I've fixed the errors that you pointed out. Here's the code updated.
    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    function checkInputs(){
    var name;
    if(document.jform1.custName.length >2 && document.jform1.custName.length <25){
    	document.write("You have filled in the name field correctly.")
    }else if {document.jform1.custName.length == -1}{
    alert("The name field is blank. Please fill in your name"
    }else {document.write("You have filled in the name field incorrectly.")
    }
    
    var custAddress;
    if(document.jform1.custAddress.length >5 && document.jform1.custAddress.length <40){
    	document.write("You have filled in your address correctly.")
    }else {document.write("You have filled in your address incorrectly.")
    }
    
    var custSuburb;
    if(document.jform1.custSuburb.length >5 && document.jform1.custSuburb.length <20){
    	document.write("You have filled in your suburb correctly.")
    }else {document.write("You have filled in your suburb incorrectly.")
    }
    
    var custPostcode;
    if(document.jform1.Postcode.length != 4){
    	document.write("Your postcode must contain four numbers.")
    }else {document.write("You have filled in your postcode correctly.")
    }
    
    var custEmail;
    if(document.jform1.Email.indexOf("@") == -1 || document.jform1.Email == "") {
    	alert ("Your email address is not valid.\nPlease make sure the field is not left blank, and that it includes an "@" symbol.");
    	}else {
    	alert ("You have entered your email address correctly");
    	}
    }
    	
    	/*]]>*/
    </script>
    Would there be a way for text to appear, not popups or alert boxes, but text that is shown underneath each field, notifying the user if they have typed it correctly or not? At the moment, the code still doesn't seem to execute, I guess it's because I need to fix up my submit button?

    I've had a look at a couple of javascript submit button pages, but it still doesn't seem to work

    thanks guys

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by hatsbs View Post
    If I was to go external, the code would go like this:
    <script language="JavaScript" src="/javascript/form.js"></script>

    Right?
    Wrong. Should be:
    Code:
    <script type="text/javascript" src="javascript/form.js"></script>
    language is deprecated
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Still a great many errors.

    var name;
    if (document.jform1.custName.length >2 && document.jform1.custName.length <25){
    document.write("You have filled in the name field correctly.")
    }
    else if {document.jform1.custName.length == -1 } {
    alert("The name field is blank. Please fill in your name")
    }
    else {document.write("You have filled in the name field incorrectly.")

    //and what then???
    }

    How can the field length be == -1?

    And if I fill in my name as $$$444&#37;%% that will return true. There is no point in validation which is ineffective.
    Last edited by Philip M; 05-03-2008 at 09:21 AM.

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Philip M is right. I have previously pointed only the external emplacement of the code regarding the XHTML Doctype, but I reckon there are a lot of internal errors inside the code itself
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •