Using jquery, how can I change the color of these elements to red if the textboxes contain defaultvalues and the 'isrequired' value is "Yes"?
<input type="text" value="Name" isrequired="Yes">
<input type="text" value="Address" isrequired="No">
<input type="text" value="Age" isrequired="Yes">
Change your input html to add an extra data-* attribute which store defult value
<input type="text" value="Name" data-default="Name" isrequired="Yes">
<input type="text" value="Address" data-default="Address" isrequired="No">
<input type="text" value="Age" data-default="Age" isrequired="Yes">
Jquery
$('input[isrequired=Yes]').each(function(){
if($(this).val()==$(this).data("default"))
{$(this).css('color', 'red');}
})
Update : With using defaultvalue property which is very new to me
$('input[isrequired=Yes]').each(function(){
if (this.value == this.defaultValue) {$(this).css('color', 'red'); }
});
Much better ,cleaner.
defaultValue property. See my answer for an example.The following will change the text field text red if the value is the default value as the user types.
JavaScript: (requires jQuery)
$('input[type=text][isrequired=Yes]').on("change", function(){
if ($(this).val() == this.defaultValue) { $(this).addClass("req"); }
else { $(this).removeClass("req"); }
});
CSS:
.req { color:red }
