When we created the database table we created some fields that didn't accept NULL as a value (regionID, regionName). If we were to submit empty INPUT-fields to those table fields we would get an error. That's why we are now going to create a fairly simple JavaScript that checks whether a required field is empty or not.
At the last page we set an array that told the form generator what fields should be required. What the script did was to add the className "required" to those fields. What we're going to do now is to make a script that runs through all fields in the form and checks the value of each field with the className "required". If the value is NULL the INPUT-field should be turned pink and the form will not be approved form submit.
function validateForm(FORM,PAGE) {
var approved = 1;
var querystring = "";
var x = document.getElementById(FORM);
var fieldType = "";
var fieldClass = "";
var fieldValue = "";
var fieldId = "";
var temp = 0;
for (var i=0; i<x.length; i++) {
fieldClass = document.getElementById(FORM).elements[i].className.substr(0,8);
fieldType = document.getElementById(FORM).elements[i].type;
fieldValue = document.getElementById(FORM).elements[i].value;
fieldId = document.getElementById(FORM).elements[i].id;
if (fieldClass == "required" && fieldValue == "") {
approved = 0;
document.getElementById(FORM).elements[i].style.backgroundColor = "pink";
} else if (fieldType == "checkbox") {
if (document.getElementById(FORM).elements[i].checked == true) { temp = 1; } else { temp = 0; }
querystring = querystring + "&" + fieldId + "=" + temp;
} else if (fieldType != "button") {
querystring = querystring + "&" + fieldId + "=" + fieldValue;
document.getElementById(FORM).elements[i].style.backgroundColor = "white";
}
}
var formAction = "php/" + document.getElementById(FORM).receiver.value;
if (approved == 1) { updatePage(formAction,PAGE,querystring); document.getElementById(FORM).reset(); }
}
Do you find the script confusing? Let's walk through it then!
Two variables is passed in from the caller: FORM and PAGE. If you remember from the last page the contain the values "create" and "3". "create" is the name of the form itself, while "3" is the flap-number that will be passed on into the updatePage()-function later.
Next we declare a number of variables that will handle values for us as the script progresses. approved is a Boolean variable that starts as true. If this variable remains true until the end of the script it means that no errors were found and that the form can be submitted to the PHP-page that handles the data and puts it into the database (that's the topic of the next page). The querystring is used to store all form data in a string.
x is a loop variable that will store the entire form as an object. By calling the length of this variable we get the number of fields. This makes it very dynamic and we can use the script with any form of any length.
The next couple of variables will be set within the loop and receive a new value each round. fieldType stores the type of field, i.e. is it a "text"-field, a "checkbox" or a "button"? fieldClass This variable stores the eight first letters in the className of the field. If the field is required these letters should turn up as the value "required". fieldValue will store the value of a field. The value is what has been input in a field, i.e. the text entered in a text-field, or the text on a button for that matter. fieldID stores the ID of the field. As you may remember from the last page the ID of each field is set to match the name of the tabel field in the database. The temp variable is used to store the true or false value of checkboxes, if such is found in the form, which it is in our case.
Now for the loop. As stated earlier the loop runs until it can't find no more form fields. Each field in the form is accessed from the "elements"-array instead of using their ID:s. The elements-array is a default array that contains all form objects of any kind, including hidden ones. The variables are set according to the field that is processed in the loop round. The first if-statement checks whether the fieldClass-variable contains the value "required" and the fieldValue is empty. This combination means that the required field has not been filled out. In that case the approved-variable is set to false, and the form won't be submitted at the end of the script. The error will be displayed by changing the background color of the field to pink.
If the if-statement failed it moves on to check whether the field is a checkbox. A checkbox should never be required (if it would you could just set that field automatically) and thus there's no need to check for the requirement here. If the field is a checkbox the temp-variable will store a true of false value depending on whether the checkbox is checked or not. We do this step to ensure that we transfer a 1 or a 0 to the processing script. Checkboxes can sometimes return values like "true" or "false", "on" or "off", depending on what language you program in. I think it's a good idea to always make sure that an integer is sent, especially since we store the Boolean value as a TINYINT in the database.
We won't submit the form in the old fashion way with a SUBMIT-button since that would screw up the Ajax. Instead we're going to build a querystring of all form data and simply redirect to the process page. That's what the querystring-variable does. It adds each field and value to itself for every loop round. At the end it contains all data entered into the form.
The final else-if statement checks whether the field is something else than a button (the checkbox type has already been eliminated by the previous else-if statement). Here values from text-fields and select-menues will be parsed and added to the querystring-variable. The background color of the field will also be set to white since it obviously passed the required test.
formAction is a variable that now receives a string that corresponds to the name of the process-page that will take care of the data. That file name was entered in a hidden field on the previous page, check it out if you missed it.
The last thing that happens in the script is a check for whether the approved-variable is still true or not. If it is the updatePage()-function will be called with all necessary values passed on. Next the form will be resetted so another row can be added immediately. This is one of the benefits with using an Ajax-solution. You may add data in a form and send the data without having to wait for a confirmation page to load. The confirmation will instead come in another DIV which leaves you to keep adding data in a rapid speed.
Now it's time to create the process-page which makes it possible to actually add the data to the database.
Next Up: The first processing page