CODEWITHSUNDEEP
javascriptformshtmlfunction
Miles
Miles

Reputation: 2527

Javascript checking if form is null

I am very new to Javascript so please be patient. I have a script that is to check if certain form elements are null. If any of the form elements are null, an alert should be shown. However, nothing happens. I have looked at a copious amount of examples, cannot seem to get past this problem.

The script in question is shown below:

var age;
var todaysDate;
var birthDate;
var inputOk;

function setDates() {
    if (d.value !== null && m.value !== null && y.value !== null) {
    inputOk = true;

    var day = d.value;
    var month = m.value + 1;
    var year = y.value;
    var today = new Date();
    var dob = new Date(year, month, day);

    todaysDate = today.valueOf();
    birthDate = dob.valueOf();
}
else {
    inputOk = false;
}   
}

function calculateAge() {

}

function outputAge() {
    //var output = document.getElementById('ageOut');
    //document.write('You are aged: '+age);
}

function getAge() { 
setDates();

if (inputOk) {
    calculateAge();
    outputAge();    
}
else {
    alert("Please enter your D.O.B correctly.");
}  
}

The HTML form in question is shown below:

<form name ="dob" id="dobform">
   <select id="d">
 <option value="null">Day</option>
   </select>
   <select id="m">
 <option value="null">Month</option>
   </select>
   <select id="y">
 <option value="null">Year</option>
   </select>
   <input type="button" value="Get my age!" onclick="getAge();"/>
</form>

Upvotes: 0

Views: 11166

Answers (3)

RobG
RobG

Reputation: 147383

I have a script that is to check if certain form elements are null.

Form elements are never "null", though an element that is a form control might not have a value (or more correctly, the value might be an empty string), which is more or less equivalent to being "null".

In your HTML you have:

> <form name ="dob" id="dobform">
>     <select id="d">
>        <option value="null">Day</option>
>    </select>

Note that in HTML 4.01 (the current HTML standard) for a control's value to be sent when the form is submitted, it must have a name, so I would replace the id attribute with a name attribute and use a more helpful value than "d" ("day" seems reasonable).

Also, it is common in browsers that if no option has the selected attribute, the first option is made the selected option (though this is not required by the HTML standard and might not be true for all browsers). So in many browsers, the value of the d select will always be "null", though it can programmatically be set to some other value. If you want to make sure the first option is the default, then give it the selected attribute:

   <select name="day">
     <option value="null" selected>Day
     <!-- more options -->
   </select>

It is considered good practice to access form controls as named properties of the form. To test if the user has selected some value other than the default, you can use a test like (assuming the select with id="d" has name="day"):

var form = document.getElementById('dobform');

if (form.day.value == 'null') {
  // the control with name "day" has a value of the string "null"
}

The other controls should be treated the same way.

Upvotes: 1

Adam Rackis
Adam Rackis

Reputation: 83358

Accessing your dom elements directly by id is a bad idea. I believe it will work on some versions of IE, but the standard way is to call document.getElementById("idOfYourControl")

So to get the value of your "m" select:

var mSelect = document.getElementById("m");
mSelect.value;

So your function would look like:

function setDates() {
    var dSelect = document.getElementById("d");
    var mSelect = document.getElementById("m");
    var ySelect = document.getElementById("y");

    if (dSelect.value !== "null" && mSelect.value !== "null" && ySelect.value !== "null") {
        inputOk = true;

        //and so on
}

Upvotes: 2

Matti Virkkunen
Matti Virkkunen

Reputation: 65126

The value of your input is going to be the string "null", not a real null value. Add quotes around your nulls.

Also, accessing inputs via just their ids is bad practice, and I'm not sure if it's even cross-browser compatible. Use the document.getElementById function to find your elements instead.

Finally, (unless my memory fails me) the value property of select elements isn't supported on all browsers currently in use. Better use select.options[select.selectedIndex].value.

Upvotes: 4

Related Questions