Forums

Hello

I have setup a form that has the required field code applied to the Load JS ( see below ).

I have also created another Script that shows the information for users in the field which then disappears when clicked ( similar to the label placeholder script) which works fine on its own. (see this code below also)

Problem is If I try to run them both at once neither one works! I have tried loading them as separate load JS actions and have also merged them together but still no luck. Can anybody out there look at the code and tell me where I have gone wrong....any help greatly appreciated!

Show required field code

[code]window.addEvent('domready', function() {

var required, cl, inputs, input, label, type, name, skip, marker;
marker = new Element('span', {
html: ' *',
styles: {
color: 'red',
fontWeight: 'normal'
}
});
inputs = $$('div input, div select, div textarea');
required = [];
inputs.each(function(el) {
cl = el.getProperty('class');
if(cl !== null && (cl.contains("validate['required'") || cl.contains("validate['group["))) {
required.push(el);
}
});
required.each(function(el) {
el.addClass('cf_required');
skip = false;
type = el.getProperty('type');
if(type == 'radio' || type == 'checkbox') {
if(name != el.getProperty('name')) {
label = el.getParent().getParent().getFirst('label');
name = el.getProperty('name');
} else {
skip = true;
}
} else {
label = el.getParent().getFirst('label');
}
if(label && !skip) {
label.grab(marker.clone(), 'bottom');
label.addClass('cf_required');
}
});
});


$('input, textarea').each(function () {
var Input = $(this);
var default_value = Input.val();

Input.focus(function() {
if(Input.val() == default_value) Input.val("");
}).blur(function(){
if(Input.val().length == 0) Input.val(default_value);
});
});[/code]


Show info for users in form fields code

