DIV content from document.getElement call DISAPPEARS

[geoffdude]

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 checkZip()
{
var north = new String("92617,90620,90621,90623,90630,90631,90638, 90680,90720,90740,90742,90743,92602,92603,92604,92 606,92610,92612,92614,92618,92620,92624,92625,9262 6,92629,92630,92637,92646,92647,92648,92649,92651, 92653,92655,92656,92657,92660,92661,92662,92663,92 672,92673,92675,92676,92677,92679,92683,92688,9269 1,92692,92694,92701,92703,92704,92705,92706,92707, 92708,92627,92780,92782,92801,92802,92804,92805,92 806,92807,92808,92821,92821,92823,92831,92832,9283 3,92835,92840,92841,92842,92843,92844,92845,92861, 92865,92866,92867,92868,92869,92870,92886,92887");
var south = new String("90603,90604,90703,90803,91709,91765,92879, 92880,92881,92882,92883,90815,91709,91710,92505");
var central = new String("90701,90705,90712,90713,90716,90755,90802, 90804,90805,90806,90807,90808,90813,90814,90815,90 840,91710,91761,91766,91789,92503,92505,92860");
var coastal = new String("80701,80705");
var zipcode = document.zipform.zip.value;
var resultshere = document.getElementById("resultshere");
if(zipcode == "")
{
alert("You must enter a zip code.");
return false;
}
if(north.search(zipcode) != -1)
{
document.write ("You searched for " + "" + zipcode +", "+"HEY NORTH RESULTS!");
return true;
}
if(south.search(zipcode) != -1)
{
document.write ("You searched for " + "" + zipcode +", "+"HEY SOUTH RESULTS!");
return true;
}
if(central.search(zipcode) != -1)
{
document.write ("You searched for " + "" + zipcode +", "+"HEY CENTRAL RESULTS!");
return true;
}
if(coastal.search(zipcode) != -1)
{
document.write ("You searched for " + "" + zipcode +", "+"HEY COASTAL RESULTS!");
return true;
}

var Output = "No phone numbers are located for the zip code ";
Output += zipcode;
document.getElementById("resultshere").innerHTML = Output;

}
//-->
<!--this function below is to test that the idea is workable some what-->
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>

[r035198x]

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 checkZip()
{
var north = new String("92617,90620,90621,90623,90630,90631,90638, 90680,90720,90740,90742,90743,92602,92603,92604,92 606,92610,92612,92614,92618,92620,92624,92625,9262 6,92629,92630,92637,92646,92647,92648,92649,92651, 92653,92655,92656,92657,92660,92661,92662,92663,92 672,92673,92675,92676,92677,92679,92683,92688,9269 1,92692,92694,92701,92703,92704,92705,92706,92707, 92708,92627,92780,92782,92801,92802,92804,92805,92 806,92807,92808,92821,92821,92823,92831,92832,9283 3,92835,92840,92841,92842,92843,92844,92845,92861, 92865,92866,92867,92868,92869,92870,92886,92887");
var south = new String("90603,90604,90703,90803,91709,91765,92879, 92880,92881,92882,92883,90815,91709,91710,92505");
var central = new String("90701,90705,90712,90713,90716,90755,90802, 90804,90805,90806,90807,90808,90813,90814,90815,90 840,91710,91761,91766,91789,92503,92505,92860");
var coastal = new String("80701,80705");
var zipcode = document.zipform.zip.value;
var resultshere = document.getElementById("resultshere");
if(zipcode == "")
{
alert("You must enter a zip code.");
return false;
}
if(north.search(zipcode) != -1)
{
document.write ("You searched for " + "" + zipcode +", "+"HEY NORTH RESULTS!");
return true;
}
if(south.search(zipcode) != -1)
{
document.write ("You searched for " + "" + zipcode +", "+"HEY SOUTH RESULTS!");
return true;
}
if(central.search(zipcode) != -1)
{
document.write ("You searched for " + "" + zipcode +", "+"HEY CENTRAL RESULTS!");
return true;
}
if(coastal.search(zipcode) != -1)
{
document.write ("You searched for " + "" + zipcode +", "+"HEY COASTAL RESULTS!");
return true;
}

var Output = "No phone numbers are located for the zip code ";
Output += zipcode;
document.getElementById("resultshere").innerHTML = Output;

}
//-->
<!--this function below is to test that the idea is workable some what-->
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>

