Forum OpenACS Development: Re: Show/hide fields based on the different inputs

Collapse
6: Re: Show/hide fields based on the different inputs (response to 1)
Posted by kousalya S on 10/28/10 12:11 PM
Thanks Brian & Jim.

Let me clarify what I need.

For instance,

I have a form with dropdown option, field1, field2,field3 which I specified within ad_form.

The dropdown field has value1, value2 and value3.
On selecting value1 in the dropdown, the field1, field2 should appear.

On the selection of value2 in the dropdown , field1 and field3 should appear but not field2.

Its like show and hide option based on the selection of dropdown options.

Please help me out!

Collapse
7: Re: Show/hide fields based on the different inputs (response to 6)
Posted by Brian Fenton on 10/28/10 06:59 PM
What you are trying to do requires standard Javascript, nothing special from OpenACS, but it does require a knowledge of Javascript. You could use the Ajaxhelper package to help you - here's an example. Install the Ajaxhelper package in the APM. Then you need to create the following 3 files: brian.adp, brian.tcl and brian2.tcl
Collapse
8: Re: Show/hide fields based on the different inputs (response to 6)
Posted by Brian Fenton on 10/28/10 07:00 PM
brian.adp looks like this:

<master>
@field1_js;noquote@

<formtemplate id="@form_id@"></formtemplate>

Collapse
9: Re: Show/hide fields based on the different inputs (response to 6)
Posted by Brian Fenton on 10/28/10 07:02 PM
brian.tcl looks like this:

set field1_options [list {Two 2} {Three 3} {Four 4}]
set html_list [list onClick field1_func() ]
set container_name "other_fields"
set after_html "<div id=\"$container_name\" ></div>"

set form_id "myForm"
ad_form \
    -name $form_id  \
    -form {
        {field1:text(select)
            {label "Field1"}
            {options $field1_options}
            {html $html_list}
            {after_html $after_html}
        }
    }

set ajax_js [ah::ajaxupdate \
                -container "$container_name" \
                -url "brian2" \
                -pars "'field1='+\$F('field1')"]

set field1_js "<script language=\"javascript\"> field1_func = function() { $ajax_js } </script>"

Collapse
10: Re: Show/hide fields based on the different inputs (response to 6)
Posted by Brian Fenton on 10/28/10 07:02 PM
brian2.tcl looks like this:

ad_page_contract {

} {
  {field1 "2"}
}

ns_log Notice "In brian2 - field1=$field1"

if {$field1 == 2} {
set response "
<label for=\"field2\">Field2:</label>
<select name=\"field2\" id=\"field2\" multiple=\"multiple\" >
<option value=\"a\">Apple</option>
<option value=\"b\">Brian</option>
<option value=\"c\">Carrot</option>
</select>"
} elseif {$field1 == 3} {
set response "
<label for=\"field3\">Field3:</label>
<input name=field3 size=50 value=\"This is Field3\">"

} else {
set response "
<label for=\"field4\">Field4:</label>
<select name=\"field2\" id=\"field2\"  >
<option value=\"d\">Dog</option>
<option value=\"e\">Easy</option>
<option value=\"f\">Fruit</option>
</select>"

}
ns_write $response

ad_script_abort

Collapse
11: Re: Show/hide fields based on the different inputs (response to 6)
Posted by Brian Fenton on 10/28/10 07:04 PM
So if you watch the error log, you'll see that brian2 gets called every time you change the "Field1" pulldown. Hopefully this gives you an idea of how to achieve what you with OpenACS.