Jump to content
  • 0

Using Parameters to dynamically hide sections


Question

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!

Link to post
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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';
}
Link to post
Share on other sites
  • 0

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!

Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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.
Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

 

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

Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...