JavaScript - Getelementbyid('desktop').onclick

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

Is it possible disable an onclick after clicking it and then enable it from another onclick by id

Code:

<img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;">

This code runs when it is clicked:

Code:

$("#one").click(function() {
			
				runEffectB();
			
			
			
			return false;
		});

What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run.
I am assuming I will be able to re-enable it from another onclick running a similar function.
This is jquery and jquery ui if that helps.
Any ideas much appreciated.

Hello smart people... perhaps someone can figure this one out. I hope it's not a PHP question.

I have a form and need to populate FIELD2 with the result of FIELD1.

Field one is a dynamic list from a database, where the value is an ID#, but the list shows the name.

I want to populat FIELD2 with the name that is chosen, not the id (I can't get anything to work)

Here is the code from the 2 fields:
FIELD 1:
Code:

<select name = "" realname = "{#role#}" required="1" exclude = "-1" id = "roleselect">
<option value="-1" selected="selected">Choose</option>
<option value = "{$roles[role].ID}" id="role{$roles[role].ID}">{$roles[role].name}</option>

FIELD 2:
Code:

<input type="hidden" name="rolename" id="rolename" required="0" realname="rolename" />

Here is the javascript I tried to populate field 2 with the selected option of field 2:
Code:

function updaterole(){
        document.getElementById("rolename").value =document.getElementById("role").value;

I tried using name instead of value for field 1, but that didn't work either. The db just shows empty.

thanks for any help!

Hopefully some of you guys can help. I'm self taught in Javascript so only know little bits here and there (and don't even know if the thread title is labelled right for what I'm doing!) so help would be greatly appreciated.

I'm trying to create 4 buttons on a page (buttons shown by "click here to view c1, c2" etc.) however after I've clicked one button and the content is showing below, the content from the next button clicked does not show (almost as if it is hidden underneath).

I'm looking for a way of showing the content when the button is clicked, but hiding it once another button is clicked so other content is shown. Hopefully this is clear enough.

All help, tips or advice will be appreciated. Thankyou.

Code:

<script type="text/javascript" language="JavaScript"><!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
	document.getElementById(tid).style.display = "";
	}
else {
	document.getElementById(tid).style.display = "none";
	}
}
//--></script>
<table width="100%" cellspacing="4" cellpadding="4" border="0" align="center">
    <tbody>
        <tr>
            <td width="25%"><a href="javascript:InsertContent('c1');"> Click to see C1</a></td>
            <td width="25%"><a href="javascript:InsertContent('c2');"> Click to see C2</a></td>
            <td width="25%"><a href="javascript:InsertContent('c3');"> Click to see C3</a></td>
            <td width="25%"><a href="javascript:InsertContent('c4');"> Click to see C4</a></td>
        </tr>
    </tbody>
</table>
<hr />
<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c1">CONTENT C1
</div>

<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c2">CONTENT C2
</div>

<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c3">CONTENT C3
</div>

<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c4">CONTENT C3
</div>

hi,

In my code below, I cannot get the setting_id value as it falls outside of the loop.

I have just tried to put in the getElementById function but it's not working?!
I get the error: missing ) after formal parameters

JavaScript

from this:
Code:

