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:

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:

"Please enter all required fields." 

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';
}