Forums

Hi

Have 2 forms, one for new registration and another for editing the registration details.

The new form has a dropdown list, the last value being “other”. If a user chooses “other” then a text box opens and user can explain. The explanation text box is initially hidden and is made visible only if the user chooses “other”, ie triggers a “New Value” event. This works. The new registration is saved to the db.

Then also have a list, built in ChronoConnectivity5, that shows some field data from the registration form. This has an edit column, that opens the 2nd form, the one for editing registration details. This works, the edit form opens and is populated with the registration details that are going to be edited.

Say the user, when first registering, did not choose “other”. In this case the conditional text box is not visible. The user submits the form and it's saved to the db. The user then decides to edit the rgistration details, opens the edit form and changes value to “other”. This opens the text box and user types some text. Then he submits the form, gets sent back to the Connectivity and is saved to the database. The DB save works. Very nice.

The challenge is when the user wants to make a second edit. When he opens the edit form for the 2nd time the conditional text box that now holds data is not visible because the event that triggers it is “New Value” and there is no “New Value”. “New Value” is the only event that is triggered by data values. All the other events, eg “Change Value”, “Check” etc are linked only to field names, not data values. In any case seems they would not work because we likely need an event like “OnLoad” or similar so that when a form loads and “Field x” has a value of “y”, then show/hide … .

Sorry for the complicated explanation. If this functionality cannot be built, how can I code this.
Not sure where to start, rudimentary PHP, CSS etc.

Thanks
Bill

Hi Bill,

ChronoForms doesn't handle the re-loading of events very elegantly :-(

You can do this with a few few lines of JavaScript in the form On Load Event. It will be something like this

jQuery(document).ready(function(jQ) {
  var dropdown, other;
  dropdown = jQ('#dropdown_id');
  other = jQ('#id_of_other_parent_div');
  if ( dropdown.val() == 'other' ) {
    other.show();
  } else {
    other.hide();
  }
});

Bob

Thanks Greyhead. I'll check this out over the next few days.
Also head over to W3Schools and get some jQuery instruction. Do you think new events will be added to the form app sometime, or are things like this generally solved by hand code.

Hi hangbill,

I hope that this particular one will be handled in a future release (though that is up to Max). In general if you want to do anything beyond the basics in CF then a bit of jQuery will do no harm.

Bob

Hi Bob
Have not got it working yet. This is the code, in custom code in the OnLoad event before HTML Render. The Dropdown25 is the dropdown field id that holds the 'other' value and Text24 is the field id of the box that I want to show/hide. Have tried removing the id # tags. Also tried the $ syntax that W3Schools uses. Text24 is initially set as Parent Hidden, but have tried it Visable and Enabled, but nothing. Seems code is not firing. Have included debug info below too but not sure how to use it.
Hope you can help, thanks
Bill

<script>

jQuery(document).ready(function(jQ) {
  var dropdown, other;
  dropdown = jQ('#dropdown25');
  other = jQ('#text24');
  if (dropdown.val() == 'other') {
    other.show();
  } else {
    other.hide();
  }
});

</script>

This is the debug info

Array
(
    [cont] => lists
    [ccname] => Users
    [act] => edit
    [gcb] => 941
    [users] => Array
        (
            [id] => 941
            [name] => aaddddddd
            [username] => aa
            [email] => aa@aa.com
            [password] => $2y$10$wNp0BGfXb/PruOYPPYbKgOSWhEoTTwN4g4dkzNZiXbUC1peyvIlHq
            [occupation] => other
            [describeoccupation] => wwwwwww
            [status] => Full Member
            [experience] => 
            [explainexperience] => 
            [company] => aa
            [block] => 1
            [sendEmail] => 0
            [registerDate] => 2017-01-14 17:30:11
            [lastvisitDate] => 0000-00-00 00:00:00
            [activation] => 324d6f1879d38a71031eb0b9eb00b290
            [params] => Array
                (
                )

            [lastResetTime] => 0000-00-00 00:00:00
            [resetCount] => 0
            [otpKey] => 
            [otep] => 
            [requireReset] => 0
        )

)

Array
(
)

Errors

Array
(
)

Debug Info

Array
(
)

Hi hangbill,

Please post a link to the form so I can take a quick look.

Bob

Thanks Bob

This is private content

Get to this form from Member Directory, then click edit - last entry

Hi hangbill,

It's the parent of #text24 that is hidden so please try replacing #text24 with #form-row-text24

Bob

Yes that works, thanks Bob !!
So I was trying to hide the label, not the text box ?
Presume I'll need to use an inspect element tool or similar to find the correct id value ?

Hi hangbill,

The first code I gave you was just showing/hiding the text input itself - but as that was inside a hidden div nothing was showing up.

Your browser web developer tools should let you inspect the page HTML to see the id (clicking F12 should load them). ChronoForms is pretty consistent in it's labelling so #form-row-Input_id should work for text boxes.

Bob

Thanks Bob, appreciate it ...

Bob another related question.
Is it ok to use jQuery syntax like demonstrated on many teaching sites and forums, eg they prefix with $. Have tried this but does not work. Does ChronoEngine use a different syntax and is there a guide for this?

$(document).ready(function() {
  var $dropdown, $other;
  $dropdown = $('dropdown25');
  $other = $('form-row-text24');
  if ($dropdown.val() == 'other') {
    $other.show();
  } else {
    $other.hide();
  }
});

Hi Bill,

Always try to use this syntax for Jquery everywhere:

jQuery(document).ready(function($){
//your code using $()
});

Best regards,
Max

Hi Bill,

Max and I disagree here. His code is fine but I don't use it as there was a while when Joomla! used both the MooTools JavaScript library and the jQuery library. As the two didn't mix well I kept $ for MooTools code and use jQ for jQuery code.

In the first line of my code

jQuery(document).ready(function(jQ) {

the jQ near the end says 'use jQ for jQuery here'; you'll see Max has a $ in the same place.

Either is fine, as is using jQuery - except that takes more effort to type. Just pick one and use it consistently; you'll find that pretty much all my examples in the forums here use jQ.

Bob

PS You can add the JavaScript in a Load JavaScript action in the form On Load event.

Got it.
Thanks both Bob and Max.