DIV content from document.getElement call DISAPPEARS [Archive]

View Full Version : DIV content from document.getElement call DISAPPEARS

geoffdude

01-18-2007, 06:10 AM

Hi everyone, newbie here.

I'm really close to finishing my zip code search filter thingy to return a specific message (ultimately a unique phone number for sales contact) after a form query (of sorts) submission.

I can get a unique result, but I want that result to write into a specific <div> tag.

I can now get the unique result to write into the <div> tag area, but the resulting content immediately disappears, and the original <div> tag content, or status, returns.

I'm pulling my hair out over this. How can I keep my new content that has been written by:
document.getElementById("resultshere").innerHTML = output;
to stay visible with the targeted <div>?

Or... maybe there is a better way of doing what I'm trying,

See the code below for the final working code I'm stuck at. Currently most if statements are using a document.write, but I ultimately want to call, use, the document.getElementById("resultshere").innerHTML to return the results I envision for each if occurence.

*Note, use the zip codes listed in the code below to test the functions, if you enter any zip code not listed then the document.getElementById("resultshere").innerHTML is called and you'll be able to see my problem.

Thanks for any and all help, best regards

Geoff

-------------------------------------code below-----------------------------------

<style type="text/css">

.demo {
color:#000033;
layer-background-color:#cccccc;
position:absolute;
top:90px;
left:40px;
width:350;
height:150;
z-index:80;
visibility:visible;
background-color: #FFCC99;
font-size: 13px; line-height: 17px; text-decoration: none; color: #003399;
font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding-left:20; padding-top:20
}

.demo2 {color:#000033; background-color:#eeeeee; layer-background-color:#cccccc;
position:absolute; top:210; left:1px; width:832px; height:280px;
z-index:81; visibility:hidden;}

</style>

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


function GetLucky()
{
var TheDate = new Date();
var LuckyNumber = Math.floor((99999 - 11111 + 1) * Math.random() + 11111);

var Output2 = "Your lucky number for ";
Output2 += TheDate.toLocaleDateString();
Output2 += " is <b>" + LuckyNumber + "</b>.";
document.getElementById("resultshere").innerHTML = Output2;
}

</script>

<input type="button" value="Lucky Number" onclick="GetLucky()"/>

<form method="get" name="zipform" >
<input name="zip" type="text" size="10" maxlength="5">
<input type="submit" name="Submit" value="Submit" onclick="checkZip()">
</form>
<div id="resultshere" class="demo">Here go the results</div>

codeexploiter

01-18-2007, 09:18 AM

I've made some changes to your code and it works correctly as it supposed. You can find the changes I've made in red color.

<html>

<head>
<style type="text/css">

.demo {
color:#000033;
layer-background-color:#cccccc;
position:absolute;
top:90px;
left:40px;
width:350;
height:150;
z-index:80;
visibility:visible;
background-color: #FFCC99;
font-size: 13px; line-height: 17px; text-decoration: none; color: #003399;
font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding-left:20; padding-top:20
}

.demo2 {color:#000033; background-color:#eeeeee; layer-background-color:#cccccc;
position:absolute; top:210; left:1px; width:832px; height:280px;
z-index:81; visibility:hidden;}

</style>

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


function GetLucky()
{
var TheDate = new Date();
var LuckyNumber = Math.floor((99999 - 11111 + 1) * Math.random() + 11111);

var Output2 = "Your lucky number for ";
Output2 += TheDate.toLocaleDateString();
Output2 += " is <b>" + LuckyNumber + "</b>.";
document.getElementById("resultshere").innerHTML = Output2;
}

</script>

</head>
<body>
<input type="button" value="Lucky Number" onclick="GetLucky()"/>

<form method="get" name="zipform" >
<input name="zip" type="text" size="10" maxlength="5">
<input type="button" name="Submit" value="Submit" onclick="checkZip()">
</form>
<div id="resultshere" class="demo">Here go the results</div>
</body>
</html>

geoffdude

01-18-2007, 04:47 PM

Hello CodeExploiter,

Thanks much for the reply.

However, I couldn't get your fixes to even run any of the functions I previously had working.

One thing I didn't mention before, is that this script will be run in a php file. So the new code can just below copied into a php file as is to use.

I've added the document.innerHTML call to all if statements to make this easier to see the problem once running, but the initial problem still exist.... the results from the zip code search disappear after being written to the <div> tag.

Thanks again, and best regards,

geoffdude

-------------------------------Updated code here--------------------------------------
<!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=ISO-8859-1" />
<title>Untitled Document</title>

<style type="text/css">

.demo {
color:#000033;
layer-background-color:#cccccc;
position:absolute;
top:90px;
left:40px;
width:350;
height:150;
z-index:80;
visibility:visible;
background-color: #FFCC99;
text-align: center;
text-valign: middle;
font-size: 12px; line-height: 17px; text-decoration: none; color: #003399;
font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding-left:0; padding-top:0
}

.demo2 {color:#000033; background-color:#eeeeee; layer-background-color:#cccccc;
position:absolute; top:210; left:1px; width:832px; height:280px;
z-index:81; visibility:hidden;}

</style>

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


function GetLucky()
{
var TheDate = new Date();
var LuckyNumber = Math.floor((99999 - 11111 + 1) * Math.random() + 11111);

var Output2 = "Your lucky number for ";
Output2 += TheDate.toLocaleDateString();
Output2 += " is <b>" + LuckyNumber + "</b>.";
document.getElementById("resultshere").innerHTML = Output2;
}

</script>

</head>

<body>

<input type="button" value="Lucky Number Search" onclick="GetLucky()"/>
<< Example to click to see what I want to happen.
<form method="get" name="zipform" ><br />ENTER ZIPCODE:
<input name="zip" type="text" size="10" maxlength="5">
<input type="submit" name="Submit" value="Submit" onclick="checkZip()">
</form>
<div id="resultshere" class="demo">Here go the results, but they vanish w/zip search </div>

</body>
</html>