Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question replacing site text with user text

    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Simple example.
    Code:
    <!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?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.

  • #6
    Regular Coder
    Join Date
    Jan 2006
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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.

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

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Regular Coder
    Join Date
    Jan 2006
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    Regular Coder
    Join Date
    Jan 2006
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    I C, thanks again. Very helpful.

    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •