0

I'm trying to use an external javascript, but when I run my html page it does seem as though my external javascript is working. I'm not too sure if it's my coding in my javascript or if I haven't connected the javascript correctly. As I wanted an alert message to put when certain things weren't met, i.e email must have @ or postcode must have 4 numbers. Any help would be appreciated.

Here is my html code:

<html>
  <head>
    <script type="text/javascript" src="/new 2.js"></script>
  </head>
  <body>
    <form name="userForm" onsubmit= "return validateForm()"  method="post">
      Name: <input type="text" id="name" name="name" size="50" required />
      <br /><br />
      Address: <input type= "text" id="address" name="Address" size="50" required/>
      <br /><br />
      Postcode: <input type="text" id="postcode" name="postcode" size="4" required/>
      <br><br/>
      Email: <input type="text" id="email" name="email" required/>
      <br><br/>
      Credit Card Details:
      <br />
      <select name="Card Type">
        <option value="Visa">Visa</option>
        <option value="Mastercard">Mastercard</option>
        <option value="AMEX">AMEX</option>
      </select>
      <br><br/>
      <select name="Month">
        <option value="1">January</option>
        <option value="2">Febuary</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>  
      <br><br/>
      <select name="Year">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
      </select>
      <br><br/>
      <input type="submit" name="Submit" value="Submit Form" /> 
      <br><br/>
      <input type="reset" name="Reset" Value="Reset Form">
    </form>
  </body>
</html>

This is my external Javascript:

function validateForm()
{
  if (document.getElementById("name").value=="")
  {
    alert("You cannot leave this field blank. Please enter your name");
  }
  else  
  {
    alert("field OK");
  }

  if (document.getElementById ("address").value ==="")
  {
    alert ("Please enter your address");
    document.getElementById ("address").focus();
    return false;
  }

  if (isNaN(document.getElementById("postcode").value.length<4))
  {
    alert ("Your postcode is not valid");
  }
  else 
  {
    alert ("You have entered your postcode correctly");
  }

  if (document.getElementById ("email").value.length<5 ||
      document.getElementById ("email").value.indexOf("@")== -1) {
    alert("Please enter your email min 5 chars and include @ symbol");
    document.getElementById("email").focus();
    return false;
  }
  {

  if (document.getElementById ("creditcard").value.length < 16)
  {
    alert("Please enter your Creditcard number");
    document.getElementById ("ccreditcard").focus();
    return false;
  }

  alert("Thank you for your submission!");
  return true;
}
}
2
  • Do you see a loading error for one of the script files in the network tab or any other error message in console?
    – t.niese
    Jun 2, 2014 at 5:45
  • no errors or anything. html page runs but doesn't seem like the javascript is working. Jun 2, 2014 at 7:08

2 Answers 2

1

If I'm not mistaken you have a space in your filename.. Try changing it for an underscore for example and of course also rename the file.. Afterwards try executing validateForm from the console (without braces).. It should print out the function's body if the script is loaded successfully..

Basically you need to provide a valid URI (RFC 2396), some browsers have a problem with spaces - for example Chrome as far as I know.. If you insist on leaving the space in the filename, then substitute the space in your HTML for a + sign so the import will look like this

<script type="text/javascript" src="/new+2.js"></script>

Edit (answer for a specific, non-global problem):

I've tested the import on my machine and it works without any problems. I've placed the JS file right next to the HTML file as shown on the picture below

enter image description here

and I've used the import like this

<script type='text/javascript' src='javascript1.js'></script>

this is a relative path to the JS file. That means that the path starts where the HTML is located and traverses folders from that position. In other words if you had a folder named "foo" located right next to the HTML and the JS file was in it you should use src='foo/javascript1.js'. If the JS file was on a level above the HTML file then src='../javascript1.js'. On the other hand, if you don't want to specify the path relatively you can use absolute path which is the full filesystem path to the requested JS file. For example src='file:///C:/yourDocuments/Desktop/yourFolder/new_2.js'.

Please check out the following resources for information about relative and absolute paths:

http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm

http://www.boogiejack.com/server_paths.html

http://brugbart.com/paths

12
  • i changed the filenames put them in a folder on my desktop but it seems like its still not connecting. Jun 2, 2014 at 7:08
  • provide a full path then.. something like file:///C:/yourDocuments/Desktop/yourFolder/new_2.js
    – Dropout
    Jun 2, 2014 at 7:24
  • what did validateForm return? undefined?
    – Dropout
    Jun 2, 2014 at 7:25
  • ok I think I found the problem. I didn't add <script> tags in my javascript file only on my html page which I thought you didm have too. Once i did that I did starting get some alerts. Jun 2, 2014 at 7:32
  • that's wierd.. you shouldn't need those in the JS file.. can you try one more thing please? when you load your page, try opening the page source (Ctrl+U) and clicking on the JS file if it redirects you to the source of it..
    – Dropout
    Jun 2, 2014 at 7:34
0

you have to change in line :-

<script type="text/javascript" src="new 2.js"></script>

its work for me...:)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.