Validation with the Placeholder Text is not working. I am getting a JS error
Uncaught TypeError: Cannot read property 'getProperty' of null
Which I assume has something to do with a Jquery/Mootool conflict. I read your document on resolving Jquery problems and still can't seem to get rid of the error.
any help would be greatly appreciated
Thanks
Penny
Uncaught TypeError: Cannot read property 'getProperty' of null
Which I assume has something to do with a Jquery/Mootool conflict. I read your document on resolving Jquery problems and still can't seem to get rid of the error.
any help would be greatly appreciated
Thanks
Penny
Hi Penny,
It's failing on the Captcha input because the label is in <p> tags instead of <label> tags. The code may need to be a bit more sophisticated to spot this error and by pass it. Please try replacing this line
Bob
It's failing on the Captcha input because the label is in <p> tags instead of <label> tags. The code may need to be a bit more sophisticated to spot this error and by pass it. Please try replacing this line
if ( !my_input.value ) {if ( label && !my_input.value ) {Bob
Bob,
That didn't work. This is the JS that I have
window.addEvent('domready', function() {
// initialise the form
var inputs = $$('#chronoform_contact_form input[type=text], textarea');
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if ( label && !my_input.value ) {
my_input.value = label.getProperty('text');
my_input.setStyle('color', '#888');
label.setStyle('display', 'none');
}
showLabel(my_input);
});
// add events to fire when the submit button is clicked
$('submit').addEvent('click', function() {
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if ( my_input.value == label.getProperty('text') ) {
my_input.value = '';
my_input.setStyle('color', '#000');
}
});
});
// add events to fire when the submit button loses focus
$('submit').addEvent('mouseout', function() {
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if ( my_input.value == '' ) {
my_input.value = label.getProperty('text');
my_input.setStyle('color', '#FFF');
my_input.set('tween', {duration: 'long'});
my_input.tween('color', '#888');
}
});
});
});
// initialisation function adds events to each input
function showLabel(my_input) {
var label = my_input.getParent().getElement('label');
if ( label && !my_input.value ) {
my_input.value = label.getProperty('text');
}
label.setStyle('display', 'none');
my_input.addEvent('focus', function() {
var label = this.getParent().getElement('label');
if ( this.value == label.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}
});
my_input.addEvent('blur', function() {
var label = this.getParent().getElement('label');
if ( this.value == '' ) {
this.value = label.getProperty('text');
this.setStyle('color', '#888');
}
});
my_input.addEvent('submit', function(){
var label = this.getParent().getElement('label');
if ( this.value == label.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}
});
};
That didn't work. This is the JS that I have
window.addEvent('domready', function() {
// initialise the form
var inputs = $$('#chronoform_contact_form input[type=text], textarea');
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if ( label && !my_input.value ) {
my_input.value = label.getProperty('text');
my_input.setStyle('color', '#888');
label.setStyle('display', 'none');
}
showLabel(my_input);
});
// add events to fire when the submit button is clicked
$('submit').addEvent('click', function() {
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if ( my_input.value == label.getProperty('text') ) {
my_input.value = '';
my_input.setStyle('color', '#000');
}
});
});
// add events to fire when the submit button loses focus
$('submit').addEvent('mouseout', function() {
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if ( my_input.value == '' ) {
my_input.value = label.getProperty('text');
my_input.setStyle('color', '#FFF');
my_input.set('tween', {duration: 'long'});
my_input.tween('color', '#888');
}
});
});
});
// initialisation function adds events to each input
function showLabel(my_input) {
var label = my_input.getParent().getElement('label');
if ( label && !my_input.value ) {
my_input.value = label.getProperty('text');
}
label.setStyle('display', 'none');
my_input.addEvent('focus', function() {
var label = this.getParent().getElement('label');
if ( this.value == label.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}
});
my_input.addEvent('blur', function() {
var label = this.getParent().getElement('label');
if ( this.value == '' ) {
this.value = label.getProperty('text');
this.setStyle('color', '#888');
}
});
my_input.addEvent('submit', function(){
var label = this.getParent().getElement('label');
if ( this.value == label.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}
});
};
Hi Penny,
It needed the 'label' check added in a few more places, Here's the edited code
Bob
PS On your site the validation wasn't working as the Submit Button didn't have an ID set, I updated that too.
It needed the 'label' check added in a few more places, Here's the edited code
window.addEvent('domready', function() {
// initialise the form
var inputs = $$('#chronoform_contact_form input[type=text], textarea');
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if (label && !my_input.value) {
my_input.value = label.getProperty('text');
my_input.setStyle('color', '#888');
label.setStyle('display', 'none');
}
showLabel(my_input);
});
// add events to fire when the submit button is clicked
$('submit').addEvent('click', function() {
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if ( label && my_input.value == label.getProperty('text')) {
my_input.value = '';
my_input.setStyle('color', '#000');
}
});
});
// add events to fire when the submit button loses focus
$('submit').addEvent('mouseout', function() {
inputs.each(function(my_input) {
var label = my_input.getParent().getElement('label');
if ( label && my_input.value == '') {
my_input.value = label.getProperty('text');
my_input.setStyle('color', '#FFF');
my_input.set('tween', {
duration: 'long'
});
my_input.tween('color', '#888');
}
});
});
});
// initialisation function adds events to each input
function showLabel(my_input) {
var label = my_input.getParent().getElement('label');
if ( label && !my_input.value ) {
my_input.value = label.getProperty('text');
} else {
return;
}
label.setStyle('display', 'none');
my_input.addEvent('focus', function() {
var label = this.getParent().getElement('label');
if ( label && this.value == label.getProperty('text')) {
this.value = '';
this.setStyle('color', '#000');
}
});
my_input.addEvent('blur', function() {
var label = this.getParent().getElement('label');
if ( label && this.value == '') {
this.value = label.getProperty('text');
this.setStyle('color', '#888');
}
});
my_input.addEvent('submit', function() {
var label = this.getParent().getElement('label');
if ( label && this.value == label.getProperty('text')) {
this.value = '';
this.setStyle('color', '#000');
}
});
};Bob
PS On your site the validation wasn't working as the Submit Button didn't have an ID set, I updated that too.
This topic is locked and no more replies can be posted.
