Checkbox converted into text area

Checkbox to support free text entry

Apex version 4.2.x and 5 - Theme 25

An interesting request came through the other day from a client requesting a very simple thing. Once checkbox selected to open additional field for free text entry. 

This is better described with these images

Item before

Item After

As simple as it seemed to me took me a bit of time to think through how am I going to solve this.

Initial idea to simple convert last item into a free text area didn't work for me as then all entered values would be shown under my checkbox item which was not what I was after. 

This is a simple to-do list to follow. 

1. Alter your table so that in that extra column you can store values of newly entered text input field
2. Create one page items to store your original value - mine is called OTHER_DETAILS
3. Create DA to handle the logic of changes done on screen once original checkbox was clicked (ORACLE_RESPONSIBILITY) and execute two JavaScript actions

Script 1

Script 2

These are both of the JavaScript codes here for you to use. 

Please keep in mind that you will have to change names of variables used together with all Page referenced fields. 

 $("#P75_OTHER_DETAILS").hide();
var originValue = $x('P75_OTHER_DETAILS').value;
   
// HTML to be added that creates temp TEXT area
var addedHtml = '<tr><td></td><td><div id=P75_OTHER_DETAILS_CONTAINER_TEMP> <div><fieldset id=P75_OTHER_DETAILS_fieldset class=textarea tabindex=-1><textarea wrap=virtual style=resize: both; name=p_t51 rows=5 cols=80 maxlength=200 id=P75_OTHER_DETAILS_TEMP class=textarea></textarea></fieldset></div></div></td></tr>';
  
//check if last Other option is checked
if($( "#P75_ORACLE_RESPONSIBILITIES input:last:checked" ).prop('checked')){
//CHECK IT DOESNT exist
if( !$('#P75_OTHER_DETAILS_CONTAINER_TEMP').length ) {
    //THEN BUILD TEXT AREA as new column of that table
   $( "#P75_ORACLE_RESPONSIBILITIES input:last").closest("tr").after(addedHtml);          
  $('#P75_OTHER_DETAILS_TEMP').focus();      
  }
} else { //hide temp text area
  //remove newly added element
  $('#P75_OTHER_DETAILS_CONTAINER_TEMP').remove();
  //CLEAR original value
  $s('P75_OTHER_DETAILS', '');
} //end if checked

//set temp to original
if(originValue == $x('P75_OTHER_DETAILS').value){
  $s('P75_OTHER_DETAILS_TEMP', originValue); //SET TEMP TEXT ARE TO initial value
  }

Second JS script

$( "#P75_OTHER_DETAILS_TEMP" ).change(function() {
//only if original value different than new one
if( $x( "#P75_OTHER_DETAILS").value != $x( "#P75_OTHER_DETAILS_TEMP").value){
     $s('P75_OTHER_DETAILS', $x( "#P75_OTHER_DETAILS_TEMP" ).value);
 }
});

The final result should let you enter a value once last item from your checkbox is selected keeping the values in you text box if there were previously saved.

Of course you can further develop your code to include references to objects with APEX supported syntax of this.triggeringElement but for purpose of making the code as clear as possible I posted the code with the full names.

Cheers,

SLino