...

View Full Version : replacing site text with user text



h8ids
05-31-2007, 09:28 PM
Trying to grab and display user input.

The user would insert info into a field. That info would dynamically replace text already in the web-page.

I know JavaScript is needed, but I'm in need of a tutorial to get myself headed in the right direction.

Thanks

_Aerospace_Eng_
05-31-2007, 09:42 PM
Using javascript will only make the text show up for that user only. It won't stay on the page. If you are wanting it to stay on the page then javascript is not the solution.

h8ids
05-31-2007, 10:16 PM
It won't need to stay on the page.
Glad you mentioned that fact.

Ultimately, the data will be submitted to a database.

I've been looking at setAttribute and getAttribute. Not too familiar with using XML Nodes and DOM commands.
Would setAttribute and getAttribute be a solution?

_Aerospace_Eng_
05-31-2007, 11:39 PM
Simple example.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function insertIt(what)
{
var createText = document.createTextNode(what); // creates text from input
var cell = document.getElementById('texthold'); // used through out function
if(cell.hasChildNodes()) // removes all child nodes in element with id="texthold"
{
while(cell.childNodes.length >= 1 )
{
cell.removeChild( cell.firstChild );
}
}
cell.appendChild(createText); // adds createText to element with id="texthold"
return false; // used to keep from from submitting
}
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return insertIt(this.newtext.value)">
<input type="text" name="newtext">
<input type="submit" value="Insert It">
</form>
<div id="texthold">This text will be replaced</div>
</body>
</html>

BTW we do have a javascript forum you know?

h8ids
06-04-2007, 04:22 PM
Thank you for the example.

Still learning the differences of languages. My project is a crash course of HTML, JavaScript, PHP, Apache, CSS and XML.

h8ids
06-04-2007, 11:35 PM
Anyway to achieve the same goal as the above "Simple example." without relying on a <form> element?

I've tried the following; removing the Submit button and editing the following <input> field tag. But nothing occurs.



<input type="text" name="newtext" onBlur="return insertIt(this.newtext.value)">

_Aerospace_Eng_
06-04-2007, 11:42 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function insertIt(what)
{
var createText = document.createTextNode(what); // creates text from input
var cell = document.getElementById('texthold'); // used through out function
if(cell.hasChildNodes()) // removes all child nodes in element with id="texthold"
{
while(cell.childNodes.length >= 1 )
{
cell.removeChild( cell.firstChild );
}
}
cell.appendChild(createText); // adds createText to element with id="texthold"
}
</script>
</head>
<body>
<form action="#" method="post">
<div>
<input type="text" name="newtext" onblur="insertIt(this.value)">
</div>
</form>
<div id="texthold">This text will be replaced</div>
</body>
</html>

As with your attempt nothing should have occurred. It should have errored out because this.newtext.value doesn't exist anymore. You should have used this.value.

h8ids
06-05-2007, 04:42 PM
Thank you.

I see the difference.

(this.value)

AND

<DIV></DIV> or <SPAN></SPAN>


New question.
How come the DIV and SPAN tags, around the INPUT field, allow the FUNCTION to work?

I understand why the tags need to be around the updated text.

_Aerospace_Eng_
06-05-2007, 07:32 PM
Its more of a valid html issue. In HTML Strict inputs can't be directly inside of a form element. They need to be in a block level element hence the div around the input. Also input needs to be in a form or again it won't be valid html strict.

h8ids
06-05-2007, 09:29 PM
I C, thanks again. Very helpful.


Its more of a valid html issue. In HTML Strict inputs can't be directly inside of a form element. They need to be in a block level element hence the div around the input. Also input needs to be in a form or again it won't be valid html strict.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum