PDA

Click to See Complete Forum and Search --> : replacing nodes

peter butler
01-05-2004, 05:33 AM
On the last page of a sign up procedure i have a button labled 'finish'. when the button is pressed, a new node is printed to the screen telling the user that their password will be emailed to them soon. This works but i want the finish button to be replaced by a new button (in the same place) at the same time so when the user clicks it again it will link back to a different page instead of reprinting the message again. how do place a new node on the screen AND replace a node with one click of a button?

Check out the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style>
#userNameText { position: absolute; top: 25px; left: 10% }
#userNameInput { position: absolute; top: 20px; left: 50% }
#passwordBackground { position: absolute; top: 0px; left:0px ; background-color:6699bb; width:100% ; height:180px ; z-index:0}
#newAccountBackground { position: absolute; top: 0px; left: 0px ; background-color:6699bb; width:100% ; height:30px ; z-index:0}
#emailText { position: absolute; top: 55px; left: 10% }
#emailInput { position: absolute; top: 50px; left: 50% }
#finish { position: absolute; top: 140px; left: 51% }
#reset { position: absolute; top: 140px; right: 51% }
#center { position: absolute; top: 170px; left: 20% ; width:60%}
#message { position: absolute; top: 270px; left: 27% ; width:370px ; color:003366 ; z-index:1 ;
font-family:verdana ; font-size:10 ; font-weight:bold }
.bold { color:003366 ; z-index:1 ; font-family:verdana ; font-size:10 ; font-weight:bold }
</style>

<script type="text/javascript">

function newText()
{

var node1 = document.createElement();

var text1 = document.createTextNode
("Thank you for signing up to hit tastic, your password will be emailed to you soon");

/* Add the text node to the paragraph */
node1.appendChild(text1);
/* Add the new node to the div called message */
message.appendChild(node1);
}

</script>
</head>

<body>
<div id="center">
<div id="passwordBackground"></div>
<div id="newAccountBackground"></div>

<div id="userNameText" class="bold">User Name:</div>
<div id="emailText" class="bold">Your email address:</div>

<form id="password" >
<input id="userNameInput" type="text" size="25">
<input id="emailInput" type="text" size="25">

<INPUT id="finish" TYPE="button" VALUE="New text!" onClick="newText()">
<input id="reset" type="reset" value="Reset">
</form>
</div>

<div id="message"></div>
</body>
</html>
Pittimann
01-05-2004, 06:02 AM
Hi!

What about something like that:

<script language="JavaScript" type="text/javascript">
<!--
function newText() {
if (document.getElementById('finish').value=="New text!"&&document.getElementById('userNameInput').value!=""&&document.getElementById('emailInput').value!=""){
var node1 = document.createElement();
var text1 = document.createTextNode
("Thank you for signing up to hit tastic, your password will be emailed to you soon");
node1.appendChild(text1);
message.appendChild(node1);
document.getElementById('finish').value="link me somewhere";
}
else if (document.getElementById('userNameInput').value==""){
alert("Please enter your name!");
document.getElementById('userNameInput').focus();
}
else if (document.getElementById('emailInput').value==""){
alert("Please enter your email!");
document.getElementById('emailInput').focus();
}
else{
location.href="otherPage.htm";
}
}
//-->
</script>

Cheers - Pit