JavaScript - Showing Hidding On Same Page

i am having some problem showing and hiding some div
i want to show the div with the id="universitiesDiv" on one point and the div id="highSchoolsDiv" on another depending on the user choice of selected option.
Code:

function Show (titleImg){
		// the id of the content element from the id of the title element
	var contentID = titleImg.id.replace (/title/, "content");
	var contentDiv = document.getElementById (contentID);
		contentDiv.style.display = "block";

	return false;
}

function Hide (titleImg){
		// the id of the content element from the id of the title element
	var contentID = titleImg.id.replace (/title/, "content");
	var contentDiv = document.getElementById (contentID);

		contentDiv.style.display = "none";

	return false;
}

the functions work fine i have tested them on input type="checkbox" and they work fine
Code:

<select name="education" id="education" 
						onfocus="Show(this.options[this.selectedIndex].value);">
						<option selected value="00">-الرجاء الاختيار-</option>
						<option value="highSchoolsDiv">مدرسة ثانوية</option>
						<option value="universitiesDiv"> كلية </option>
						<option value="universitiesDiv">درجة البكالوريوس</option>
						<option value="universitiesDiv">درجة عليا</option>
						<option value="universitiesDiv">دكتوراه / ما بعد الدكتوراه</option>
						<option value="07">اسألني فيما بعد</option>
						</select>
						</span>
						</div> 
						</td></tr></table>
					</div> 
					 
					<div> 
						<div class="Left"></div>
						<table class="step2" ><tr><td>
						<div class="Right"> 
							<div class="Inner" id="Inner"> 
								<div id="universitiesDiv" class="Row innerError" style="display:none;"> 
									<div class="Left">
									<label for="universities">الجامعة / الكلية</label></div> 
									<div class="Right"> 
									<input  type="text" name="universities" id="universities" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_universities();" onblur="blurInput(this); validate_JoinPersonalInfoForm_universities();" size="55"/> 

 
									</div> 
									 
									 </td></tr><tr><td>
								</div> 
								 
								<div id="highSchoolsDiv" class="Row innerError" style="display:none;"> 
									<div class="Left">
									<label for="high_schools">المدرسة الثانوية</label></div> 
									<div class="Right"> 
										<input  type="text" name="high_schools" id="high_schools" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_high_schools();" onblur="blurInput(this); validate_JoinPersonalInfoForm_high_schools();" size="55"/> 
 
									</div> 
														
									 
								</div> 
							</div> 
						</div> 
						</td></tr></table>	
					</div>

here is doesn't do nothing i have tried onblur onfocus onchange onselect everything i even tried then in side the option <option onselect... !!!!!
anyone can help me, that would be great
thanks

thanks this problem has been solved

Hi, I have the following codes but my checkbox is not appearing. The values of the checkbox do print out in the alert. Can anyone tell me what is wrong with it? Thank you!

Code:

 var table = document.getElementById('maintable');
        var i;  // iterator
        var item; // pointer to item in received list
        for(i = 0; 
            (item = contacts.ReturnValue.getNext()) != undefined; 
            ++i) {
            table.insertRow(i + 1);
            var result = "<td>";
            if(item.FirstName != undefined) {
                result += item.FirstName.Value;
            }
            result += "</td><td>";
            if(item.LastName != undefined) {
                result += item.LastName.Value;
            }
            result += "</td><td>";
            if(item.MobilePhoneGen != undefined) {
                result += item.MobilePhoneGen.Value;
            }
            result += "</td><td>";
            if(item.EmailGen != undefined) {
                result += item.EmailGen.Value;
            }
			
			var td1 = document.createElement("td");
			var chkbox = document.createElement('input');
			chkbox.type='Checkbox';

			table.rows[i + 1].innerHTML = result;
			chkbox.value=item.MobilePhoneGen.Value;
			td1.appendChild(chkbox);
			alert(chkbox.value);	
        }

