Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Show/Hide Fields in front-end form.

Show/Hide Fields in front-end form. 14 Oct 2012 17:15 #4481

  • goslingcools
  • goslingcools's Avatar
  • 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
The administrator has disabled public write access.

Show/Hide Fields in front-end form. 14 Oct 2012 18:24 #4482

  • JoomGuy
  • JoomGuy's Avatar
  • 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.
  1. 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();    
        }
      });
  2. 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 administrator has disabled public write access.
The following user(s) said Thank You: admin

Show/Hide Fields in front-end form. 14 Oct 2012 18:37 #4483

  • goslingcools
  • goslingcools's Avatar
  • 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
Last Edit: 14 Oct 2012 18:37 by goslingcools.
The administrator has disabled public write access.

Show/Hide Fields in front-end form. 14 Oct 2012 18:52 #4484

  • JoomGuy
  • JoomGuy's Avatar
  • 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!!!
The administrator has disabled public write access.

Show/Hide Fields in front-end form. 14 Oct 2012 19:00 #4485

  • goslingcools
  • goslingcools's Avatar
  • 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
The administrator has disabled public write access.

Show/Hide Fields in front-end form. 14 Oct 2012 19:17 #4486

  • goslingcools
  • goslingcools's Avatar
  • 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>
The administrator has disabled public write access.

Show/Hide Fields in front-end form. 14 Oct 2012 19:39 #4487

  • JoomGuy
  • JoomGuy's Avatar
  • 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 administrator has disabled public write access.
The following user(s) said Thank You: admin

Show/Hide Fields in front-end form. 14 Oct 2012 20:03 #4488

  • goslingcools
  • goslingcools's Avatar
  • 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.
Last Edit: 14 Oct 2012 20:05 by goslingcools.
The administrator has disabled public write access.

Show/Hide Fields in front-end form. 14 Oct 2012 20:11 #4489

  • goslingcools
  • goslingcools's Avatar
  • 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.
The administrator has disabled public write access.

Show/Hide Fields in front-end form. 14 Oct 2012 20:12 #4490

  • JoomGuy
  • JoomGuy's Avatar
  • 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 administrator has disabled public write access.
The following user(s) said Thank You: admin

Show/Hide Fields in front-end form. 14 Oct 2012 20:14 #4491

  • JoomGuy
  • JoomGuy's Avatar
  • 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!!!
The administrator has disabled public write access.

Show/Hide Fields in front-end form. 14 Oct 2012 20:14 #4492

  • goslingcools
  • goslingcools's Avatar
  • 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.
The administrator has disabled public write access.

Show/Hide Fields in front-end form. 14 Oct 2012 20:16 #4493

  • goslingcools
  • goslingcools's Avatar
  • 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.
The administrator has disabled public write access.

Show/Hide Fields in front-end form. 14 Oct 2012 20:26 #4494

  • JoomGuy
  • JoomGuy's Avatar
  • 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!!!
The administrator has disabled public write access.

Show/Hide Fields in front-end form. 14 Oct 2012 20:36 #4496

  • goslingcools
  • goslingcools's Avatar
  • 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
Last Edit: 14 Oct 2012 20:36 by goslingcools.
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Time to create page: 0.103 seconds

Get Started