Should have read this first.

Moved to javascript forum.

[acoder]

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

Are you trying to submit the data to another page? If so, you will need an action page in your form tag. Also, your input tag for the lucky number should be within the form tags. If you want to display the data in the div, you can't submit the data because that will take you to another page - you will need to use an normal button onclick as you have done with the lucky number. When you have a result, you are returning true in your checkZip function, this will submit the data.

There are one or two other issues, but look over these first.

[geoffdude]

Hello acoder,

No, I want the results to appear in the same page, in a targeted <DIV> area. Currently this works when you type a zipcode like 11111 (a number not recognized), into the query/text box and hit "search". But the results that appear there don't last but a nanosecond, and then they disappear.

Basically, I want the results of whatever zip code is entered to appear just under the search box on the same page. I can get that to almost happen with what I now have coded, but not quite.

Thanks again, look I look forward to any and replies.

Best regards,

Geoff

[geoffdude]

Hello again,

Just a quick update & add on.

One thing I didn't mention before, is that this script will be run in a php file. So the code can just be copied into a php file as is (no body, head, or open/close tags are needed to view the current functions.).

I've now added the document.innerHTML call to all if statements to make this easier to see the actual 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--------------------------------------
<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 checkZip()
{
var north = new String("92617,90620,90621,90623,90630,90631,90638, 90680,90 720,90740,90742,90743,92602,92603,92604,92606,9261 0,92612,92614,92618,92620,92624,92625,92626,92629, 92630,92637,92646,92647,92648,92649,92651,92653,92 655,92656,92657,92660,92661,92662,92663,92672,9267 3,92675,92676,92677,92679,92683,92688,92691,92692, 92694,92701,92703,92704,92705,92706,92707,92708,92 627,92780,92782,92801,92802,92804,92805,92806,9280 7,92808,92821,92821,92823,92831,92832,92833,92835, 92840,92841,92842,92843,92844,92845,92861,92865,92 866,92867,92868,92869,92870,92886,92887");
var south = new String("90603,90604,90703,90803,91709,91765,92879, 92880,92 881,92882,92883,90815,91709,91710,92505");
var central = new String("90701,90705,90712,90713,90716,90755,90802, 90804,90 805,90806,90807,90808,90813,90814,90815,90840,9171 0,91761,91766,91789,92503,92505,92860");
var coastal = new String("80701,80705");
var zipcode = document.zipform.zip.value;

if(zipcode == "")
{
alert("You must enter a zip code.");
return false;
}
if(north.search(zipcode) != -1)
{
//document.write ("You searched for " + "" + zipcode +", "+"HEY NORTH RESULTS!");
document.getElementById("resultshere").innerHTML = "You searched for " + "" + zipcode +", "+"HEY NORTH RESULTS!";
return true;
}
if(south.search(zipcode) != -1)
{
//document.write ("You searched for " + "" + zipcode +", "+"HEY SOUTH RESULTS!");
document.getElementById("resultshere").innerHTML = "You searched for " + "" + zipcode +", "+"HEY SOUTH RESULTS!";
return true;
}
if(central.search(zipcode) != -1)
{
//document.write ("You searched for " + "" + zipcode +", "+"HEY CENTRAL RESULTS!");
document.getElementById("resultshere").innerHTML = "You searched for " + "" + zipcode +", "+"HEY CENTRAL RESULTS!";
return true;
}
if(coastal.search(zipcode) != -1)
{
//document.write ("You searched for " + "" + zipcode +", "+"HEY COASTAL RESULTS!");
document.getElementById("resultshere").innerHTML = "You searched for " + "" + zipcode +", "+"HEY COASTAL RESULTS!";
return true;
}

var Output = "No phone numbers are located for the zip code ";
Output += zipcode;
document.getElementById("resultshere").innerHTML = Output;

}
//-->
<!--this function below is to test that the idea is workable some what-->
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>

[acoder]

