Forums

Hello,

I try to add Javasript in differents input forms, but it don't work :

I transform the form in custom mode and add

onblur="if(this.value==''){this.value='Nom *';}" onfocus="if(this.value=='Nom *'){this.value='';}"

by exemple on the differents input at this adress http://www.goffe.be/credoc/index.php/fr/contact.
But on the website, {this.value='';} is deleted on the forms.

Can you help me ? Thanks.

Hi sebg,

Please see this FAQ about using JavaScript in your form. I think that the problem with the {} is that ChronoForms thinks that they are placeholders for form values to be substituted.

You can add this script like this in a Load JS action:

window.addEvent('domready', function() {
  $('nom').addEvents({
    blur: function() {
      if( this.value == '' ) { this.value='Nom *'; }
    },
    focus: function() {
      if( this.value=='Nom *' ) { this.value=''; }
    },
    submit: function() {
      if( this.value=='Nom *' ) { this.value=''; }
    },
  });
  // add more inputs here
});

Bob

Thanks GreyHead !

Hello GreyHead,

On my form, I have a Load JS in the 'Onload' Event.
In the JS :

window.addEvent('domready', function() {

      $('Nom').addEvents({
        blur: function() {
          if( this.value == '' ) { this.value='Nom *'; }
        },
        focus: function() {
          if( this.value=='Nom *' ) { this.value=''; }
        },
        submit: function() {
          if( this.value=='Nom *' ) { this.value=''; }
        },
      });
      // add more inputs here
      $('email').addEvents({
        blur: function() {
          if( this.value == '' ) { this.value='Email *'; }
        },
        focus: function() {
          if( this.value=='Email *' ) { this.value=''; }
        },
        submit: function() {
          if( this.value=='Email *' ) { this.value=''; }
        },
      });
      $('adresse').addEvents({
        blur: function() {
          if( this.value == '' ) { this.value='Adresse'; }
        },
        focus: function() {
          if( this.value=='Adresse' ) { this.value=''; }
        },
        submit: function() {
          if( this.value=='Adresse' ) { this.value=''; }
        },
      });
      $('telephone').addEvents({
        blur: function() {
          if( this.value == '' ) { this.value='Tel *'; }
        },
        focus: function() {
          if( this.value=='Tel *' ) { this.value=''; }
        },
        submit: function() {
          if( this.value=='Tel *' ) { this.value=''; }
        },
      });
      $('message').addEvents({
        blur: function() {
          if( this.value == '' ) { this.value='Message'; }
        },
        focus: function() {
          if( this.value=='Message' ) { this.value=''; }
        },
        submit: function() {
          if( this.value=='Message' ) { this.value=''; }
        },
      });
    });

In the 'On Submit' event, I have an email. In the email, the default value haven't change. The sifferents submit in the code don't work ?

Thanks.

Hi sebg,

I'm sorry I don't understand what the problem is. Does the form submit?

Please drag a Debugger action into the On Submit event, then submit the form and post the debug - including the 'dummy emails' results here.

Note: if you are using the Easy Wizard you may need to switch to the Advanced Wizard to do this; if you want to continue to use the Easy Wizard please make a copy of your form first and add the Debugger action to the copy.

Bob

Hi GreyHead,

My english is not perfect, I will try to explain my problems.

I have 3 forms on my website. All these forms have filed default value like 'Nom *', and no label text.

On the forms, I have (I use the form wizard, not easy) in the wizard -> Events :
On Load : show html + Load JS (like in the previous message) ;
On Submit : (Upload file +) show thanks message + Email.

In the 'Load JS', there is a few function to empty the fields if there are by default.

- I thought required fields not changed by the user should display a validation but it does not work.
- In the email, the values are note empty, but by default.

Do you understand my problems ?

Here is the debugger result :
Data Array:

Array
(
[option] => com_chronoforms
[tmpl] => component
[chronoform] => contact-fr
[event] => submit
[Itemid] =>
[lang] => fr
[Nom] => Nom *
[email] => Email *
[adresse] => Adresse
[telephone] => Tel *
[message] => Message
[envoi] => Envoyer
[4bf6716404c8940b56b869a681fec135] => 1
[language] => fr-FR
)

Validation Errors:

Array
(
)

An email has been SENT successfully from mail to mail

om : Nom *
Email : Email *
Adresse : Adresse
Telephone : Tel *
Message : Message

Hi sebg,

Your JavaScript needs to remove the labels from the inputs when the Submit button is clicked so that the ChronoForms validation will work correctly. At present it thinks that the placeholder labels have been added by the user and so treats them as the input value.

Please see this FAQ which links to a tutorial that you can buy from my site.

Bob

Hi GreyHead,

Thanks for this response, it'is perfect !
Do you have some example to make 'dynamic forms' with javascript options ?

Seb

Hi Seb,

I have a half-written tutorial on Dynamic forms in CFv4 - I must sit down and finish it. What exactly do you need to do?

Bob

Thanks for the JS, it found it as i search through the forum, and it point me to the right way.
I think my script improve the original a little bit.
because the original script was static. i had make the script dynamic.

this code should work:

window.addEvent('domready', function() {
    $$('input[type=text]').each(function(my_input){
        if (my_input.value == '') {
            my_input.value = my_input.name;
            }
    my_input.addEvents({
    blur: function() {
      if( this.value == '' ) { this.value=this.name; }
    },
    focus: function() {
      if( this.value==this.name ) { this.value=''; }
    },
    submit: function() {
      if( this.value==this.name ) { this.value=''; }
    }
  });
});
});

of course it can be extended to disable layers & change colors on focus and leave focus.
i use here the name of the input as the default value.

i think to share my solution may help someone else as the original script help me.

Greetings from Switzerland
grafik

Hi grafik,

Neat, thank you. My main comment is that my code used the label rather than the name because the formatting requirements on the name (e.g. no spaces) mean that it may not always work well.

Bob

never thought before about: that the formatting requirements on the name may could be a problem.

i had first try to get the text from the label, but somehow i was never able to do it correct.
(maybe i am just a to big noob at javascript) :wink: 🙄
i am still always happy when i bring something to work.
because many times i had found a code but i am not able to make it work for my site/form.

i know that i can hide the labels when i put this before the first if

var label = my_input.getParent().getElement('label');
label.setStyle('display', 'none');

and with this i can use the lable text inside the preload(replace it inside the first if)

 my_input.value = label.getText('text');

but i can not use it inside the my_imput Event, that is the reason why i use this.name

Hi grafik,

Yes, the code gets tricky because of the way that ChronoForms sets up labels :-( I have it working OK for inputs and textareas if I remember correctly.

Bob