Hello everyone.

I need some guidance on what might be the best way to tackle this problem. I am creating a page for work. It is a local html site that will be used to show different "questions" in the form of a number of different <div>'s. Currently, the page is set up to have two initial questions that are always visible. The first question asks the user to select from 9 checkboxes and the second asks to choose between 7 radio buttons.

Choosing both calls on an onclick javascript event called setup page. This is where I need the help. There are currently 25 hidden <div>'s on the page. The premise is that, depending on your answers to the first two questions, some of those 25 divs become visible for the user to answer those questions only. Currently, when that setup page onclick event is called, the setup page function goes through each of the 25 questions and says
Code:

pseudocode:

if q1_a.checked || q1_b.checked && q2_a.checked, show question 3 div
if q1_c.checked && q2_b.checked, show question 4 div

etc...

I'm thinking there's got to be a better way. This page is becoming unruly and hard to troubleshoot with so much javascript/variables.

I was thinking about using case statements but with so many variable options between those two first questions I think there would be too many cases.

Any suggestions on another way I can go about this?

Thanks!!

Hi,

I have a form with text boxes which I need to display values ie.
<input type="text" name="image_ref" value="image1" />

This works no porblem until I enter the below javscript onto the page:

<script type="text/javascript">

var level1 = document.getElementById('level1');
level1.style.display = 'none';
var level2 = document.getElementById('level2');
level2.style.display = 'none';
var all_levels = document.getElementById('all_levels');
all_levels.style.display = 'none';


</script>

This code is to hide certain parts of the form until they are activated. the problem is when the parts of the form are activated and displayed, the values inthe text input boxes do not show. Any ideas why this is?

many thanks in advance.

I apologise if this is in the wrong section. I have built a website using iframes at: http://www.krillmeed.com/ but when clicking through the menu, the address bar still stays at http://www.krillmeed.com/ no matter which page is loaded into the iframe. I have seen a number of javascripts around that can change this, but most do not seem to work anymore. Has anyone a sure way to correct this please

hi, on my website: http://zend.warrencreative.com/gemini-group/index.html the carousel on the right is not showing unless you hover your mouse over?!

Can some one please help?

I am using : http://www.twospy.com/galleriffic/

Hi all. Can someone tell me why I can select both HTML AND another radio button, but when I unselect, and select a # of 1 through 4, I can switch between the radio buttons, but I can't if I select HTML first?

Also, what's wrong w/ this code?

Code:

<html>
<head>
<title>Webpage Teacher - V 1.0</title>
</head>
<body>
<script>
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
	if(!radioObj)
		return;
	var radioLength = radioObj.length;
	if(radioLength == undefined) {
		radioObj.checked = (radioObj.value == newValue.toString());
		return;
	}
	for(var i = 0; i < radioLength; i++) {
		radioObj[i].checked = false;
		if(radioObj[i].value == newValue.toString()) {
			radioObj[i].checked = true;
		}
	}
}
function getCheckedValue(radioObj) {
	if(!radioObj)
		return "";
	var radioLength = radioObj.length;
	if(radioLength == undefined)
		if(radioObj.checked)
			return radioObj.value;
		else
			return "";
	for(var i = 0; i < radioLength; i++) {
		if(radioObj[i].checked) {
			return radioObj[i].value;
		}
	}
	return "";
}
</script>
<form name="radioExampleForm" method="get" action="">
<p>
<label for="code1"><input type="radio" value="HTML" name="code" id="code1"> HTML</label>
&nbsp;<label for="number0"><input type="radio" value="0" name="number" id="number0"> Zero</label>
&nbsp;<label for="number1"><input type="radio" value="1" name="number" id="number1"> One</label>
&nbsp;<label for="number2"><input type="radio" value="2" name="number" id="number2"> Two</label>
&nbsp;<label for="number3"><input type="radio" value="3" name="number" id="number3"> Three</label>
&nbsp;<label for="number4"><input type="radio" value="4" name="number" id="number4"> Four</label>
</p>
<p>
<script>
var thevar='';
if(document.forms['radioExampleForm'].elements['number']){
thevar='number';
}else{
thevar='code';
}
document.write(''
+'<input type="button" onclick="alert(\'Checked value is: '+getCheckedValue(document.forms[\'radioExampleForm\'].elements[\''+thevar+'\']));" value="Show Checked Value">');
</script>
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['code'], 'HTML');" value="Set Checked to HTML">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '1');" value="Set Checked to One">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '2');" value="Set Checked to Two"> 
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '3');" value="Set Checked to Three">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '4');" value="Set Checked to Four">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], ''),setCheckedValue(document.forms['radioExampleForm'].elements['code'],'');" value="Uncheck All">
</p>
</form>
</body>
</html>

