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

Hi all,

How to hide and show specific fields in the form based on the inputs.

For instance,

I need specific fields to be appeared for input1
and those fields should be disappeared for input2

Please help me out

Collapse
Posted by Dave Bauer on
Hi,

There isn't any built in faeture for this in OpenACS. In general you can just a Javascript event on update of one field to update the fields that appear.

Collapse
Posted by suresh suresh on
hi dave
i also searching as you same.
if u find solution pls inform me
Collapse
Posted by kousalya S on
Thanks

since I am new to Openacs
could you please explain me with some example

Collapse
Posted by Brian Fenton on
Hi Kousalya

there are lots of good JavaScript examples here:
https://www.w3schools.com/js/js_ex_dom.asp

regards
Brian

Collapse
Posted by Jim Lynch on
Show in a diagram or image what you want the exact form to look like, and show more diagrams of what it should look like in different situations, and tell what should trigger the change
Collapse
Posted by kousalya S on
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
Posted by Brian Fenton on
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
Posted by Brian Fenton on
brian.adp looks like this:

<master>
@field1_js;noquote@

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

Collapse
Posted by Brian Fenton on
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
Posted by Brian Fenton on
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
Posted by Brian Fenton on
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.
Collapse
Posted by kousalya S on
Thanks Brian,

I made the changes as per your instructions but couldnot see any change. I installed ajax helper as well.

Javascript doesnot seem to work in the mentioned tcl and adp files.

somewhere I have gone wrong.

Below are my files,

new.adp:
<master>
@type_js;noquote@
<formtemplate id="@form_id@"></formtemplate>

new.tcl:

set type_options [list {type1 1} {type2 2} {type3 3}]
set html_list [list onClick type_func() ]
set container_name "field2"
set after_html "<div id=\"$container_name\" ></div>"

set form_id "showhide"
ad_form \
    -name $form_id  \
    -form {

        {type:text(select)
            {label "Type"}
            {options $type_options}
            {html $html_list}
            {after_html $after_html}
        }


    }

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

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

created new2.tcl file its not being called on request.

correct me

Collapse
Posted by Brian Fenton on
Ah sorry kousalya, I forgot that my master includes the call to the Javascript. So change brian.adp to this:

<script type="text/javascript" src="/resources/ajaxhelper/prototype/prototype.js"></script>
@field1_js;noquote@

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

Collapse
Posted by kousalya S on
Hi Brian,

I included the adp script.

Still I didnt find any way.

The page remains blank I mean doesnot display anything.

sorry for bothering again.

Could you please recheck the query

Collapse
Posted by kousalya S on
I removed <master> tag.
now I can view the fields but

when I select the options in the field1 the javascript doesnot call brian2.tcl file.

I couldnot find where the mistake is.

Collapse
Posted by Brian Fenton on
Ok, there's probably something else in my install that is not in your's. I don't really have time to hold your hand on this one, but try the following.

First thing is to check for errors in the AOLserver error log and also in Firefox's "Error Console".

Second, can you run brian2 directly in the browser and check that it's working fine (you should see the ns_log entry). It should just return raw HTML like this:

<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>

Brian

Collapse
Posted by kousalya S on
Thanks for your help Brian.

sorry for disturbing as well.

In my firefox error console, I am getting an error as "ajax not defined".

I changed the "set container_name "other_fields" to set container_name "field2".

Now I get an error as field1_func not defined in firefox error console.

could you please help me

Collapse
Posted by Brian Fenton on
Hi kousalya

2 things: first, can you test my files UNMODIFIED, as I can't tell what impact your changes have made to them?

Second, the "ajax not defined" error means that the Ajaxhelper Javascript files may be in a different location on your OpenACS install. I would recommend you search your installation for the "prototype.js" file. Then change the brian.adp file to have the correct path.

I should add here that the scripts I posted are running on an older version of OpenACS (5.4) and Ajaxhelper (0.82d), so things may be different if you're running on a different version. I don't have a clean install to hand to retest.

Brian

Collapse
Posted by Brian Fenton on
Also in my previous posting, I asked you "can you run brian2 directly in the browser and check that it's working fine (you should see the ns_log entry)". You didn't do this.
Collapse
Posted by kousalya S on
Hi Brian,

I followed all your steps.

Brian2.tcl file runs in browser.

Moreover i didnt get any error in ns_log_entry.

In firefox->Error console, I got an error as sidebar is not defined.

Ajax file is located in the same path as you have defined in brian.adp

Brian.tcl file shows a blank page still.

Please let me know when you will be online

Collapse
Posted by kousalya S on
Hi Brian,

I found out another solution without using ajax and javascript.

Below is my code,

ad_page_contract {
This page allows the users to add bus tickets.
} {
{sample_id:integer 0 }
{contact_id ""}
{samplenew: ""}
{time: ""}
{sector: ""}
{form_mode "edit" }
}

---------------------------------------------------------------
# Create the Form
# ---------------------------------------------------------------

set form_id "sample"
ad_form -name sample -export {user_id package_id} -mode $form_mode -form {
object_id:key
{sample_nr:text(text),optional {label "Sample Nr" } }
{contact_id:text(select),optional {label "Type"} {options { {"type1" "1"} {"type2" "2"} {"type3" "3"} } }
{html { onchange "document.sample.__refreshing_p.value='1';document.sample.submit()" } }}
{enquiry_nr:text(select),optional {label "Enquiry"} {options { { "Select" "" } [db_list_of_lists sql "
select enquiry_nr, enquiry_id from im_enquiry "] } } }
}

set samplenew[list]

if { $contact_id == "1" } {
lappend samplenew {nr:text(text),optional {label "Nr"}}
} elseif { $contact_id == "3" } {
lappend samplenew {time:text(text),optional {label "Time"}}
} else {
lappend samplenew {nr:text(text),optional {label "Nr"}}
lappend samplenew {time:text(text),optional {label "Time"}}
lappend samplenew {sector:text(text),optional {label "Sector"}}
}

ad_form -extend -name sample -form $samplenew \

Collapse
Posted by kousalya S on
Thanks for your kind help 😊
Collapse
Posted by Brian Fenton on
I'm glad you solved your problem. It's a pity the Ajax solution didn't work for you.