Two things need to be changed. Don't use a submit button, use a normal button instead as you have done with the lucky number.

Secondly, to prevent the data being submitted, you have to return false, not true as you are currently doing.

[geoffdude]

Two things need to be changed. Don't use a submit button, use a normal button instead as you have done with the lucky number.

Secondly, to prevent the data being submitted, you have to return false, not true as you are currently doing.

YOU ARE THE MAN!!!!!!!!!!!!!!!!!!!!!!!!!!!!

THANKS BIG TIME ACODER! AWESOME!!

You have no idea how much this problem consumed me over the last day and a half.

Anyone want the final code to use for them selves here you go. Thanks again. LOVE THIS SITE. Hugs and high-fives all around! :)

Best regards,

geoffdude

-------------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=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 checkZip()
{
var north = new String("92617,90620,90621,90623,90630,90631,90638, 90680,90 720,90740,90742,90743,92602,92603,92604,92606,9261 0,92612,92614,92618,92620,92624,92625,92626,92629, 92630,92637,92646,92647,92648,92649,92651,92653,92 655,92656,92657,92660,92661,92662,92663,92672,9267 3,92675,92676,92677,92679,92683,92688,92691,92692, 92694,92701,92703,92704,92705,92706,92707,92708,92 627,92780,92782,92801,92802,92804,92805,92806,9280 7,92808,92821,92821,92823,92831,92832,92833,92835, 92840,92841,92842,92843,92844,92845,92861,92865,92 866,92867,92868,92869,92870,92886,92887");
var south = new String("90603,90604,90703,90803,91709,91765,92879, 92880,92 881,92882,92883,90815,91709,91710,92505");
var central = new String("90701,90705,90712,90713,90716,90755,90802, 90804,90 805,90806,90807,90808,90813,90814,90815,90840,9171 0,91761,91766,91789,92503,92505,92860");
var coastal = new String("80701,80705");
var zipcode = document.zipform.zip.value;

if(zipcode == "")
{
alert("You must enter a zip code.");
return false;
}
if(north.search(zipcode) != -1)
{
//document.write ("You searched for " + "" + zipcode +", "+"HEY NORTH RESULTS!");
document.getElementById("resultshere").innerHTML = "You searched for " + "" + zipcode +", "+"HEY NORTH RESULTS!";
return false;
}
if(south.search(zipcode) != -1)
{
//document.write ("You searched for " + "" + zipcode +", "+"HEY SOUTH RESULTS!");
document.getElementById("resultshere").innerHTML = "You searched for " + "" + zipcode +", "+"HEY SOUTH RESULTS!";
return false;
}
if(central.search(zipcode) != -1)
{
//document.write ("You searched for " + "" + zipcode +", "+"HEY CENTRAL RESULTS!");
document.getElementById("resultshere").innerHTML = "You searched for " + "" + zipcode +", "+"HEY CENTRAL RESULTS!";
return false;
}
if(coastal.search(zipcode) != -1)
{
//document.write ("You searched for " + "" + zipcode +", "+"HEY COASTAL RESULTS!");
document.getElementById("resultshere").innerHTML = "You searched for " + "" + zipcode +", "+"HEY COASTAL RESULTS!";
return false;
}

var Output = "No phone numbers are located for the zip code ";
Output += zipcode;
document.getElementById("resultshere").innerHTML = Output;
return false;
}
//-->
<!--this function below is to test that the idea is workable some what-->
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()"/>
&lt;&lt; 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="button" value="Search" onclick="checkZip()">
</form>
<div id="resultshere" class="demo">Here go the results, but they vanish w/zip search </div>


</body>
</html>

[acoder]

YOU ARE THE MAN!!!!!!!!!!!!!!!!!!!!!!!!!!!!

THANKS BIG TIME ACODER! AWESOME!!

You have no idea how much this problem consumed me over the last day and a half.

Anyone want the final code to use for them selves here you go. Thanks again. LOVE THIS SITE. Hugs and high-fives all around! :)

Best regards,

geoffdude

No problem. It's a community to help each other in our development problems.

Just one thing: can you please post your code in code tags (the # or <> icons).

[geoffdude]

I sure will. Thanks again.