function confirmqualification(ID) {

to this:
Code:

function confirmqualification(document.getElementById('setting_id')) {

HTML

from this:
Code:

<input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification('<?php echo $row1['setting_id']?>')" />

to this:
Code:

<input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification()" />

hi
quick question, i have 640 hidden html inputs like this but with different names.
<input type="hidden" name="b1r1c1" value"some value">

now i want to use
document.getElementById('b1r1c1).value = "whatever";

will that work eventhough there is no id on my hidden value.

it will be in a hta by the way.

thanks

I have a form that is used to insert a new classified ad or to update an existing ad.
When the submit button is pressed a javascript function is called to validate the fields. Some of the fields are set as required. If the field is empty ( as form[i].value = '' ) then this sets an error flag and after all fields have been tested will display an alert and each field that has an error will be highlighted in red.
This works great when a new ad is being created, but when the ad is being updated, and a required field is erased then it doesn't popup as an error, as if the script is just ignoring it.

Here is the code snipit:
Code:

function submitbutton(mfrm) {
	var me = mfrm.elements;
	var r = new RegExp("[\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-]", "i");
	var r_num = new RegExp("[^0-9\.,]", "i");
	var r_email = new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]{2,}[.][a-zA-Z]{2,3}$" ,"i");

	var errorMSG = '';
	var iserror=0;
		// set notification background color
	var warnColor = '#<?php echo $this->error_color; ?>';
	
	// loop through all input elements in form
	for (var i=0; i < me.length; i++) {
	
		// check if element is mandatory; here mosReq="1"
		if ((me[i].getAttribute('mosReq') == 1)&&(me[i].style.visibility != 'hidden')) {
			if (me[i].type == 'radio' || me[i].type == 'checkbox') {
				var rOptions = me[me[i].getAttribute('name')];
				var rChecked = 0;
				if(rOptions.length > 1) {
					for (var r=0; r < rOptions.length; r++) {
						if (rOptions[r].checked) {
							rChecked=1;
						}
					}
				} else {
					if (me[i].checked) {
						rChecked=1;
					}
				}
				if(rChecked==0) {
					errorMSG += me[i].getAttribute('mosLabel').replace('&nbsp;',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
					// notify user by changing background color, in this case to red
					me[i].style.background = warnColor;
					iserror=1;
				} 
			}

			if ((me[i].value == '') || (me[i].value.length < 2)) {
				errorMSG += me[i].getAttribute('mosLabel').replace('&nbsp;',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
				me[i].style.background = warnColor;
				iserror=1;
			} 
		}
	}
	
	if(iserror==1) {
		alert(errorMSG);
		return false;
	}
}

Hey guys,

Thanks for taking the time to read my post. I am not new to programming or scripting, but I am completely new to javascript and web-based code. Hopefully you guys could help me understand what is going on and maybe help me figure out what I am trying to do.

What I am trying to do:
-There is an element that has a value
<td class="flashField" onmouseover="clearAnswer()">
<div id="flashAnswer" onmouseover="clearAnswer()">answer string here</div>
</td>

-There is a text box that needs to have the answer above given to it
<td class="flashField">
<input type="text" tabindex="1" onkeypress="clearAnswer()" name="q" maxlength="256" size="50">
</td>

-There is a next button that needs to be executed
<td align="right">
<input type="image" tabindex="2" alt="Next" src="http://website.com/images/next.gif">
</td>

So what I am trying to do is create a script through Greasemonkey that will automatically do these things. I am starting small and trying to just get the value of flashAnswer to appear as an alert on the screen by using this code:
var answer = document.getElementById('flashAnswer');
alert(answer);

But the problem is it posts some weird value ([object XrayWrapper [object HTMLDivElement]]) that most definitely is not "answer string here" and is a bit above me at this point. Any ideas?

Any help would be great guys!

Thanks!
-ellosiph

Hello,

I need to do this. I have 36 Divs called "contenido1, contenido2, contenido3 etc.)

And I want that "onclick" change a property of the css of all of them except 1. I know I can do this manually but its a lot of code lines so I think it would be another option to do ir in a loop.

Right now i am using this:

Code:

div = document.getElementById('contenido1');
div.style.display='block';
div = document.getElementById('contenido2');
div.style.display='none';
div = document.getElementById('contenido3');
div.style.display='none';
div = document.getElementById('contenido4');
div.style.display='none';
....

So in that case I want for example that all the DIVS called "contenido 2 to contenido 36" display: none and only contenido 1 display block. In the next cases would be the same: All the divs called "contenido 1 to contenido 36" display: none except "contenido 2" that i want to display: block.

So I can do it like this but are thousands of lines of code... and I am sure there are other more efficient option.

Anybody knows how to do that? Probably is a simple question.

Thank you!!

Hi Everybody,

I'd be grateful if you could help me out. I need to change the CSS by changing the id when a link is clicked.
The id is in the body tag and by default it is named 'first'. i.e
<body id="first">.
If I click on the link named 'Change id to Second', this should change to <body id="Second">.
If I further click on the link named "Change id to Second" this should change to
<body id="Third">.

My code below works (I have stripped this down to make sense), but only when I click one of the links for the first time. If I am to click the second/ third link, nothing happens:

Code:

<html>
<head>
<script type="text/javascript">
function changeFirst() {
                 document.getElementById('blanky').id  = 'first';
              	 document.getElementById('second').id  = 'first';
		 document.getElementById('third').id   = 'first';
             }
function changeSecond() {
                 document.getElementById('blanky').id = 'second';
              	 document.getElementById('first').id  = 'second';
		 document.getElementById('third').id  = 'second';
             }
function changeThird() {
                 document.getElementById('blanky').id  = 'third';
              	 document.getElementById('first').id   = 'third';
		 document.getElementById('second').id  = 'third';
             }
</script>
</head>
<body id=first><!-- I need to change this id -->
<p>Hello, the id above should change when the following links are clicked</p>
<a  onclick="changeFirst()">Change id to First</a>
<a  onclick="changeSecond()">Change id to Second</a>
<a  onclick="changeThird()">Change id to Third</a>
</body>
</html>

Any help will be greatly appreciated.

Cheers

hi, on my site he http://www.mypubspace.com/default.php I am requesting the rsCounty by Ajax, I am then trying to do the same to the page number value using getElementByID, and building up the querystring, but it's not working properly, on my countypubs.php page which is what I an requesting to get the counties I have added the function again to try and get the PAGE

Code:

<script language="javascript" type="text/javascript">

function countyFunction(){
	var countyRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		countyRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			countyRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				countyRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	countyRequest.onreadystatechange = function(){
		if(countyRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = countyRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	//var rsCounty = document.getElementById('rsCounty').value;
	var page = document.getElementById('page').value;
	var queryString = "?name=" + name + "&rsCounty=" + rsCounty + "&page=" + page;
	//Add the following line
	countyRequest.open("GET", "http://www.mypubspace.com/countypubs.php" + queryString, true);
	countyRequest.send(null);
}
</script>
<?php
$dbhost = "xxx";
$dbuser = "xxx";
$dbpass = "xxx";
$dbname = "xxx";
	//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
	//Select Database
mysql_select_db($dbname) or die(mysql_error());

				if ($msg <>"") 
					{
					echo "<div class=\"ui-widget\">
				<div style=\"padding: 0pt 0.7em;\" class=\"ui-state-error ui-corner-all\"> 
					<p style=\"padding-top:18px;\"><span style=\"float: left; margin-right: 0.3em;\" class=\"ui-icon ui-icon-alert\"></span> 
					<strong>Alert:</strong> $msg</p>
				</div>
			</div>"; 
					}
	$county = $_GET["rsCounty"];
	echo $county .'<br />';
	$tableName="pubs";		
	$targetpage = "default.php"; 	
	$limit = 20; 
	$query = "SELECT COUNT(*) as num FROM $tableName WHERE rsCounty = '$county'";
	$total_pages = mysql_fetch_array(mysql_query($query));
	$total_pages = $total_pages['num'];
	
	$stages = 3;
	$page = mysql_escape_string($_REQUEST['page']);
	if( isset($_REQUEST['page']) && ctype_digit($_REQUEST['page']) ) {
      $page = (int) $_GET['page'];
      $start = ($page - 1) * $limit;
}else{
      $start = 0;   
}
	
    // Get page data
	$query1 = "SELECT * FROM $tableName WHERE rsCounty = '$county' ORDER BY rsPubName Asc LIMIT $start, $limit";
	$result = mysql_query($query1);
	
	// Initial page num setup
	if ($page == 0){$page = 1;}
	$prev = $page - 1;	
	$next = $page + 1;							
	$lastpage = ceil($total_pages/$limit);		
	$LastPagem1 = $lastpage - 1;					
	
	
	$paginate = '';
	if($lastpage > 1)
	{	
		$paginate .= "<span class='paginate'>";
		// Previous
		if ($page > 1){
			$paginate.= "<a onClick='countyFunction();' id='page' value='$prev'>previous</a>";
		}else{
			$paginate.= "<span class='disabled'>previous</span>";	}
			

		
		// Pages	
		if ($lastpage < 7 + ($stages * 2))	// Not enough pages to breaking it up
		{	
			for ($counter = 1; $counter <= $lastpage; $counter++)
			{
				if ($counter == $page){
					$paginate.= "<span class='current'>$counter</span>";
				}else{
					$paginate.= "<a onClick='countyFunction();' id='page' value='$counter'>$counter</a>";}					
			}
		}
		elseif($lastpage > 5 + ($stages * 2))	// Enough pages to hide a few?
		{
			// Beginning only hide later pages
			if($page < 1 + ($stages * 2))		
			{
				for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}					
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";		
			}
			// Middle hide some front and some back
			elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
			{
				$paginate.= "<a href='$targetpage?page=1'>1</a>";
				$paginate.= "<a href='$targetpage?page=2'>2</a>";
				$paginate.= "...";
				for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}					
				}
				$paginate.= "...";
				$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
				$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";		
			}
			// End only hide early pages
			else
			{
				$paginate.= "<a href='$targetpage?page=1'>1</a>";
				$paginate.= "<a href='$targetpage?page=2'>2</a>";
				$paginate.= "...";
				for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
				{
					if ($counter == $page){
						$paginate.= "<span class='current'>$counter</span>";
					}else{
						$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}					
				}
			}
		}
					
				// Next
		if ($page < $counter - 1){ 
			$paginate.= "<a href='$targetpage?page=$next'>next</a>";
		}else{
			$paginate.= "<span class='disabled'>next</span>";
			}
			
		$paginate.= "</span>";		
	
	
} echo 'Pubs found: '.$total_pages;
 // pagination
 echo $paginate;
?>
<div id="ajaxCountylist">
<div id="accordion">
<?php 
 

		while($row = mysql_fetch_array($result))
		{
		
		echo '<div><h3><a href="#">'.$row['rsPubName'].', '.$row['rsTown'].'</a></h3><div>'.$row['rsAddress'].'<br />'.$row['rsTown'].', '.$row['rsCounty'].'<br />'.$row['rsPostCode'].'<br /><br />Region: '.$row['Region'].'<br /><br />Telephone: '.$row['rsTel'].'<br /><br />';
		echo '<button onclick="gohere(\'viewpub.php?PUBID='.$row['PUBID'].'\')" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">View Pub</span></button>';
		echo '</div></div>';
		
		}
		 echo '<span style="float:right;">'.$paginate.'</span>';
	?>
</div>
</div>

I have only applied teh function to the previous button and the first page numbers!

All,
I have the following code:
Code:

var poststr = "statusupdate=" + encodeURI( document.getElementById("statusupdate").value ) +
"&user_name=" + encodeURI( document.getElementById("user_name").value ) +
"&twitteryes=" + encodeURI ( document.getElementById("twitteryes").checked ) +
"&currentstatus=" + encodeURI( document.getElementById("currentstatus").value );

It seems to be failing on the
Code:

"&twitteryes=" + encodeURI (document.getElementById("twitteryes").checked )

If I remove the part I just showed it works fine. This is the HTML code:
Code:

<input type="checkbox" name="twitteryes" value="yesplease" />

Thanks in advance.

I am writing some javascript that when the user clicks on a link, it hides or displays content inside a div tag. I have been trying to add some code that would only allow for one div tag to be displayed at a time.

Here is where I originally got the code (http://www.willmaster.com/library/hi...-to-reveal.php)

Whenever I run this code I get this error:

Code:

Error: document.getElementById(months[x]) is null
Source File: /resources/default.js
Line: 30

This is the JavaScript that runs when the user clicks the link:

Code:

<!--
function accordion(tid) {
var x;
var months = new Array();
months[0]="January";
months[1]="February";
months[2]="March";
months[3]="April";
months[4]="May";
months[5]="June";
months[6]="July";
months[7]="August";
months[8]="September";
months[9]="October";
months[10]="November";
months[11]="December";
for (x in months) {
	document.getElementById((months[x])).style.display = "none";
}
if(document.getElementById(tid).style.display == "none") {
	document.getElementById(tid).style.display = "";
} else {
	document.getElementById(tid).style.display = "none";
}}
//-->

Here is where the javascript is activated from

PHP Code:
<a href=javascript:accordion('$month2');>$month2</a><br />
<div id='$month2' style='display: none';>
Hello $month2
</div> 

Hello, I'm sorry if this has been asked before but I've been googling and looking in reference books for the last couple of days and just haven't been able to find an answer.
I'm new to javascript and have just completed my first fully working script to crossfade images and have clickable links to go to a specific image, the code works perfectly when the code is inside of the html document with the elements but when you remove the javascript and put it in a seperate file its unable to get the value of the elements from the html.
Is there a way to do this, give the document a alternative src to look in for the elements or something?
An example below.
Javascript snipit
[CODE]
imageId = "mainImage";
image = window.document.getElementById(imageId);
alert(image);
[CODE]
image returns null. what I want it to return is the value fro the HTMl document that this file is included in.
[CODE]
<script type="text/javascript" src="fadeFunctions.js">
</script>
</head>
<body>
<div id="imgHolder" style="position: absolute; top: 200px;">
<div id="topImage" style="position: absolute; top: 0px; left: 0px; z-index: 100;"><img id="mainImg" src="1.png" /></div>
[CODE]

Thanks for any help or suggestions that you can give.

I'm working on a web site: http://84.9.221.75/domains/backingtr...usicindex.html

I'm trying to get the Javascript that controls the scrolling text to scroll on both the left and right sides.....right now it only scrolls on the left, due to the use of getElementById() from what i can see....

So I'm trying to make the javascript see all references to the ID in the document, and make the right panel div scroll as well, but I'm not having any luck....

I have a very basic understanding of Javascript, so I need a little help here guys...thanks..