I want to verify in JavaScript that my required fields are not blank

Question

Hopefully this is basic JavaScript and the answer is easy since I am new at this. I just want to make sure all required fields are not blank before the user can proceed. In my <

Answer 1

If I were you, I'd give each one of those elements a common name or a class.

For example:

<input id="child_name" class="not_blank" type="text">
<input id="age" class="not_blank" type="text">
<input id="hometown" class="not_blank" type="text">

Since you are tying all those elements as a group by class.

Then your javascript would be a lot easier:

var flagInvalid = false;
var tempArray = document.getElementsByClassName("not_blank");
for (var i = 0; i < tempArray.length; i++)
{
    if (tempArray[i].value == "" || tempArray[i].value === undefined || tempArray[i].value == null){
        flagInvalid = true;
        break; 
    }
}

if (flagInvalid == false){
    xmlhttp.open('POST', 'payment.php', true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 

} else { alert ("Please enter all required fields."); }

Btw, I strongly advise not to use "alert". Try to create a messaging system on the document itself. Like:

<span id="log" class="hidden" style="color:red"><b>"Please enter all required fields." <b></span>

Your css would look like this:

.hidden { display: none; }
.show { display: inline; }

Your javascript would be changed to:

if (flagInvalid == false){
    var log = document.getElementById("log");
    log.className = 'hidden';
    xmlhttp.open('POST', 'payment.php', true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 

} else { 
    var log = document.getElementById("log");
    log.className = 'show';
}

Answer 2

There are a couple issues here:

cn1 = 'child_name'+document.getElementById('child_name').value;

In this case you are assigning cn1 to the String 'child_name' + the value of your child_name textbox... it will never equal an empty String.

Secondly, you'll want your insert() method to return false on error in order to stop the button's intended action.

Answer 3

Try changing the function to this: (NOTE: you have to add more tests to the if clause for the rest of the elements)

function insert() {
    if (window.XMLHttpRequest) {
        xmlhttp = new XLMHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }


    if (document.getElementById('child_name').value === '' ||
        document.getElementById('age').value === '' || 
        ...more tests... || 
        document.getElementById('zip').value === '') {
        alert ("Please enter all required fields.");
        return false;
    } else {
        cn1 = 'child_name'+document.getElementById('child_name').value;
        ag2 = 'age'+document.getElementById('age').value;
        hm3 = 'hometown'+document.getElementById('hometown').value;
        bg4 = 'boy_girl'+document.getElementById('boy_girl').value;
        fn5 = 'first_name'+document.getElementById('first_name').value;
        ln6 = 'last_name'+document.getElementById('last_name').value;
        email = 'email'+document.getElementById('email').value;
        ad8 = 'address1'+document.getElementById('address1').value;
        ad9 = 'address2'+document.getElementById('address2').value;
        ct10 = 'city'+document.getElementById('city').value;
        st11 = 'state'+document.getElementById('state').value;
        zp12 = 'zip'+document.getElementById('zip').value;

        xmlhttp.open('POST', 'payment.php', true);
        xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 
    }
}