Using SelectBox to Hide/Unhide Fields in a Form

[ctripp]

Hi Steve and Forum Members,

I am working on a project that requires a field in the 'add new record' form to be hidden or unhidden based on an sql valuelist derived select box in the form. I think that this is quite similar to the dynamic master and slave select box filtering utilizing Javascript. I have successfully implemented that type of function in the past, but I can't figure out how to make the field Hide using the variable sent into Javascript.

I have two Tables EQUIPMENT and PRODUCTS. In the PRODUCTS table there is a field called PRODUCT_Bulk_Type that is set to either 1 or NULL (boolean generated from a check box in the Products Form) If the value is 1 then the product can be purchased in bulk quantities. The Code for the Equipment form is supposed to look at the Product ID from the Product Table and the selected ID in the forms valuelist select box and then query the PRODUCT table to find out if PRODUCT_Bulk_Type == 1 or not. If it equals 1 then the form should react by Unhiding a field on the form called EQUIPMENT_Quantity.

Here is the code that I have cobbled together so far, but it is not working. I am actually not sure if I am even approaching the problem correctly.

Code: Select all

<?php
class tables_EQUIPMENT {
   function EQUIPMENT_Installed_Date__default(){
      return date('Y-m-d');
   }
   function block__after_new_record_form(){

import('Services/JSON.php');
$json = new Services_JSON();// convert PHP arrays to javascript arrays.
$record =& Dataface_Application::getInstance()->getRecord();
$productID = $record->val('EQUIPMENT_PRODUCT_ID');
        $query = "Select PRODUCT_ID, PRODUCT_Bulk_Type from PRODUCT where PRODUCT_ID='$productID'";
        $bulk = mysql_query($query) or die(mysql_error());
         
   echo <<<END
<script language="javascript"><!--
    var bulkval = '.$json->encode($bulk).';
    var product_field = document.getElementById('EQUIPMENT_PRODUCT_ID');
    product_field.onchange = function(){
    var selected_product = product_field.options[product_field.selectedIndex].value;
    if ( bulkval[PRODUCT_Bulk_Type] == NULL){
   document.getElementById(EQUIPMENT_Quantity).style.display = 'none';
}   
};
    //--></script>
END;
    }
// Also place this javascript after an edit record form...
    function block__after_edit_record_form(){
    return $this->block__after_new_record_form();
    }
}
?>


Any guidance you may have to help me figure this out would be greatly appreciated.

Thank you,

- Clayton

[ctripp]

I am exploring another way to do this using the Usable forms Javascript at quirksmode.
But this will require me to inject REL information into the generated <tr> tags and inputs.

http://www.quirksmode.org/dom/usableforms.html

I still have not managed to get it work at all either way yet, so if anyone has an idea, I would love to hear it.

I will keep you posted on my progress.

-Clayton

[shannah]

I have also developed a widget that supports this... unfortunately it is developed for Xataface 2.0 which isn't complete yet. The documentation for this module can be found at
http://xataface.com/dox/modules/depselect/latest/

[ctripp]

Hi Steve,

Thank you for the link on what is coming in 2.0 looks like the depselect will answer a lot of needs for users.
After reading through it, I can see how it would be used in place of the Master/Slave JS example in the wiki,
but I am unclear on how to apply it for Hiding/Unhiding Entire Fields, based on a select box.

Thank you for your time.

I love the product.

Clayton

[camt]

I found a solution to this as follows;
Follow the wiki here;
http://xataface.com/documentation/how-t ... avascripts
I called on function Tchange in my fields.ini file.
In my custom javascript.js file i used this code to hide either field counter or field timer depending on what was selected in the 'type' field.

Code: Select all

function Tchange(type) {

var counter = document.getElementById('counter')
var counter_row = document.getElementById('counter_form_row')
var timer = document.getElementById('f-calendar-field-3')
var timer_row = document.getElementById('timer_form_row')
var timer2 = document.getElementById('f-calendar-field-2')
var timer2_row = document.getElementById('licence_date_start_form_row')

if(type == 'Timer')
{   
    timer.style.display = 'table-row';
    timer_row.style.display = 'table-row';
    timer2.style.display = 'table-row';
    timer2_row.style.display = 'table-row';
    counter.style.display = 'none'; 
    counter_row.style.display = 'none'; 
}

if(type == 'Counter')
{   
    counter.style.display = 'table-row'; 
    counter_row.style.display = 'table-row';
    timer.style.display = 'none';
    timer_row.style.display = 'none';
    timer2.style.display = 'none';
    timer2_row.style.display = 'none';
}

}

I too tried to originally do this in the delegate class, but am a total programming beginner so found this was the simplest way... hope it helps.

What I would now like to do is raise another question - I am calling my table from a relationship as a transient with widget:type = grid.
Is it possible for this transient drop down field to also have a javascript function that hides/shows some of the other transient fields?

Much appreciated,

Cam

[camt]

Ah I misread and realised you needed to hide fields on another table, my apologies..