I simply want it to display the Check Value button and detect 2 different id's for 2 different radio buttons (which is 'code' and 'number')

Thanks!

I have a javascript banner on my site which is working perfectly. however if the user goes to my domain without www. infront of the address the banner is non existent. I'm pretty sure there should be some kind of option for this on my hosts control panel but I can't find anything on it however. (bluehost)

or is there something else that must be done?

Thanks for any help.

Hello guys,

so i have a problem. i have a css/div box, and i have a login form.
what im tryn to do is make it so that when i login, it it takes whats in the action of the form and shows it in the div box. the div box is like one of those cool popup boxes, it's done by using javascript and css.

anyway, the div box works. the login form works. i just haven't been able to figure out how to get it to appear in the div instead of into a new page.

so if any1 can help that would be much appreciated!

here's my code:

Code:

<head><link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="popup.css" /></head>

<form name="Login" method="post" action="login/check.php">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Username:</td>
<td>Password:</td>
</tr>
<tr>
<td><input name="myusername" type="text" class="txt" id="myusername"></td>
<td><input name="mypassword" type="password" class="txt" id="mypassword"></td>
<td><input type="submit" class="btn" name="Submit" value="Login" onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'block' "></td></tr>
</table>
</form>

<div id='PopUp'>
<br />
<div id="close">
<a id="link" 
        onmouseover='this.style.cursor="pointer"' 
        onfocus='this.blur();' 
        onclick="document.getElementById('PopUp').style.display = 'none'">
        <span id="span">Close</span></a>
</div>
</div>

Hey everyone

Okay so...
I'm working on a site, which will include a registration form for users that wish to register. In this registration form I would like it to have an AJAX based effect, such that when the user types each letter out for his username in the field, his username will appear (letter upon letter) itself below, at the end of their unique url.

To explain further:-
Say I type my username to be Owen
Below the field I would like it to display:
http://www.mydomain.com/Owen
http://Owen.mydomain.com/
As I type it. Is this possible?

I've done my research, but had little luck. I'm sure it is possible as I've seen it before in a slightly different manner.

Hope you can or are willing to help

Thank you
Owen Ayres

I am using this JQuery tabbed viewer - http://flowplayer.org/tools/demos/tabs/skin4.htm

on my home page: http://billboardfamily.com/?theme=DeepFocus


The issue I am having is that the content on the "Photos" tab is not showing at all. In the "Blog" tab, I am calling some PHP code & it works fine, so that should be the case with the code called in the "Photos" tab, as well, but it's not working. Can anyone help me figure out why?

Here is the source code for my home page (the tabbed area)

Code:

<!-- BEGIN main blog content -->
<?php
 $lastposts = get_posts('numberposts=1&category=15');
 foreach($lastposts as $post) :
    setup_postdata($post);
 ?>

<div id="mainblog" style="margin-top: 15px;">



<div class="mainblog-content">
	
 <?php endforeach; ?>
</div>

<!-- start tabs-->
<div id="panes">

	<div>
			
		<p>
			<h2 style="color:#000000;"><a style="color:#000000;" href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>

