close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

show / hide content based on a drop down

Thread began 9/12/2014 5:22 am by Jamie | Last modified 9/15/2014 1:02 pm by Jason Byrnes | 3254 views | 8 replies |

Jamie

show / hide content based on a drop down

Hey Jason

On the attached _insert and _results pages I have used a checkbox (named 'GuestSpeaker') to show/hide to text fields (NonMemberName and NonMemberCompany) which I got and adjusted slightly from another thread (http://www.webassist.com/forums/posts.php?id=32553) This works great but I have 2 questions.

1. I have a drop down (MemberName) on the same page which has an option Guest Speaker (this is in row 1 of the table in the datbase) and would like to use that instead of the check box to determine the show/hide for the above and update the column in the database for 'GuestSepaker' as the current checkbox does.

2. on the _update page, at the moment if the GuestSpeaker is checked (in the database set to 1) and you go to an entry that has this set, it doesnt automatically show the hidden fields even though the checkbox is pre-ticked. How would I get it to automatically show the content if the db column is set to 1?

Thanks

Jamie

Attached Files
presentations_insert.php
presentations_update.php
Sign in to reply to this post

Jason ByrnesWebAssist

here is an example script using a select list value to toggle a txt field visibility, notice that I call the setTextField() function just before the body tag, this is to trigger the function to show it onload of the page if the selected option is 3, change the selected option to see this in action.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
function setTextField() {
var theList = document.getElementById("select");
var theText = document.getElementById("textfield");
var theSelectedValue = theList.options[theList.selectedIndex].value;
if(theSelectedValue == "3") {
theText.style.display = "block";
} else {
theText.style.display = "none";
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<p>
<select name="select" id="select" onChange="setTextField();">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected="selected">Three</option>
<option value="4">Four</option>
</select>
</p>
<p>
<input type="text" name="textfield" id="textfield" style="display: none;">
</p>
</form>
<script type="text/javascript">
setTextField();
</script>
</body>
</html>
Sign in to reply to this post

Jamie

thats brilliant. many thanks Jason

how would you update to use a y/n radio set?

Sign in to reply to this post

Jason ByrnesWebAssist

like this:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
function setTextField(theVal) {
var theText = document.getElementById("textfield");
if(theVal == "y") {
theText.style.display = "block";
} else {
theText.style.display = "none";
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<p>
<label>
<input name="RadioGroup1" type="radio" id="RadioGroup1_0" onChange="setTextField(this.value);" value="y" checked>
Yes</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="n" id="RadioGroup1_1" onChange="setTextField(this.value);">
No</label>
<br>
</p>
<p>
<input type="text" name="textfield" id="textfield" style="display: none;">
</p>
</form>
<script type="text/javascript">
setTextField("y");
</script>
</body>
</html>
Sign in to reply to this post

Jamie

thanks Jason. if the radio is defaulted to no, how do you get the hidden content to default to hidden until yes is selected

also, see PM

Sign in to reply to this post

Jason ByrnesWebAssist

set:
<script type="text/javascript">
setTextField("y");
</script>

to:
<script type="text/javascript">
setTextField("n");
</script>

Sign in to reply to this post

Jason ByrnesWebAssist

or use this:

<script type="text/javascript">
var theGroup = document.getElementsByName("RadioGroup1");
var selectedItem = 0;
for(i = 0; i < theGroup.length; i++) {
if(theGroup[i].checked) {
selectedItem = theGroup[i].value;
}
}
setTextField(selectedItem);
</script>

Sign in to reply to this post

Jamie

thanks Jason

Sign in to reply to this post

Jason ByrnesWebAssist

you're welcome

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...