Is there a reason why dynamically generated img tags do not display when they should, but hardcoded values show up as expected?
My jQuery logic dictates that 2 image tags should be inserted after each input with the class .inputBox
Here is the HTML structure:
<form action="" method="post" id="myform">
<label for="FirstName">First Name</label>
<input type="text" class="inputBox" name="FirstName" id="firstName" />
<label for="LastName">Last Name</label>
<input type="password" class="inputBox" name="LastName" id="lastName" />
</form>
The corresponding CSS styles are as follows:
.thumb {
visibility:hidden;
height:0;
width:0;
}
.thumbV {
visibility:visible;
height:30px;
width:30px;
float:right;
padding:0 15px 0 0;
}
.borderGreen {
border:solid 2px #24F706;
}
.borderRed {
border:solid 2px #FD0F0F;
}
The jQuery script responsible for handling the behavior of the elements:
$(document).ready(function() {
// Call the addImages function below
addImages();
// Blur event handler for first name input field
$("#firstName").blur(function() {
sendValue($(this).val(), "name.php", "#up1", "#down1", "#firstName");
});
// Focus event handler for first name input field
$("#firstName").focus(function() {
sendValue($(this).val(), "name.php", "#up1", "#down1", "#firstName");
});
// Blur event handler for last name input field
$("#lastName").blur(function() {
sendValue($(this).val(), "name.php", "#up2", "#down2", "#lastName");
});
// Focus event handler for last name input field
$("#lastName").focus(function() {
sendValue($(this).val(), "name.php", "#up2", "#down2", "#lastName");
});
// Function to determine the number of input fields and append a number to their IDs
function addImages() {
var numInputs = $("div").length;
for(var i = 1; i <= numInputs; i++) {
$("<img src=\"Images/thumbs_up_48.png\" class=\"thumb\" id=\""+"up"+i+"\" />")
.appendTo(".inputBox:nth-child("+i+")");
$("<img src=\"Images/thumbs_down_48.png\" class=\"thumb\" id=\""+"down"+i+"\" />")
.appendTo(".inputBox:nth-child("+i)");
}
}
// Function to handle submission of input box value to PHP script
function sendValue(str, file, up, down, field) {
$.post(file, {sendValue: str}, function(data) {
if(data.returnValue === true) {
$(down).removeClass('thumbV').addClass('thumb');
$(up).removeClass('thumb').addClass('thumbV');
$(field).removeClass('borderRed').addClass('borderGreen');
}
else if(data.returnValue === false) {
$(up).removeClass('thumbV').addClass('thumb');
$(down).removeClass('thumb').addClass('thumbV');
$(field).removeClass('borderGreen').addClass('borderRed');
}
else {
$(up).removeClass('thumbV').addClass('thumb');
$(down).removeClass('thumbV').addClass('thumb');
$(field).removeClass('borderRed');
}
}, "json");
}
});
The desired output involves real-time validation of input fields using PHP. If valid, the visual indicators should update accordingly, which includes changing classes and borders.
<body>
<div id="container">
<div id="outer">
<div id="inner">
<div id="loginForm">
<h2>Login</h2>
<div class="tooltip"></div>
<form action="" method="post" id="myform">
<label for="FirstName">First Name</label>
<input type="text" class="inputBox" name="FirstName" title="First Name Here" id="firstName" />
<img src="Images/thumbs_up_48.png" id="up1" class="thumb" />
<img src="Images/thumbs_down_48.png" id="down1" class="thumb" />
<label for="LastName">Last Name</label>
<input type="password" class="inputBox" name="LastName" title="Must be at least 8 characters and contain letters and numbers" id="lastName" />
<!-- More input fields and corresponding thumbs images -->
<button type="submit" name="Submit" id="submitButton">Submit</button>
<input type="hidden" name="Hidden" id="hidden" />
</form>
</div>
</div>
</div>
</div>
</body>