hide/unhide fields depending upon other fields.

Question

aashishn86 0 Junior Poster

15 Years Ago

Hi!! I have to hide/unhide some fields on basis of some other fields...
so , i found this script on the web.
i can't understand the function completely
what is the
if ( txt.match(id1) )
block doing ??

is there any other way of doing the same...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
// <![CDATA[


function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}
// ]]>
</script>
</head>

<body>
<table width="340" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title">Type:</td>
<td class="field">
<select name="type" onchange="display(this,'text','image');">
<option>Please select:</option>
<option value="image">Image</option>
<option value="text">Texts</option>
<option value="invisible">Invisible</option>
</select>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td class="align-center" colspan="2"><input type="submit" name="submit" value="Update" /> <input type="reset" value="Reset" /></td>
</tr>
</tfoot>
<tbody id="text" style="display: none;">
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="image" style="display: none;">
<tr>
<td class="title">Image:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">X Coordinates:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Y Coordinates:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="title">Display:</td>
<td class="field">
<select name="display">
<option value="visitors">Visitors</option>
<option value="hits">Hits</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>

javascript

2 Contributors
13 Replies
138 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by essential

essential 84 Posting Shark

15 Years Ago

What's been bothering you about this script?
If you were just asking about this if ( txt.match( idx ) ) { // so...on... block--wel it simply say's

that If the value of selected option
matched (or equal) the id of any defined element, then set the style.display of this element into block.

Hope it clears the issue.

essential 84 Posting Shark

15 Years Ago

If you need another example of this concept, you can try this one.
All codes is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Display and Hide</title>
<style type="text/css">
/* <![CDATA[ */
div#handle p { display : none; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var display, elem;

elem = function( ids ) {
return ids = ( document.getElementById ) ? document.getElementById( ids ) : document.all[ ids ];
}; // you can define any elem in the page by assigning their id's in replace of ids argument in the elem() function

display = function() {
index = elem("sel").selectedIndex; 
/* Get the index value of the selected option */

div = elem("handle").getElementsByTagName("p"); 
/* Get the div element with an id of handle, and the element p (or paragraph) inside this div. */
  for ( x = 0; x < div.length; x++ ) {
     if ( div[x].style.display == "block" ) {
     div[x].style.display = "none";
     }
   }
  div[index].style.display = "block"; 
 
/* It says, that if the display style of the p element is "block" then convert it to "none" Otherwise display it block */
};

// ]]>
</script>
</head>
<body>
<div id="content">
<div id="handle">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
</div>

<form id="frm" action="*" onsubmit="return false;">
<div>
<select id="sel" name="sel" size="1" onchange="display();">
<option value="">Show Paragraph 1</option>
<option value="">Show Paragraph 2</option>
<option value="">Show Paragraph 3</option>
<option value="">Show Paragraph 4</option>
<option value="">Show Paragraph 5</option>
</select>
</div>
</form>
</div>
</body>
</html>

essential 84 Posting Shark

15 Years Ago

This is the moded version of my first post. It can be set to show as many elements as you want in the field. Just be sure to set it in the value attribute of the option.
e.g. ( if i want to show p1, p2, and p3-- then i'll set the following option value to o0o1o2).

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Display and Hide</title>
<style type="text/css">
/* <![CDATA[ */
div#handle p { display : none; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[

var display, elem, num;

elem = function( ids ) {
return ids = ( document.getElementById ) ? document.getElementById( ids ) : document.all[ ids ];
}; // you can define any elem in the page by assigning their id's in replace of ids argument in the elem() function

display = function() {
index = elem("sel").selectedIndex; 
/* Get the index value of the selected option */

// New variable added
num = elem("sel").options[index].value.match(/\d/ig);
div = elem("handle").getElementsByTagName("p"); 
/* Get the div element with an id of handle, and the element p (or paragraph) inside this div. */
  for ( x = 0; x < div.length; x++ ) {
     if ( div[x].style.display == "block" ) {
     div[x].style.display = "none";
     }
   } // This the additional block;
   if ( num && num !== null ) {
      for ( y in num ) {
      div[parseInt(num[y])].style.display = "block";
      }
   }
   else {
  div[index].style.display = "block"; 
   }

/* It says, that if the display style of the p element is "block" then convert it to "none" Otherwise display it block */
};

// ]]>
</script>
</head>
<body>
<div id="content">
<div id="handle">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
</div>

<form id="frm" action="*" onsubmit="return false;">
<div>
<select id="sel" name="sel" size="1" onchange="display();">
<!-- Ok let's say for example, if i wanted to show element p1 and element p2 in the field. Then i will just simply set an instance of (o0o1) in the value attribute of the option element.
In this example i will apply it on the second option. --> 
<option value="">Show Paragraph 1</option>
<!-- Setting the value of these option to (o0o1) to show the 1st paragraph and 2nd paragraph -->
<option value="o0o1">Show P1 and P2</option>
<!-- goes with 2nd and 3rd paragraph -->
<option value="o1o2">Show P2 and P3</option>
<option value="">Show Paragraph 4</option>
<option value="">Show Paragraph 5</option>
</select>
</div>
</form>
</div>
</body>
</html>

hope it clears the issue now...

essential 84 Posting Shark

15 Years Ago

Set an id instead of its value and apply the same process in the above example.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

aashishn86 0 Junior Poster · Answer 1 · 2009-04-27T15:01:36+00:00

well, i got the function now...
now, the problem i am facing is
i have two values in the dropdown for which i need the same fields to show themselves
lets say i have two values
"value one" and "value two" for which i want the fields to unhide
but i can only name one of the <tbody tag >
<tbody id="value one" style="display:none;">
how to i work around it ??
i hope i am clear.............
thanks.....

aashishn86 0 Junior Poster · Answer 2 · 2009-04-27T18:57:26+00:00

hi !!
thanks for that......
but the problem i have is i need to save the "select values" in the database also,
so i can't have the same name in values for two different fields :(

aashishn86 0 Junior Poster · Answer 3 · 2009-04-27T19:49:33+00:00

as in

<option id="one" value="one">one</option>
<option id="one" value="two">two</option>

??

essential 84 Posting Shark Featured Poster · Answer 4 · 2009-04-27T23:14:06+00:00

No it should be in the same instance of (a2ojmg2) or any combination of letter's and number's. Now on line#30 in my last posted code:

// replace the line with this-->
num = elem("sel").options[index].id.match(/\d/ig);

and an example of allowed id pattern.

<option id="showElem0and2" value="yourValue">Show P1 and P3</option>
<option id="rememberThatElemOneIsIndex0andTwoIs1" value="yourValue">Show P1 and P2</option>
<!-- And More option -->

aashishn86 0 Junior Poster · Answer 5 · 2009-04-27T23:29:18+00:00

hey thanks....
i'll try that tomorrow at work and post back...

aashishn86 0 Junior Poster · Answer 6 · 2009-04-28T13:59:26+00:00

hi @ essential
thanks for all the help..........
frankly speaking your code is a little complicated for a newbie like me :(
so couldn't really understand much of it....
the problem still remains..

essential 84 Posting Shark Featured Poster · Answer 7 · 2009-04-28T14:14:16+00:00

No it's just plain and simple! If we compact the whole program, then the functionality of its feature will provide less accurate results... Ok what's got in your way?

aashishn86 0 Junior Poster · Answer 8 · 2009-04-28T14:25:44+00:00

hey !!
i used

txt=obj.options[obj.selectedIndex].text

instead of

txt=obj.options[obj.selectedIndex].value

and it works for me now :) :)
and i am gonna try and understand your code as well, and ask you to help solve my doubts :)
thanks....

essential 84 Posting Shark Featured Poster · Answer 9 · 2009-04-28T17:09:04+00:00

Yeah, you should try to play some experiment in the code.