-
goslingcools
-
-
Offline
-
Senior Member
-
- Posts: 64
- Thank you received: 7
-
Karma: 1
-
|
Hi,
How can I hide / show other fields based on for example a radio button field?
Also when you hide a required field, it should not be required anymore. And when showing the field again it should be required again.
Non-required fields work when hiding, that's no problem.
I use J2.5 and jQuery.
Regards,
GC
|
|
-
JoomGuy
-
-
Offline
-
Moderator
-
-
Joomla Enthusiast, Lover of Cooking
- Posts: 1115
- Thank you received: 195
-
Karma: 64
-
|
Hi,
There's two ways to achieve what you're trying to do... 1 is more simple than the other.
- Simplest way - not tested but should definitely get you most of the way there... just swap the IDs in the selectors
- You need to add a JS script that runs when the document is ready
jQuery(document).ready(function($) {// dollar passed in so you can use it as a short reference in script
//Your functions will go here...
});
- To disable/hide by default
$('#my_field').prop('disabled', true)
$("#my_field_container").hide(); // Actually, you might want to remove the .hide() from the field itself and instead, hide the div container that the field sits in... Otherwise you'll potentially end up with some white space. Do this in a separate call by selecting the div id as you did above.
- You now need to add an onchange/onclick event handler to detect the change on your combo, checkbox or radio buttons...
$("#radio_field").click(function() {
var radioVal= $("#radio_field input:radio:checked").val();
if(radioVal == the_value_you_want_to_show_on){
//Show the container & enable the field]
$("#my_field").prop('disabled', false);
$("#my_field_container").show();
}else{
//Hide the container & disable the field
$("#my_field").prop('disabled', true);
$("#my_field_container").hide();
}
});
- More complex
If you're going to use this on a lot of fields in the same table, you'll have a hell of a lot of redundant data - not good. You might consider saving related records in separate tables using ajax or by redirecting the browser to a different form/layout based on the values of your users' input. Please see other posts about ajax, multipage forms and reuse values in forms for some tips on how you might achieve this
Hope it helps!
Gez
|
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The following user(s) said Thank You: admin
|
-
goslingcools
-
-
Offline
-
Senior Member
-
- Posts: 64
- Thank you received: 7
-
Karma: 1
-
|
Wow, thank you for your quick and clear support on a Sunday evening!!
I think your third code example is very suitable for me.
I was worried about the fact that the required param was set in the tables in the Cooking Component Creator and that I could not change it with javascript.
But your example $("#my_field").prop('disabled', false); and $("#my_field").prop('disabled', true); sounds great!
Thank you very much!
Regards,
GC
|
|
-
JoomGuy
-
-
Offline
-
Moderator
-
-
Joomla Enthusiast, Lover of Cooking
- Posts: 1115
- Thank you received: 195
-
Karma: 64
-
|
No probs...
Just to be clear, you need all three bits of the script so that, when it's all put together. That is, unless you add the script to an existing JS script that is already called by your view.
The whole thing would look like; jQuery(document).ready(function($) {// dollar passed in so you can use it as a short reference in script
//==== Hide and disable your chosen fields/containers when doc ready====//
//Disable Field
$('#my_field').prop('disabled', true);
//Hide Container
$("#my_field_container").hide();
//==== Handle the click function ====//
$("#radio_field").click(function() {
//initialise var with the current value of radio button
var radioVal= $("#radio_field input:radio:checked").val();
if(radioVal == the_value_you_want_to_show_on){
//Show the container & enable the field]
$("#my_field").prop('disabled', false);
$("#my_field_container").show();
}else{
//Hide the container & disable the field
$("#my_field").prop('disabled', true);
$("#my_field_container").hide();
}//end hide/disable
});//end .click()
});//end document ready As I said, not tested, written as an example so hope it works!
Gez
|
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
|
-
goslingcools
-
-
Offline
-
Senior Member
-
- Posts: 64
- Thank you received: 7
-
Karma: 1
-
|
Ok, thanks!
I will test it by adding this code to the end the frontend form.php
Willl let you know how this works out.
Thanks again,
GC
|
|
-
goslingcools
-
-
Offline
-
Senior Member
-
- Posts: 64
- Thank you received: 7
-
Karma: 1
-
|
Hi,
The hide/show works, but on top of the screen I still get the system-message "Field required: Email" if I try to save the item. (with email field disabled and hidden)
The jQuery validate is disabled but not the php validation, right?
How could I achive that?
Here's my complete code:
<?php
/** ______________________________________________
* o O | |
* ((((( o < Generated with Cook Self Service V2.0 |
* ( o o ) |______________________________________________|
* --------oOOO-----(_)-----OOOo---------------------------------- www.j-cook.pro --- +
* @version 1.0
* @package Franchisers
* @subpackage Uizendkrachten
* @copyright Copyright (C) 2012. All rights reserved.
* @author Gosling Cools | COBIZ webdevelopment - http://www.cobiz.nl - info@cobiz.nl
* @license GNU General Public License version 2 or later
*
* /!\ Joomla! is free software.
* This version may have been modified pursuant to the GNU General Public License,
* and as distributed it includes or is derivative of works licensed under the
* GNU General Public License or other free or open source software licenses.
*
* .oooO Oooo. See COPYRIGHT.php for copyright notices and details.
* ( ) ( )
* -------------\ (----) /----------------------------------------------------------- +
* \_) (_/
*/
// no direct access
defined('_JEXEC') or die('Restricted access');
cimport('classes.upload');
$fieldSets = $this->form->getFieldsets();
?>
<?php $fieldSet = $this->form->getFieldset('uizendkracht.form');?>
<fieldset class="fieldsform">
<dl>
<?php
// Uitzendkracht Naam
$field = $fieldSet['jform_u_naam'];
?>
<dt><?php echo $field->label; ?></dt>
<dd><?php echo $field->input; ?></dd>
<?php
// Email
$field = $fieldSet['jform_u_email'];
?>
<span class="email_container">
<dt><?php echo $field->label; ?></dt>
<dd><?php echo $field->input; ?></dd>
</span>
<?php
// Klanten ID
$field = $fieldSet['jform_klanten_id'];
$field->jdomOptions = array(
'list' => $this->lists['fk']['klanten_id']
);
?>
<dt><?php echo $field->label; ?></dt>
<dd><?php echo $field->input; ?></dd>
<?php
// My Enumeration
$field = $fieldSet['jform_my_enumeration'];
$field->jdomOptions = array(
'list' => $this->lists['select']['my_enumeration']->list
);
?>
<dt><?php echo $field->label; ?></dt>
<dd><?php echo $field->input; ?></dd>
<?php
// PDF
$field = $fieldSet['jform_pdf'];
$field->jdomOptions = array(
'actions' => array('remove', 'thumbs', 'delete', 'trash')
);
?>
<dt><?php echo $field->label; ?></dt>
<dd><?php echo $field->input; ?></dd>
</dl>
</fieldset>
<script type="text/javascript">
jQuery(document).ready(function($) {// dollar passed in so you can use it as a short reference in script
//==== Hide and disable your chosen fields/containers when doc ready====//
//Disable Field
$('#jform_u_email').prop('disabled', true);
//Hide Container
$(".email_container").hide();
//==== Handle the click function ====//
$("#__jform_my_enumeration").click(function() {
//initialise var with the current value of radio button
var radioVal= $("#__jform_my_enumeration input:radio:checked").val();
if(radioVal == 'deheer'){
//Show the container & enable the field]
$("#jform_u_email").prop('disabled', false);
$(".email_container").show();
}else{
//Hide the container & disable the field
$("#jform_u_email").prop('disabled', true);
$(".email_container").hide();
}//end hide/disable
});//end .click()
});//end document ready
</script>
|
|
-
JoomGuy
-
-
Offline
-
Moderator
-
-
Joomla Enthusiast, Lover of Cooking
- Posts: 1115
- Thank you received: 195
-
Karma: 64
-
|
Hi @goslingcools
Firstly, you should check out @VeCrea post here to see how to add a script to your view... He's actually discussing how to add jquery ui however, you'll get the idea and be able to add this in your own js file or even include it in an existing one... j-cook.pro/forum/35-jquery/4138-how-to-a...-your-component#4138
The jQuery validate is disabled but not the php validation, right?
How could I achive that? Try searching in the HTML source of the form for a required attribute in the email field... In all honesty, I'm not 100% sure but you should be able to set that attribute=false in a similar fashion to disabling it. Try .prop('required',false); and use true to swap back...
you might also consider creating a function that you could re-use anywhere once you've tested it fully.
Something along the lines of; function toggleShowHideDisableEnable(myDiv, myField, value){
//Do stuff... Pretty much the same as before except that
// you replace the id strings in the script with the parameters passed in
} No probs at all...
Gez
|
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The following user(s) said Thank You: admin
|
-
goslingcools
-
-
Offline
-
Senior Member
-
- Posts: 64
- Thank you received: 7
-
Karma: 1
-
|
Hi,
I understand adding the jQuery script to another location would be better but that's not the issue now.
The required stuff is not a prop, but a class. I removed the class with jQuery but still the PHP returns the system-message "Field required: Email". This is due to the fact that in the model/forms/uitzendkracht.xml is says:
<field name="u_email"
label="FRANCHISERS_FIELD_EMAIL"
alias="u_email"
required="true"
filter="STRING"
class="validate[required,custom[email]]"
validate="email"
type="cktext"/>
See the required="true"
So the javascript validation is gone, but not the PHP validation when you try to save the item....
So maybe I should take out the required="true" and just keep it required with the javascript...? Gonna have a try.
|
|
-
goslingcools
-
-
Offline
-
Senior Member
-
- Posts: 64
- Thank you received: 7
-
Karma: 1
-
|
Yep, Disable the required in the XML file and than this script works!
jQuery(document).ready(function($) {// dollar passed in so you can use it as a short reference in script
//==== Hide and disable your chosen fields/containers when doc ready====//
//Disable Required
$("#jform_u_email").removeClass('inputbox validate[required,custom[email]]');
//Hide Container
$(".email_container").hide();
//==== Handle the click function ====//
$("#__jform_my_enumeration").click(function() {
//initialise var with the current value of radio button
var radioVal= $("#__jform_my_enumeration input:radio:checked").val();
if(radioVal == 'deheer'){
//Show the container & enable the Required
$("#jform_u_email").addClass('inputbox validate[required,custom[email]]');
$(".email_container").show();
}else{
//Hide the container & disable the Required
$("#jform_u_email").removeClass('inputbox validate[required,custom[email]]');
$(".email_container").hide();
}//end hide/disable
});//end .click()
});//end document ready
I will turn this into a global function for simular fields. Also I need to add the '*' back manually.
But this will work.
|
|
-
JoomGuy
-
-
Offline
-
Moderator
-
-
Joomla Enthusiast, Lover of Cooking
- Posts: 1115
- Thank you received: 195
-
Karma: 64
-
|
Classes are targeted like $('.classname') - with a dot '.' followed by it's name. You can also target by ID and class like ("#id.class").
Sorry, I clearly forgot - setting a field as disabled doesn't disable validation...
Try $("#jform_u_email").removeClass('required'); AND $("#jform_u_email").addClass('required'); instead of the $("#jform_u_email").prop() methods to disable and enable;
Gez
|
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The following user(s) said Thank You: admin
|
-
JoomGuy
-
-
Offline
-
Moderator
-
-
Joomla Enthusiast, Lover of Cooking
- Posts: 1115
- Thank you received: 195
-
Karma: 64
-
|
Change your xml back to how it was, you should be able to do this in jQuery.
Let me know if it works,
Gez
|
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
|
-
goslingcools
-
-
Offline
-
Senior Member
-
- Posts: 64
- Thank you received: 7
-
Karma: 1
-
|
Haha, just did that and it works! And take out the required=true from the XML file.
|
|
-
goslingcools
-
-
Offline
-
Senior Member
-
- Posts: 64
- Thank you received: 7
-
Karma: 1
-
|
No, the XML required stuff needs to be removed because this is on the PHP level of validating.
|
|
-
JoomGuy
-
-
Offline
-
Moderator
-
-
Joomla Enthusiast, Lover of Cooking
- Posts: 1115
- Thank you received: 195
-
Karma: 64
-
|
Ah, of course... Sorry, been in front of this screen for 14hrs today!
Hacky workaround - Maybe you could set it hidden but pass a dummy email by setting the value with jQuery.
Better way - AJAX method would really be useful to you... You could switch the required to false in the params object or even load the email field from a separate layout.
Anyway, glad you got it working!
Gez
|
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
|
-
goslingcools
-
-
Offline
-
Senior Member
-
- Posts: 64
- Thank you received: 7
-
Karma: 1
-
|
14h is a little too much I guess...
Thanks for thinking with me.
Dummy email is not a real nice option, than I should take it out before it's saved to the db. But maybe an AJAX call could help me out with that indeed.
This form will be a very long form with many of these show/hide groups. So working with separate layouts would make me crazy I guess!
I will take a look at the AJAX call altering the field params. Else I will just take out the required=true and add an * to the field labels myself.
Btw. you are not a member of the Cook Joomla Component Creator team? Just another happy user?
Cheers!
GC
|
|
|