Show input field on radio select

Show input field on radio select

  • Published by
    Robert Stark
  • Last modified
    30 September 2021
  • Voting
    Average rating
  • Favourites
  • Concerns
    Component Template
  • Since Version
    3.X
  • Up to date
    Yes
  • Profile concerned
    Webdesigner, Developer

I wanted a way when admins click "other", then the hidden field would show
('Other Job Title'):
Explanation

We have 2 fields:

  • Job Title - Radio Field | ID = 70 |  Field alias: job_title
  • Other Job Title - Text Field | ID = 101 |  Field alias: other_job_title

Radio Field

In your FLEXIcontent Type Item Form (add the following):

//HIDE OTHER JOB FIELD
   
$('#label_outer_fcfield_101, #container_fcfield_101').hide();
 
    //RADIO FIELDS NAME
   $('input[name="custom[job_title][0]"]').change(    function() {      
       
    //RADIO OTHER VALUE 
    if (this.checked && this.value == 'other') {      
        $('#label_outer_fcfield_101, #container_fcfield_101').show();     
    }
    else {      
        $('#label_outer_fcfield_101, #container_fcfield_101').hide();      
        $('#container_fcfield_101 input').val('');     
    }    
});
 
//ON OPEN/LOAD
if ($('input#custom_job_title_0_2').is(':checked') == true) {   
    $('#label_outer_fcfield_101, #container_fcfield_101').show(); 
}

Here's an image shot of this:
Explanation

Finally - I used the following code in my item template to get it to work:

Here's an image shot of this:
Explanation

Finally - I used the following code in my item.php template to get it to work:

$job_title = '';
FlexicontentFields::getFieldDisplay( $item, "job_title", null, 'display', 'item' );
FlexicontentFields::getFieldDisplay( $item, "other_job_title", null, 'display', 'item' );
$job_title = $item->fields[ "other_job_title" ]->display;
if ( $job_title == '' ) {
$job_title = $item->fields[ "job_title" ]->display;
}
echo $job_title;
  
//ONLOAD - choose the unique other value if ($('input#custom_job_title_0_2').is(':checked') == true) { $('#label_outer_fcfield_101, #container_fcfield_101').show(); } or if ($('.fcfieldval_container_70 input[value="other"]').is(':checked') == true) { $('.control-group#id-101').show(); }
© 2018 Flexicontent. All Rights Reserved.