Joe2Torials.com

Advanced Forms PT.2

The form element that allows you to upload files is very easy to create, the hardest part would be server side when you would actually deal with the upload ... I'm not going to go this far into uploading in this tutorial but may decide to later on in another tutorial.

<input type="file" name="upload">

This creates the following:

*NOTE: Clicking on browse and selecting a file will do nothing; the form has no function and therefore will not upload any files.

Using JavaScript to check for form errors

Using JavaScript we can check form fields to see if a user has left one empty and then prompt that user to fill in the empty field accordingly. I must point out that certain people browse the internet with JavaScript turned off; it is always wise to include a form check server side for those users.

First off, the form:

<form method="post" name="emailform" action="" 
onSubmit="return formcheck(this);">

<p>First Name : <input type="text" name="firstname" /></p>
<p>Surname : <input type="text" name="surname" /></p>
<p>Age : <input type="text" name="age" /></p>
<p>Location : <input type="text" name="location" /></p>


<p><input type="submit" name="submit" value="Submit" /> 
<input type="reset" name="reset" value="Reset" /></p>
</form>

Here we have 4 input boxes:

• First Name
• Surname
• Age
• Location

We want to make sure the user enters all of the above information into the form, so if the user misses a field or leaves it empty we want to alert him with a JavaScript Message Prompt. You will notice in the form tag there is a piece of code you may not have seen before ...

onSubmit="return formcheck(this);

All this does is, when the submit button is pressed it starts the function formcheck which will be our JavaScript form check. The code for this is as follows:

JavaScript code

<script type="text/javascript">
function formcheck(form){

  if (form.firstname.value == "") {
    alert("Please enter your First Name.");
    form.firstname.focus();
    return false;
  }
  else if (form.surname.value == "") {
    alert("Please enter your Surname.");
    form.surname.focus();
    return false;
  }
  else if (form.age.value == "") {
    alert("Please enter your Age.");
    form.age.focus();
    return false;
  }
  else if (form.location.value == "") {
    alert("Please enter your Location.");
    form.location.focus();
    return false;
  }
else{
return true;
}
}
</script>

This code can go anywhere above the form. As you can see the function is called formcheck the same as in our actual form code. Now in this function we have an if statement.

  if (form.firstname.value == "") {
    alert("Please enter your First Name.");
    form.firstname.focus();
    return false;
  }

Roughly translated into English this means; If the form element firstname is empty (== nothing) then alert the user with the message "Please enter your First Name.". Then set the cursor in the form element firstname and then move onto the next part of the function.

All 4 parts are the same so you can see how each one works, they all check each form field for empty fields and if it finds one it alerts the user. If there are no empty fields it will allow you to submit the form ... very easy!

To see a working example of my Advanced Forms Pt. 2 (JavaScript Form Checking) click here.