Using Parameters to dynamically hide sections

[fishsticks]

I'm not able to dynamically collapse a section even though I've been referring to these Caspio instructions :
http://howto.caspio.com/tech-tips/creat ... tions.html

I have a cascading dropdown box called 'Request_Response' and it has only two possible selections, 'Yes' and 'No'. When the user selects 'Yes', I want a contact section to appear on the same datapage for them so that they can add their email/phone info. By default, the section will be hidden. Unfortunately, I am not able to make this work. For the record, I can make a button that hides the same section (as described by the Caspio page above).

I have named the email/phone section as 'Section1'. Here's the Javascript I have in the footer:

<script>
var check = document.getElementById('Section1');
if('[@Request_Response]' == 'Yes')
{
check.style.display='inline';
}
else
{
check.style.display='none';
}
</script>

I have tried inserting other fields and values into the Javascript but no luck. Thanks is advance!

[ShWolf]

Hi,

You should not use parameters here. Parameters are something that's passed to the page once and is not changed since.
Instead, you should "subscribe" to your dropdown's onchange event and change your section's visibility depending on the value selected.

You can find an example code below (insert into the footer):
 

<script type="text/javascript">
var dropdown = document.getElementById('INSERT_DROWDOWN_ID_HERE');

dropdown.onchange = function() {
var dropdown = document.getElementById('INSERT_DROPDOWN_ID_HERE');

var hidableSection = document.getElementById('Section1');
hidableSection.style.display =
dropdown.options[dropdown.selectedIndex].value == 'Yes'
? 'inline'
http://dl.dropbox.com/u/5504454/whitespace.png: 'none';
}

[fishsticks]

Thanks ShWolf, this is wonderful! One problem though; it doesn't work on my cascading dropbox. I'm a JavaScript novice but I believe it's due to the fact that this field's ID changes each time the form loads. For example:

• First page load: id=“InsertRecordRequest_Response_4332B26195Aâ€

• Second load: id=“InsertRecordRequest_Response_90423A84B48â€

• Third Load: id=“InsertRecordRequest_Response_5DR3956C930â€

I tried using getElementsByName since the field's name seems to stay consistent but I had no luck/skill with that.

Do you know if this can be overcome? This is my last hurtle to completing this form.

Thanks again!

[bahar_vm]

You are close, for cascading dropdown the ID changes so you should use Name, ie:

document.getElementsByName('InsertRecordFIELDNAME')[0]

Don't forget to use [0] as you see above.

Best,

Bahar M.

[fishsticks]

That's perfect, bahar_vm! Many thanks to everyone who assisted in slaying THE BEAST.

[caspiouser22]

Slightly relevant to the thread - similar JS involved.

I am trying to dynamically populate a dropdown with the date. I have taken and modified the caspio supplied JS but am having some trouble. I can populate a text box, but not a dropdown. I suspect it is due to the field name condition you mentioned below, but I have had no luck in fiddling and getting it to work.

Would you be so kind to take a look at my code? (Comments etc.. remain from the original caspio code - i suggest ignoring them)

/* Declaration and initialization */

Stamp = new Date();

var v_TimeStamp;

Hours = Stamp.getHours()

Mins = Stamp.getMinutes();

/* Attach a prefix with digit '0' if the minutes is less than 10. */

if (Mins < 10) {

Mins = "0" + Mins;

}

/* Construct the value of the v_TimeStamp variable in the format m/d/yyyy hh:mm */

v_TimeStamp=('' + (Stamp.getMonth() + 1) +"/"+Stamp.getDate()+ "/"+Stamp.getFullYear() + ' ' + Hours + ":" + Mins);

/* Field name - TimeofView is referred with a prefix - EditRecord */

document.getElementByName("InsertRecordburst_date")[0].value=v_TimeStamp;

My drop down field is called burst_date and the label is also burst_date.

Should I be using parameters to receive the JS?

Any advice hugely appreciated.

Elliot

[ShWolf]

Hi,

Try this one:

<script type="text/javascript">
/* Declaration and initialization */
Stamp = new Date();
var v_TimeStamp;
Hours = Stamp.getHours()
Mins = Stamp.getMinutes();

/* Attach a prefix with digit '0' if the minutes is less than 10. */
if (Mins < 10) {
Mins = "0" + Mins;
}

/* Construct the value of the v_TimeStamp variable in the format m/d/yyyy hh:mm */
v_TimeStamp=('' + (Stamp.getMonth() + 1) +"/"+Stamp.getDate()+ "/"+Stamp.getFullYear() + ' ' + Hours + ":" + Mins);

