Question

Hi all I have a form that has 4 fields
I can get it to check if any field is empty and change the background color with no problem, but the problem I am getting is if all the fields are not empty it’s not continuing with the code

$(document).ready(function(){
$("#submitpw").click(function(){
var un = $("#FirstName").val();
var pw = $("#LastName").val();
var sid = $("#StudentID").val();
var ss = $("#LastFour").val();
var unl = un.substring(0,un.length - un.length + 1);
var pwl = pw.substring(0,pw.length - pw.length +4)
var emptyTextBoxes = $('.information').filter(function() { return this.value == ""; });
emptyTextBoxes.each(function() {
if ($('.information:empty'))
{
$(this).css("background-color", "red");
alert("Please Enter Information in the Red Fields");
}
else
{
("This is the part that never triggers!!!")
alert("it worked");
$("#campusun").html(unl+pwl+sid+ss);
$("#campuspw").html(sid+ss);
$("#emailun").html(unl+pwl+sid+"@live.tcicollege.edu");
$("#emailpw").html(sid+ss);
}
});
});
});

Answer 1

Of course it will never trigger. You’re basically grouping together a set of elements from $('.information'), say you get 3 elements. The each method is going to invoke the callback on each element; since $('.information') had to be non empty to even invoke the callback, and your code for that check is in the callback invoked, it never satisfies the condition.

It sounds like you want to do this:

 if(emptyTextBoxes.length == 0)
 {
      alert("it worked");
      $("#campusun").html(unl+pwl+sid+ss);
      $("#campuspw").html(sid+ss);
      $("#emailun").html(unl+pwl+sid+"@live.tcicollege.edu");
      $("#emailpw").html(sid+ss);
 }
 else
 {
      emptyTextBoxes.each(function()
      {
          $(this).css("background-color", "red");
          alert("Please Enter Information in the Red Fields");
      });
 }