JS Validation

Hi Bob,
It drives me crazy..
In the J2.5 version with Chrono 4.0 RC3.4.1 it worked nicely.
In the J3.2 version with Chrono V4.0.3 it doesn't anymore
What's the problem? Once "Ja" (field intro1) is selected, the other fields (intr2,3 4 and 4) should be opened/showd in the form

This is the HTML code

<div class="ccms_form_element cfdiv_select" id="intro_container_div"><label for="intro1">Introducé mee?</label><select size="1" id="intro1" class="" title="" name="intro1">
<option value="Nee">Nee</option>
<option value="Ja">Ja</option>
</select>
<div class="clear"></div><div id="error-message-intro1"></div></div>

<div class="ccms_form_element cfdiv_text" style="display: none" id="intro2_container_div">
<label for="Intro2">Voornaam intro</label><input id="Intro2" maxlength="150" size="30" class="" title="" type="text" value="" name="Intro2" />
<div class="clear"></div><div id="error-message-intro2"></div></div>

<div class="ccms_form_element cfdiv_text" style="display: none" id="intro3_container_div">
<label for="Intro3">Achternaam intro</label><input id="Intro3" maxlength="150" size="30" class="" title="" type="text" value="" name="Intro3" />
<div class="clear"></div><div id="error-message-intro3"></div></div>

<div class="ccms_form_element cfdiv_text" style="display: none" id="intro4_container_div">
<label for="Intro4">EGA-HCP Intro</label><input id="Intro4" maxlength="150" size="30" class="" title="" type="text" value="" name="Intro4" />
<div class="clear"></div><div id="error-message-intro4"></div></div>

<div class="ccms_form_element cfdiv_text" style="display: none" id="intro5_container_div">
<label for="Intro5">Lid van</label><input id="Intro5" maxlength="150" size="30" class="" title="" type="text" value="" name="Intro5" />
<div class="clear"></div><div id="error-message-intro5"></div></div>

In the EVENTS tab, I added the Load JS, and put thsi code in:

window.addEvent('domready', function() {
      $('intro1').addEvent('change', function(event) {
      var e = new Event(event);
      if (e.target.value == 'Ja') {
       $('Intro2').getParent().setStyle('display', 'block');
       $('Intro3').getParent().setStyle('display', 'block');
       $('Intro4').getParent().setStyle('display', 'block');
       $('Intro5').getParent().setStyle('display', 'block');
        } else {
        $('Intro2').getParent().setStyle('display', 'none');
       $('Intro3').getParent().setStyle('display', 'none');
       $('Intro4').getParent().setStyle('display', 'none');
       $('Intro5').getParent().setStyle('display', 'none');
        }
      });
    });

Now, with the debugger I get the following response:
Data Array:
Array
(
[option] => com_chronoforms
[tmpl] => component
[chronoform] => PITCHenPUTT
)
Validation Errors:
Array
(

Hope you can give me a further push to get this working again....
)

Oops,
The last part should be
Array
(
)

Hope you can give me a further push to get this working again....(<<this was between teh brackets...)

Hi SPABO,

Joomla! 3 switched to using JQuery as well as MooTools so the problem may well be a JavaScript error on the page. Do you see any?

Bob

After using a SUBMIT, I see no furtehr errors

Hi SPABO,

And before the Submit? Have you checked the JavaScript console in your browser Web Develop tools?

Bob

It says:

Data Array:
Array
(
[option] => com_chronoforms
[tmpl] => component
[chronoform] => PITCHenPUTT
)
Validation Errors:
Array
(
)

Hi SPABO,

That's from the ChronoForms debugger, not from the JavaScript Console :-(

Bob

Okay...

It gives this JS error
TypeError: e.target is null.

Hi SPABO,

So it looks as though either e isn't defined here or it doesn't have a 'target' property:

var e = new Event(event);
      if (e.target.value == 'Ja') {

Bob

Bob,
This is exactly what already is in the JS....

Hi SPABO,

Yes, and those are the lines that appear to be causing the error.

Bob

Hi Bob,
But the value is there.....

So, what is the root-cause it says "null", while I selected YES

Note: Std the dropdown says NO, but than I see no errors, only if YES is selected...

Rgds
K

Hi SPABO,

As I said before either e isn't defined or it doesn't have a 'target' property, You can use your browser web developer tools to take a look and see exactly what is happening.

Bob

As said before...it always worked nicely with this code.
What else can I do...

One more question Bob.
Did you test it from your end?

Still puzzled to find out the difference between Chrono 4.0 RC3.4.1 with J2.5.X and Chrono V4.0.3 with J3.2.X

Hi SPABO,

Did I test what exactly? I got the errors I wrote about.

I'm not clear what you are asking about the different versions of ChronoForms. There are some quite big Joomla! changes between 2.5 and 3 and I think that most of the ChronoForms changes are to handle those.

Bob

Well, maybe it would be possible to write a code snippet for the event (like you did to show a textbox when a checkbox is checked)

HI SPABO,

There's no point adding code snippets while there are JavaScript errors on the page. They need to be fixed first :-(

Bob

These are the warnings

Gebruik van getAttributeNode() wordt niet meer ondersteund. Gebruik in plaats daarvan getAttribute(). mootools-core.js:108
SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.js:1
Error: http://www.mywebsitename.nl/templates/templatename/jquery.js is being assigned a //# sourceMappingURL, but already has one
Gebruik van getPreventDefault() wordt niet meer ondersteund. Gebruik in plaats daarvan defaultPrevented. jquery.js:3

After selecting Ja it says:

TypeError: e.target is null

This is all I can say...😢