JavaScript - Document.images Won't Work In A Function?

Hello all. I have fairly simple questions regarding modifying this script: http://papermashup.com/create-a-dynamic-form-preview/ to dynamically show different parts of a form on another part of the page. I am looking to use it on most parts of my form and would like a little clarification.

First is the use of $(document).ready(function() or $(function(). It works using either, my question is which is preferred? As I understand it using $(document).ready(function() starts the DOM immediately on page load and is useful if you need something right away. I am also using this script: http://www.dynamicdrive.com/dynamici...formwizard.htm for the form. Since the preview script is being used with the form to wizard, I don't really need it until the rest of the form loads.

Another question would be, is there a cleaner way to go about using the preview script on say 10 different form inputs independently? For example in a single function rather than 10 different function/updates?

I have an example of what I am trying he http://jsfiddle.net/anhyG/1/

Thank you in advance for any help!

I wanted to know if document.getElementById works while accessing form elements.
I tried doing this just for testing purposes

This code doesnt work
function validateForm()
{
var val = document.getElementById("id_login").getAttribute("value");
alert(val);
return false;
}

but this does
function validateForm()
{
alert(document.myForm.text_login.value );
return false;
}

Why doesnt document.getElementByid work with form objects.it works with all non form HTML objects..

Hi All,

I have a problem in which I try to execute a funcition via a document.write() and it throws an "object expected" error.

Overall I am making an interface for MS ACCESS .mdb table via ADODB using JavaScript and I want to be able to click on a link and the id is used to delete that entry.

Code:
My function is:
Code:

function deleteRecord(del)
{
var adoConn = new ActiveXObject("ADODB.Connection");
var adoRS = new ActiveXObject("ADODB.Recordset");
adoConn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = {path to }knowBA.mdb'");
adoRS.Open("Select * From know where ID="+ del, adoConn, 1, 3);
adoRS.Delete;
adoRS.Close();
adoConn.Close();
}

The code using the funcition is - oh and the numric KEY is rs(0) :

Code:

 if(!rs.bof) { 
        
         document.write("<table width='700' border='1' align='center' cellpadding='2' cellspacing='0' bgcolor='#FFFFFF'>");
     rs.MoveFirst()
      while(!rs.eof) {     

document.write("<tr><td><div align='center'><strong>"+rs(1)+"</strong></div>");  
document.write("<strong>Keyword(s):</strong> "+rs(3));
document.write("<br><strong>Entry:</strong> " +rs(2)+"&nbsp;&nbsp;");

 document.write("<A HREF='javascript:onClick=("+"eval(deleteRecord(" +rs(0)+"))"+")'>delete</A> "); 

document.write("</td></tr>");               
        cnt=cnt+1;
         rs.MoveNext()
      }

     document.write("</table></form>");
    }
if (cnt==0){      alert ("Sorry, there are no results on that search.");}
    rs.close()
    cn.Close(); 
      }
           
</script>

Thanks for any hints on how to accomplish this!

Hi Coders,

I have a javascript function which lets a user to choose one of the 7 option buttons on a "mainsub.asp" page and the page will then be forwarded to one of the 7 process pages depending on what has been chosen.

The problem is that firefox is angry with the first line ("if" statement) and tells the following in its error console:

Error: document.forms[0].C1 is not a function
Source File: [localhost...]
Line: 117

Here is the code:

function fSubmit(){
if (document.forms[0].C1(0).checked) document.forms[0].action="process.asp";
else if (document.forms[0].C1(1).checked) document.forms[0].action="process1.asp";
else if (document.forms[0].C1(2).checked) document.forms[0].action="process2.asp";
else if (document.forms[0].C1(3).checked) document.forms[0].action="process3.asp";
else if (document.forms[0].C1(4).checked) document.forms[0].action="process4.asp";
else if (document.forms[0].C1(5).checked) document.forms[0].action="process5.asp";
else if (document.forms[0].C1(6).checked) document.forms[0].action="process6.asp";
else document.forms[0].action="process.asp";
return;
}

Internet explorer does not complain about anything and does its job great.
But I could not figure out how to change the code to be also compliant with Firefox?

Thanks for all the comments.

Hello Pros.
I am having a problem with getting id of the active element which calls function savePanelPosition(), as a result, I cannot get a new location of this element and pass it to my Page Method SaveCoords() All draggable panels are created dynamically in code-behind. Please, see the javascript code below. Any ideas/help are greatly appreciated

function pageLoad() {
var Max = "<%=qtyMax%>";
for (i = 0; i < Max; i++) {
$find('DragP' + i).add_move(savePanelPosition);
}
}


function savePanelPosition()
{
var elem = document.activeElement;
var loc = $common.getLocation(elem);
PageMethods.SaveCoords(elem, loc.x, loc.y);
/* there is a call to PageMethods.SaveCoords(), but elem = objectHTMLBodyElement, loc.x=0, loc.y =0 */
}

Hi, i have this jquery script on my photo galery page, it detects left and right key down on keyboard and acts uppon key down.

Is there any way to deactivate it when I click on a text area that is located below each photo? this must be a common issue I think...

Textareas id="comment_"

Code:

<script type="text/javascript">
$(document).keydown(function(e){    
if (e.keyCode == 37) {  
window.location = "photo.php?phot=$prev_file_p&p_id=$prev_file"
            
return false;    
}
else if (e.keyCode == 39) {
window.location = "photo.php?phot=$next_file_n&p_id=$next_file"
            
return false;
}});
</script>

Hi,
New to JS. Have ordered some new books, but need to get somethings going in the mean time.
What I wanted to do is to link to a new page having a date range input in the form of 6 text boxes, 2 sets of mm-dd-yy, from and to, where the upon loading the page box 1 of the from would auto focus and then auto tab and then post where php could take over on the server side. Setting up the form and the lay out, no problem. Auto focusing went just like expected using the following code, included because on the next step everything fell apart.
[/CODE]
<script type="text/javascript" >
window.onload=function() {
document.getElementById("input1").focus();
}
</script>
[/CODE]
So then the wheels came off and in response, began to simplify what was trying to be done to find where the issues were. As far as I can get working is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" >
window.onload=function() {
	document.getElementById("input1").focus();
	}
</script>
<script type="text/javascript" >
function myFunc() {
alert("is this working");
}
</script>
</head>
<body>
<input id="input1" name="input1" type="text" onkeyup="myFunc()" maxlength="2" value="type a No." />
</body>
</html>

First issue with this: When I first get to the page everything is just as ordered. The focus is on the text box and the default value is "type a No." When I press a key onkeyup, I bring up the alert box with "is this working" in it. But when I refresh the page with the refresh button, after clicking the "ok" on the alert box, the character that was typed in is still displayed. If I use the link to the page, or the URL from the address bar, then the page reloads properly with the default value, "type a No".
Question 1: How do you get the default textbox value using the refresh button as apposed to reloading the page using a link or from the address bar? Using Firefox 8.0

Second and more important at the moment: If I change the script to pass an argument to the function the script crashes. It does not pull up an alert box and freezes. My guess is that I'm doing something wrong on a concept level.
NOTE: changed the default value of the text box to " ". Looked like to me there was an issue with the size specification and the default string length as you could only enter in a key stroke by highlighting the text and replacing it
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" >
window.onload=function() {
	document.getElementById("input1").focus();
	}
</script>
<script type="text/javascript" >
function myFunc(awe) {
alert(awe);
}
</script>
</head>
<body>
<input id="input1" name="input1" type="text" onkeyup="myFunc("123")" maxlength="2" value="" />
</body>
</html>

Question 2: can someone straighten me out with this?

Hi All.

I am new to all this and I am posting a problem up here that I think is quite rare or has not been looked into for a long time now.

I am basically looking to create a background for my website and when you refresh the page the image changes to another picture for the background. I have asked one of my good friends to have a look at it and he gave me some code to work with and so I have changed bits here and there and it worked in firefox and safari but will not work in IE. When I asked him he had no clue what to do. So here I am now! I am hoping it is simple but I also know it wont be to an extent! Any help would be much appreciated here.

I have attached the code here for you and also the html file.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<style type="text/css">
<!--
#myFlash {
	position:absolute;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	left:0;
	right:0;
	z-index:20;
}
-->
</style>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Experts Connect</title>
<meta name="keywords" content="Experts connect Preston, Experts connect Lancashire, Medical reports, Preston medical and legal agency, Lancashire medical and legal agency, specialist providers of independent medical evidence, diagnostic and rehabilitation services to the personal injury market, Medico Legal, personal injury claims, refferers." />
<meta name="description" content="Experts Connect are an established legal and medical agency providing reports for persobal injury claims. We work to get the best possible examination we can to ensure your claim goes through with no fuss. We are based nationally and work all over the United Kingdom." />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="revisit-after" content="10 days" />
<link rel="stylesheet" type="text/css" href="/common/basic.css" />
		<script type="text/javascript" src="crossfade.js"></script>
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf");
		</script>
<style type="text/css">
body { width:auto; height:auto; background-color:#CCCCCC;}
#bgimage {
	filter:alpha(opacity=40);
	-moz-opacity:0.40;
	-khtml-opacity:0.40;
	opacity:0.40;
	width:100%;
	height:100%;
	position:absolute;
	margin:0;
	padding:0;
	left:0;
	right:0;
}
</style>
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<SCRIPT/>


<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'back4.jpg'
theImages[1] = 'back2.jpg'
theImages[2] = 'back5.jpg'
theImages[3] = 'back6.jpg'
theImages[4] = 'back8.jpg'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img id="bgimage" src="'+theImages[whichImage]+'">');


//  End -->
</script>
</head>

<div id="myFlash">	
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent" name="expertsconnect" align="middle">
				<param name="movie" value="experts-connectwebsite.swf" />
				<param name="quality" value="high" />
				<param name="scale" value="exactfit" />
				<param name="wmode" value="transparent" />
				<param name="allowfullscreen" value="true" />
				<param name="allowscriptaccess" value="always" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="experts-connectwebsite.swf" width="100%" height="100%" align="middle">
					<param name="quality" value="high" />
					<param name="scale" value="exactfit" />
					<param name="wmode" value="transparent" />
					<param name="allowfullscreen" value="true" />
					<param name="allowscriptaccess" value="always" />
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflashplayer">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
</div>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
showImage();
//  End -->
</script>

<!-- Script Size:  1.49 KB -->

</body>
</html>

There is also a flash file embedded into this document!

Any help would be great with this.

Thank you, Mark

Hello everyone. I hope I'm posting this in the right place.

I'm using the Disco Background Effect script found here that causes the background color of the page to continuously change.

For my design I need other aspects of the page to change along with it. Such as some title Text and HR lines.

Is it possible to call this script to work on other things such as images, text and HR lines? In other words I want some text to change color in time with the background changing.

I appreciate any help you might have.

Ron

ok so

Code:

document.write("Goodbye!");

works but I put ^ that inside a function

Code:

function SayHello ()
(
document.write("Goodbye!");
)

and it stops working? I know the function call works because when I place some code to display an image in SayHello function, it displays the image.

Quote:
<html>
<head>
<script type="text/javascript">
var a = january
var b = febuary
var c = march
function test()
{
document.getElementById("test").innerHTML=a;
<!-- needs to be A on first function click, b on second, c on third, etc..^^-->
}
</script>
</head>
<body>
<p id="test"></p>
<!-- the <p> should go to next month upon each function -->
<input type="button" value="asdf" onclick="test()" />
</body>
</html>
I tried to explain it pretty well in the comment tags, thanks!

I'm new to JS and I can't get this function to display. Can you help me please? Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Untitled</title>
<head>
<script type="text/javascript">
function creatediv(){
var nwdiv=document.createElement('div');
nwdiv.style.float='right'
nwdiv.id='mydiv';
var txt='hello world!';
document.body.apendChild(nwdiv);
document.getElementById(mydiv).innerHTML=txt;
document.write(txt);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="creatediv()" />
</form>


</body>
</html>

hello, would you please tell me why my function does not work?
what's wrong with my code

Code:

<html>

<head>

<title> Egypt </title>

</head>

<body>

<form name="myform" action="#" onsubmit="return checkBoxes(this);">
<div align="left"><br>
<input type="checkbox" name="option1" value="Top10"> Top 10 Tourist Attractions of Egypt<br>
<input type="checkbox" name="option2" value="Alexandria"> Alexandria <br>
<input type="checkbox" name="option3" value="POIs"> POIs<br>
<br>
<INPUT TYPE=SUBMIT VALUE="submit">

</div>
</form>


<script type="text/javascript">

function checkBoxes(theForm) {
	if (
	theForm.option1.checked == false &&
	theForm.option2.checked == false &&
	theForm.option3.checked == false) 
	{
		alert ('You didn\'t choose any of the checkboxes!');
		return false;
	} else { 	
		return true;
	}




</script>
</body>

</html>

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slayeroffice Image Slider (altered)</title>
<script>

var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";

for(var image=[], p=0; p<img.length; p++){
	image[p] = new Image();
	image[p].src = img[p];
	}

var current = 0;

window.onload = function so_init() {
	if(!document.getElementById || !document.createElement){
		return;
		}

	 for(var q=0; q<img.length; q++){
		imgs = document.createElement("img");
		imgs.src = img[q];
		img[q].style.display = "none";
		document.getElementById("imageContainer").appendChild(imgs.cloneNode(true)); 
		}
	
	for(i=1;i<img.length;i++){
		img[i].xOpacity = 0;
		}
	img[0].style.display = "block";
	img[0].xOpacity = .99;
	setTimeout(so_xfade,1000);
}

function so_xfade() {
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1] ? current+1 : 0; 
	nOpacity = imgs[nIndex].xOpacity;

	cOpacity-=.05; 
	nOpacity+=.05;

	img[current].xOpacity = cOpacity;
	img[nIndex].xOpacity = nOpacity;

	img[nIndex].style.display = "block";
	setOpacity(img[current]); 
	setOpacity(img[nIndex]);
	
	if(cOpacity<=0) {
		img[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,1000);
	} 

	else {
		setTimeout(so_xfade,100);
	}
}

function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}


</script>
<style>
#imageContainer {
	height:309px;
}

#imageContainer img {
	width:500px;
	height:309px;
	position:absolute;
	top:0; left:0;
}
</style>
</head>
<body>
<div id="imageContainer">
 <!--
		<img src="http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png" alt="Swimming Pool Water" />
		<img src="http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png" alt="Notebook" />
		<img src="http://www.techlifeweb.com/facebook_logo.jpg" alt="Bottle Neck" />
		<img src="http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png" alt="Nail in a Board" />
--> 
</div>
</body>
</html>

The script works if the images are stored within the HTML but
when I try to store them in the JS array, it fails.
Is there any way to store the images in JS with this script?