window.addEvent('domready', function() {
// initialise the form
var inputs2 = $$('#chronoform_Quote input[type=text], textarea'); inputs2.each(function(my_input) {
               var tip = my_input.getParent().getElement('div');
               if ( !my_input.value ) {
                 my_input.value = tip.getProperty('text');
                 my_input.setStyle('color', ‘#000');
                 tip.setStyle('display', 'none');
}
               showtip(my_input);
            });
// add events to fire when the submit button is clicked
            $('submit').addEvent('click', function() {
              inputs2.each(function(my_input) {
                 var tip = my_input.getParent().getElement('div');
                 if ( my_input.value == tip.getProperty('text') ) {
                   my_input.value = '';
                   my_input.setStyle('color', '#000');
                 }
}); });
          // add events to fire when the submit button loses focus
            $('submit').addEvent('mouseout', function() {
              inputs2.each(function(my_input) {
                 var tip = my_input.getParent().getElement('div');
                 if ( my_input.value == '' ) {
                   my_input.value = tip.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 showtip(my_input) {
            var tip = my_input.getParent().getElement('div');
            if ( !my_input.value ) {
              my_input.value = tip.getProperty('text');
            }
tip.setStyle('display', 'none');
  my_input.addEvent('focus', function() {
    var tip = this.getParent().getElement('div');
    if ( this.value == tip.getProperty('text') ) {
      this.value = '';
      this.setStyle('color', '#000');
    }
  });
  my_input.addEvent('blur', function() {
    var tip = this.getParent().getElement('div');
    if ( this.value == '' ) {
      this.value = tip.getProperty('text');
      this.setStyle('color', '#888');
    }
  });
my_input.addEvent('submit', function(){
    var tip = this.getParent().getElement('div');
    if ( this.value == tip.getProperty('text') ) {
      this.value = '';
      this.setStyle('color', '#000');
    }

}); 
};

* Both of the above work fine on their own but not when loaded together
This is Combined code that also isn't working

[code]window.addEvent('domready', function() {
// initialise the form
var inputs2 = $$('#chronoform_Quote input[type=text], textarea'); inputs2.each(function(my_input) {
var tip = my_input.getParent().getElement('div');
if ( !my_input.value ) {
my_input.value = tip.getProperty('text');
my_input.setStyle('color', '#f00');
tip.setStyle('display', 'none');
}
showtip(my_input);
});
// add events to fire when the submit button is clicked
$('submit').addEvent('click', function() {
inputs2.each(function(my_input) {
var tip = my_input.getParent().getElement('div');
if ( my_input.value == tip.getProperty('text') ) {
my_input.value = '';
my_input.setStyle('color', '#000');
}
}); });
// add events to fire when the submit button loses focus
$('submit').addEvent('mouseout', function() {
inputs2.each(function(my_input) {
var tip = my_input.getParent().getElement('div');
if ( my_input.value == '' ) {
my_input.value = tip.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 showtip(my_input) {
var tip = my_input.getParent().getElement('div');
if ( !my_input.value ) {
my_input.value = tip.getProperty('text');
}
tip.setStyle('display', 'none');
my_input.addEvent('focus', function() {
var tip = this.getParent().getElement('div');
if ( this.value == tip.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}
});
my_input.addEvent('blur', function() {
var tip = this.getParent().getElement('div');
if ( this.value == '' ) {
this.value = tip.getProperty('text');
this.setStyle('color', '#888');
}
});
my_input.addEvent('submit', function(){
var tip = this.getParent().getElement('div');
if ( this.value == tip.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}

});

var required, cl, inputs, input, label, type, name, skip, marker;
marker = new Element('span', {
html: ' *',
styles: {
color: 'red',
fontWeight: 'normal'
}
});
inputs = $$('div input, div select, div textarea');
required = [];
inputs.each(function(el) {
cl = el.getProperty('class');
if(cl !== null && (cl.contains("validate['required'") || cl.contains("validate['group["))) {
required.push(el);
}
});
required.each(function(el) {
el.addClass('cf_required');
skip = false;
type = el.getProperty('type');
if(type == 'radio' || type == 'checkbox') {
if(name != el.getProperty('name')) {
label = el.getParent().getParent().getFirst('label');
name = el.getProperty('name');
} else {
skip = true;
}
} else {
label = el.getParent().getFirst('label');
}
if(label && !skip) {
label.grab(marker.clone(), 'bottom');
label.addClass('cf_required');
}
});



$('input, textarea').each(function () {
var Input = $(this);
var default_value = Input.val();

Input.focus(function() {
if(Input.val() == default_value) Input.val("");
}).blur(function(){
if(Input.val().length == 0) Input.val(default_value);
});
});
};[/code]

Hi lbsadmin,

In the combined version you are missing some brackets, the required field code is inside the showtip function which I don't think was intended.

Your best helper here is your web browser developer tools, check the Console tab to see the JavaScript errors on the page.

Bob

Thanks Greyhead.
I am a bit of a novice when it comes to Javascript ( although I was pretty proud of myself for getting the tip code to work!). And think I am getting in a little over my head.

I used the console on both the combined script and the required fields one and both come up with the same error in console
"TypeError: $(...) is null
$('input, textarea').each(function () {"

I assume this is where its missing a bracket, but have tried a number of combinations with no luck...It also all seems to match up as far as opening and closing goes ( although I am sure I am missing something simple!) Any chance you could point me even closer to the answer?

Hi lbsadmin,

Using MooTools (which you are here) $('id') requires and element id and returns a single element; $$('. . .') uses a CSS selector and returns and array of elements. You can't use $('input, textarea').

Bob

Ok so I noticed the FAQ on the required fields had slightly different code to mine....which was from a while ago. So I updated the code I had and fixed errors that appeared in console to get it almost working.

It now has working tips in the form fields, the only problem is required fields show up with multiple red stars instead of just one and I get the following error

TypeError: $(...) is null
$('submit').addEvent('click', function() {

Heres my current (almost working) code
[code]window.addEvent('domready', function() {
// initialise the form
var inputs2 = $$('#chronoform_Quote input[type=text], textarea'); inputs2.each(function(my_input) {
var tip = my_input.getParent().getElement('div');
if ( !my_input.value ) {
my_input.value = tip.getProperty('text');
my_input.setStyle('color', '#f00');
tip.setStyle('display', 'none');
}
showtip(my_input);
});
// add events to fire when the submit button is clicked
$('submit').addEvent('click', function() {
inputs2.each(function(my_input) {
var tip = my_input.getParent().getElement('div');
if ( my_input.value == tip.getProperty('text') ) {
my_input.value = '';
my_input.setStyle('color', '#000');
}
}); });
// add events to fire when the submit button loses focus
$('submit').addEvent('mouseout', function() {
inputs2.each(function(my_input) {
var tip = my_input.getParent().getElement('div');
if ( my_input.value == '' ) {
my_input.value = tip.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 showtip(my_input) {
var tip = my_input.getParent().getElement('div');
if ( !my_input.value ) {
my_input.value = tip.getProperty('text');
}
tip.setStyle('display', 'none');
my_input.addEvent('focus', function() {
var tip = this.getParent().getElement('div');
if ( this.value == tip.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}
});
my_input.addEvent('blur', function() {
var tip = this.getParent().getElement('div');
if ( this.value == '' ) {
this.value = tip.getProperty('text');
this.setStyle('color', '#888');
}
});
my_input.addEvent('submit', function(){
var tip = this.getParent().getElement('div');
if ( this.value == tip.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}

});

var required, cl, inputs, input, label, type, name, skip, marker;
marker = new Element('span', {
html: ' *',
styles: {
color: 'red',
fontWeight: 'bold'
}
});
inputs = $$('div input, div select, div textarea');
required = [];
inputs.each(function(el) {
cl = el.getProperty('class');
if(cl !== null && (cl.contains("validate['required'") || cl.contains("validate['group["))) {
required.push(el);
}
});
required.each(function(el) {
el.addClass('cf_required');
skip = false;
type = el.getProperty('type');
if(type == 'radio' || type == 'checkbox') {
if(name != el.getProperty('name')) {
label = el.getParent().getParent().getFirst('label');
name = el.getProperty('name');
} else {
skip = true;
}
} else {
label = el.getParent().getFirst('label');
}
if(label && !skip) {
label.grab(marker.clone(), 'bottom');
label.addClass('cf_required');
}
});
};
[/code]

I got it working!!

.....but with an error

Since the last post I got thinking about your first response and my initial idea to load the two scripts in separate "load JS" actions.

Rather than merge the two functions I just made one run on domready and the other window.onLoad then I just had to move a few brackets and it works....But still getting the
TypeError: $(...) is null
$('submit').addEvent('click', function() {
Not sure what is the cause of this but if its going to work not too fussed...

Heres the code as it is now for anyone who needs it.
[code]window.addEvent('domready', function() {
// initialise the form
var inputs2 = $$('#chronoform_Quote input[type=text], textarea'); inputs2.each(function(my_input) {
var tip = my_input.getParent().getElement('div');
if ( !my_input.value ) {
my_input.value = tip.getProperty('text');
my_input.setStyle('color', '#f00');
tip.setStyle('display', 'none');
}
showtip(my_input);
});
// add events to fire when the submit button is clicked
$('submit').addEvent('click', function() {
inputs2.each(function(my_input) {
var tip = my_input.getParent().getElement('div');
if ( my_input.value == tip.getProperty('text') ) {
my_input.value = '';
my_input.setStyle('color', '#000');
}
}); });
// add events to fire when the submit button loses focus
$('submit').addEvent('mouseout', function() {
inputs2.each(function(my_input) {
var tip = my_input.getParent().getElement('div');
if ( my_input.value == '' ) {
my_input.value = tip.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 showtip(my_input) {
var tip = my_input.getParent().getElement('div');
if ( !my_input.value ) {
my_input.value = tip.getProperty('text');
}
tip.setStyle('display', 'none');
my_input.addEvent('focus', function() {
var tip = this.getParent().getElement('div');
if ( this.value == tip.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}
});
my_input.addEvent('blur', function() {
var tip = this.getParent().getElement('div');
if ( this.value == '' ) {
this.value = tip.getProperty('text');
this.setStyle('color', '#888');
}
});
my_input.addEvent('submit', function(){
var tip = this.getParent().getElement('div');
if ( this.value == tip.getProperty('text') ) {
this.value = '';
this.setStyle('color', '#000');
}

});

window.onload=function(){
var required, cl, inputs, input, label, type, name, skip, marker;
marker = new Element('span', {
html: ' *',
styles: {
color: 'red',
fontWeight: 'normal'
}
});
inputs = $$('div input, div select, div textarea');
required = [];
inputs.each(function(el) {
cl = el.getProperty('class');
if(cl !== null && (cl.contains("validate['required'") || cl.contains("validate['group["))) {
required.push(el);
}
});
required.each(function(el) {
el.addClass('cf_required');
skip = false;
type = el.getProperty('type');
if(type == 'radio' || type == 'checkbox') {
if(name != el.getProperty('name')) {
label = el.getParent().getParent().getFirst('label');
name = el.getProperty('name');
} else {
skip = true;
}
} else {
label = el.getParent().getFirst('label');
}
if(label && !skip) {
label.grab(marker.clone(), 'bottom');
label.addClass('cf_required');
}
});
};
};[/code]

It will turn information for users into field based tooltips and put a red asterisk on required fields

Thanks GreyHead for your Help

That did the trick!
Thanks again GreyHead!