/* Field name - TimeofView is referred with a prefix - EditRecord */

var v_drop = document.getElementsByName("InsertRecordburst_date")[0];
if (v_drop)
{
	var new_option = document.createElement('option');
        new_option.value = v_TimeStamp;
        new_option.text = v_TimeStamp;
        new_option.selected = true;
	try
	{
	v_drop.add(new_option,null);
	}catch(v_ex){}   
} 

</script>

Hope this helps.

[caspiouser22]

Many thanks SHworlf - It works a charm.

Now I'm going to get my references books out a figure out how you did it! Many thanks

[caspiouser22]

Just posting in case this helps anyone else... I actually changed the field to a virtual field and this is how I went about changing the Javascript

<script type="text/javascript">
/* Declaration and initialization */
Stamp = new Date();
var v_TimeStamp;
Hours = Stamp.getHours()
Mins = Stamp.getMinutes();

/* Attach a prefix with digit '0' if the minutes is less than 10. */
if (Mins < 10) {
Mins = "0" + Mins;
}

/* Construct the value of the v_TimeStamp variable in the format m/d/yyyy hh:mm */
v_TimeStamp=('' + (Stamp.getMonth() + 1) +"/"+Stamp.getDate()+ "/"+Stamp.getFullYear() + ' 12:00 AM');

/* Field name - TimeofView is referred with a prefix - EditRecord */

var v_drop = document.getElementsByName("cbParamVirtual6")[0];
if (v_drop)
{
   var new_option = document.createElement('option');
        new_option.value = v_TimeStamp;
        new_option.text = v_TimeStamp;
        new_option.selected = true;
   try
   {
   v_drop.add(new_option,null);
   }catch(v_ex){}   
} 

</script>

Elliot

[luizcruz]

 

Hi,

You should not use parameters here. Parameters are something that's passed to the page once and is not changed since.

Instead, you should "subscribe" to your dropdown's onchange event and change your section's visibility depending on the value selected.

You can find an example code below (insert into the footer):

 

<script type="text/javascript">
var dropdown = document.getElementById('INSERT_DROWDOWN_ID_HERE');

dropdown.onchange = function() {
var dropdown = document.getElementById('INSERT_DROPDOWN_ID_HERE');

var hidableSection = document.getElementById('Section1');
hidableSection.style.display =
dropdown.options[dropdown.selectedIndex].value == 'Yes'
? 'inline'
http://dl.dropbox.com/u/5504454/whitespace.png: 'none';
}

 

Hello Guys!

 

I'm trying to "subscribe" to the dropdown's onchange event and change the section's visibility depending on the value selected.

 

I would like to do the following:

 

When I choose "Yes" in the dropdown Test_1 the "Section1" is visible

When I choose "No" in the dropdown Test_1 the "Section2" is visible

 

<script type="text/javascript">

 

var x = document.getElementsByName("InsertRecordTest_1")[0];

 

x.onchange = function()

{

var x = document.getElementsByName("InsertRecordtest_1")[0];

 

var Section1 = document.getElementById('Section1');

var Section2 = document.getElementById('Section2');

 

if(x == "Yes");{

Section1.style.display =  'inline' : 'none';

}

 

else if(x == "No");{

Section2.style.display =  'inline' : 'none';

}

}

</script> 

 

Please, does anyone have any idea what's wrong?

 

Thanks!

 

Luiz

[Jan]

Hello, Luiz!

If I understand correctly, the code should be like

 

if(x == "Yes");{

Section1.style.display = 'inline';

Section2.style.display = 'none';

}

 

else if(x == "No");{

Section1.style.display = 'none';

Section2.style.display = 'inline';

}

[luizcruz]

Hello Jan!

 

Thank you very much!

 

I tried the solution you provided, but unfortunately it not works yet!

 

You understood correctly, in the first dropdown we have 9 options, 2 of them should toggle the visibility of two different sections! 

 

Regards!

 

Luiz

[Jan]

Hello, Luiz!

 

Is it 

var x = document.getElementsByName("InsertRecordtest_1")[0];

exact text?

 

Maybe, problem is

var x = document.getElementsByName("InsertRecordtest_1")[0];

Should be

var x = document.getElementsByName("InsertRecordTest_1")[0];

[luizcruz]

Hi Jan!

 

Yes, you're right!

 

"test" and "Test" will not work, it is wrong!

 

But, unfortunately the problem is not the "test or Test", because the script above is just an hipotetical script!

 

I tested with the true data, without the "t or T" issue, and it´s still does not work!

 

Regards!

 

Luiz