It is 515 feet tall with 38 stories. Severud Associates were the structural engineering consultants. It stands as one of the finest examples of the functionalist aesthetic and a masterpiece of corporate modernism. It was designed as the headquarters for the Canadian distillers Joseph E. Seagram's & Sons, thanks to the foresight of Phyllis Lambert, the daughter of Samuel Bronfman, Seagram's CEO.
		</p>
	</div>

<div>

		
		<p>
			<div id="portfolio-items" class="clearfix">

						
						<?php $allCats = get_categories();
						
						$blogCats = array();
						$blogcat = get_cat_ID(get_option('deepfocus_blog_cat'));
						
						foreach ($allCats as $category) {
							if (in_subcat($blogcat, $category->cat_ID)) $blogCats[] = $category->cat_ID;
						}
						
						$args = array('category__not_in' => $blogCats,
									  'showposts' => get_option('deepfocus_portfolio_number'));
						
						$i = 1;
						query_posts($args);
						if (have_posts()) : while (have_posts()) : the_post(); ?>
							<?php include(TEMPLATEPATH . '/includes/gallery.php'); ?>
						<?php $i++; endwhile; endif; wp_reset_query(); ?>
						
						<div class="clear"></div>
						
						<a href="<?php echo(get_category_link(get_cat_ID(get_option('deepfocus_portfolio_cat')))); ?>" class="readmore entergallery"><span><?php _e('Enter The Gallery','DeepFocus'); ?></span></a>
					</div> <!-- end #portfolio-items -->
		</p>
		
	</div>
	
	<div>

		
		<p>
			Contests & Specials   use custom fields
		</p>
		
	</div>

	
	<div>   
		
		
		<p>
			Connect on Facebook, etc   use custom fields
		</p>		
		
	</div>

<div>

		
		<p>
			Comments
		</p>
		
	</div>


<div>
		
		
		<p>
		<a href="http:www.billboardfamily.com/rss">Subscribe To Our Blog</a> <br />Also, add mailing list here
		</p>
	</div>
<div class="clearfix"></div>
</div>

<br clear="all" />


<!-- navigator -->
<div id="nav">
	<ul>
		
		<li class="button-1">
			<a href="#1">
				<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
				<strong>Blog</strong>


</a>
		</li>

<li>
			<a href="#2">
				<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
				<strong>Photos</strong>


</a>
		</li>

		<li>
			<a href="#3">
				<img src="http://farm1.static.flickr.com/3624/3323893148_8318838fbd_s.jpg"/>
				<strong>Contests & Specials</strong>
				
			</a>

		</li>
		<li>
			<a href="#4">
				<img src="http://farm1.static.flickr.com/40/122343298_22333fb8e3_s.jpg" />
				<strong>Connect</strong>
		
			</a>
		</li>

<li>
			<a href="#5">
				<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
				<strong>Comments</strong>


</a>
		</li>

<li>
			<a href="#6">
				<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
				<strong>Subscribe</strong>

				
			</a>
		</li>
	</ul>

</div>


<br clear="all" />
<!-- end tabs-->

<!-- END main blog content -->

The same code is used below the tabs, and it works there....so it has something to do with the tabs. Please help. thanks

Hi I'm making a php/html page and using javascript to keep a count for me.

Code:

<script type="text/javascript">
			var i=0;
			}</script>

.
.
.

<form action="index.php" method="GET">
					<input name="game_button"  id="guess1" type = "submit" name="1" value="1" style="height: 50; width: 50; font-size: 16" onClick = "i=i+1;"/>	</form>

<input type="button" onClick = "alert(i);"/>

The last button is just a test button, which will tell me what the value of "i" is, but I'm not getting anything when I cllick that button.
However if I change the onClick from alert(i), to alert('i') it will alert me a string, so I know the javascript is working. Any ideas?

Fixed.