JavaScript Forum

**microcolt** · 03-29-2007, 08:34 PM

Hello everybody, As you have seen on my post title i am not very good at javascript, But i know a little. I need to know the following, and i know that it is possible:

On a form submission i need an image to appear in a <div>. so, i have to following code, but i donot have all that backend stuff:

Code:

<input type="submit" name="submit" value="Submit" onsubmit="javascript:loadform">
 
<div id="image" style="display:none">Loading...</div>

i dont know if this is at all right but i told you i was a noob. :-)

**ADAM Web Design** · 03-30-2007, 12:24 AM

Where and how do you need this information to appear? You can always add the image in post-submission when you process the form.

**MJM_RDS** · 03-30-2007, 04:23 PM

So you want an image to appear where it says "Loading..." in your code, or do you want an image to appear behind that?
Either you could in your script alter the style of the div by doing something like
objectName = document.getElementById('image');
objectName.style.background = 'url

imagelocation.jpg) --- etc you know the drill';
or use innerHTML, but really you shouldn't, it is teh_devil to some, so just read this:
http://slayeroffice.com/articles/inn..._alternatives/

But I'm still not really sure exactly what you want to do... so if you could clear me up, that would be great.

**microcolt** · 03-30-2007, 04:37 PM

ok i will explain,

When i press the "Submit" button a image primarialy a .GIF will be displayed in the "<div id="image"></div>", so if i put the div on the top of the page the image will be displayed there and vis versa.

But i do not know how to make all the functions and stuff.

**MJM_RDS** · 06:45 PM

well one thing you could do is this:
instead of "javascript:loadform" call another function called whatever
so change to "javascript:whatever()"

Code:

function whatever()
{
  imageactivate();
  loadform();
}

function imageactive()
{
  var imgdiv = document.getElementById('image');
  imgdiv.innerHTML = '<img src="*****" width="" height="" alt="" />';
}

This would be the easiest, though you could expand it since I'm thinking you'll need to make the image disappear again (just add a boolean parameter to check)
The only way I can think of doing this without innerHTML is to write your own createImageNode function which since you're a newbie is too much effort.

**microcolt** · 03-31-2007, 01:29 AM

hey, thanks but i tested your script and i am getting errors. i am using the following code.

Code:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type='text/javascript'>
function whatever()
{
imageactivate();
loadform();
}
function imageactive()
{
var imgdiv = document.getElementById('image');
imgdiv.innerHTML = '<img src="loading.gif" width="23" height="8" alt="Loading..." />';
}
</script>
</head>
<body>
<input type='submit' name='submit' value='Submit' onclick='javascript:whatever()'>
</body>
</html>

**MJM_RDS** · 03-31-2007, 11:42 AM

I have a question, do you actually have a loadform function? I assumed you had since that is what you are calling originally, but now it isn't in your JS.
Also you changed your code so that now you don't have the element with the ID "image" anymore.
Change your html so this is included again

Code:

<div id="image" style="display:none">Loading...</div>

What I wrote is very simple JS, I think the best thing you can do is simply Google what these methods actually do.

**microcolt** · 03-31-2007, 04:27 PM

no, i do not have a load form function, i was just using it for an example. Heres what the form looks like now, and it still doesnt work:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type='text/javascript'>
function whatever()
{
  imageactivate();
  loadform();
}
function imageactive()
{
  var imgdiv = document.getElementById('image');
  imgdiv.innerHTML = '<img src="loading.gif" width="" height="" alt="Loading..." />';
}
</script>
</head>
<body>
<div id="image" style="display:none">Loading...</div>
<input type='submit' name='submit' value='upload' onclick='javascript:imageactivate()'>
</body>
</html>

**MJM_RDS** · 04-01-2007, 12:13 PM

Ok, I didn't realise loadform() was supposed to be an example, so you can remove the whatever function. And call imageactive directly, which you are not. There's a typo, probably copied from the code I wrote. Do you know CSS? Just asking because you have this in your code
style="display:none"
Google it if you don't understand what that means. Either way here's another solution for you. You could have your div like this:

Code:

<div id="image" style="display:none"><img src="loading.gif" width="" height="" alt="Loading..." /></div>

and then use JS to change the style attribute by doing this instead of the innerHTML:

Code:

imgdiv.style.display="inline";

**microcolt** · 04-02-2007, 04:27 PM

i used the code below EXACTLY as i used it and it still doesnt work:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language='Javascript'>
function imageactive()
{
  var imgdiv = document.getElementById('image');
  imgdiv.style.display="inline";
}
</script>
</head>
<body>
<div id="image" style="display:none"><img src="loading.gif" alt="Loading..." /></div>
<input type='submit' name='submit' value='upload' onclick='javascript:imageactivate()'>
</body>
</html>

What is wrong, i dont get any errors in my browser?

**chrishirst** · 04-03-2007, 05:01 AM

most of the trick is in the typing, so shall we play "spot the difference" ??

function imageactive()

onclick='javascript:imageactivate()'>

**microcolt** · 04-03-2007, 07:52 PM

AWWW WOW i cnt belive i spellid that awrong, i a freaking idiot :-(

**microcolt** · 04-03-2007, 08:16 PM

See i told you i was a noob, oh and one more thing, whats the script to refresh? like onclick='javascript:location.self'> or whatever

**chrishirst** · 04-04-2007, 06:25 AM

it should be
javascript:self.location = self.location

The "correct" way is

javascript:window.location.reload()

or you can use

javascript:window.history.go(0)