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>

Answers


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
}

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.


Need Your Help

How can I set properties of a clone object?

actionscript-3 flash flash-cc

I found a good tutorial about cloning objects on this site (thanks to Andrey Popov). I've modified it, created a mc and a textfield. The problem is I can't set default values for the mc's and the

ListView selection does not change

android android-fragments android-listview

In my app I have activity which contains two fragments.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.