www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Dynamic Duplication . . .

Hybrid View

  1. #1
    Join Date
    Mar 2005
    Location
    Mesa, AZ
    Posts
    120

    resolved [RESOLVED] Dynamic Duplication . . .

    Hello All! I've been building a Web Site for my work. I've had some really great help from this forum & I'm trying to work out one last part!

    If you visit the site, you will see many great things. What I'm trying to achive is this: When a person begins to input data into the various text entry fields, i want that data to automatically (dynamically) copy itself to the last text entry field "Call Notes".

    Entering input into "Customer Name" [xiodiunnf]

    At the same time in "Call Notes" [xiodiunnf] would magically appear.

    Now, at first I thought I could do this with an Array & the document.write function, but when the page loads, I get "undefined" because my first variable is NULL.

    Here is the pertinent code:
    HTML Code:
    <!-- Attempt to grab pertinet elements, pack them into an array & have that array paste into 'call notes' (BROKEN) -->
    <script type="text/javascript">
    var notes1 = document.getElementById('01');
    var notes2 = document.getElementById('02');
    var notes3 = document.getElementById('03');
    var notes4 = document.getElementById('06');
    var notes5 = document.getElementById('11');
    var notes6 = document.getElementById('15');
    var notes7 = document.getElementById('16');
    var makenotes = notes1.concat(notes2,notes3,notes4,notes5,notes6,notes7)
    </script>
    HTML Code:
    <!-- Data Outcome -->
    <p>Call Notes:</p>
    <textarea rows="10" cols="50" { document.write('makenotes'); } ></textarea>
    <br />
    I understand WHY I'm getting the error "Cannot call method 'concat' of null", but I don't know how to fix it.

    Any help would be great!
    -Alex
    https://www.thisguyshouldworkfor.us/
    "You never know, unless you ask!"

  2. #2
    Join Date
    Apr 2010
    Location
    Oslo, Norway
    Posts
    89
    I think you should assign an event-handler for onkeyup or onchange for each of your input-elements, and pick up the data from it at that point. Also, I'd say your current syntax is quite wrong with the javascript-statement in the middle of the textarea-element?

    I assume the IDs of the input-fields are "01", "16" etc? Also, you seem to mix up the elements themselves with the VALUES you actually want. document.getElementById('01') returns the dom-element with the id of "01", not whatever he entered into the box, that is stored in the value-parameter.

    Did this help?
    - Spinner
    Producer, Developer, Gamer, Father and Husband.

    Spinners Web-development blog

  3. #3
    Join Date
    Mar 2005
    Location
    Mesa, AZ
    Posts
    120

    Lightbulb Its Coming Together!

    Quote Originally Posted by Spinner View Post
    You seem to mix up the elements themselves with the VALUES you actually want. document.getElementById('01') returns the dom-element with the id of "01", not whatever he entered into the box, that is stored in the value-parameter.

    Did this help?
    As soon as I read that, it made perfect sense. I was grabbing the physical element itself, and not the data put in. I was thinking I needed an event handler, but my idea was still wrong, compared to yours.

    It worked GREAT! Check it out!.

    One last question though. How do I style the text? I'm trying to put a "<br /> after each line, but the way I'm doing it right now, the "<br />" is just getting added as plain text in the value.

    I read up on the .innerHtml in javascript, but wasn't sure if I could apply it like that in this instance.

    Thanks!
    -Alex
    https://www.thisguyshouldworkfor.us/
    "You never know, unless you ask!"

  4. #4
    Join Date
    Nov 2010
    Posts
    1,036
    text areas use \n to denote a new line:
    Code:
    document.getElementById('output_textarea').value=notes1+'\n'+notes2+'\n'+notes3;

  5. #5
    Join Date
    Mar 2005
    Location
    Mesa, AZ
    Posts
    120

    resolved Eureka!

    Quote Originally Posted by xelawho View Post
    text areas use \n to denote a new line:
    Code:
    document.getElementById('output_textarea').value=notes1+'\n'+notes2+'\n'+notes3;

    Yep! That was it. its all done!

    Thanks everybody!
    -Alex
    https://www.thisguyshouldworkfor.us/
    "You never know, unless you ask!"

  6. #6
    Join Date
    Apr 2010
    Location
    Oslo, Norway
    Posts
    89
    Here is a crude example, unless I have misunderstood your attempt completely:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Weird notes thing</title>
    <script type="text/javascript">
    	function updateData(){
    		var notes1=document.getElementById('01').value;
    		var notes2=document.getElementById('02').value;
    		var notes3=document.getElementById('03').value;
    
    		document.getElementById('output_textarea').value=notes1+' '+notes2+' '+notes3;
    	}
    	
    </script>
    </head>
    <body id='body'>
    	<input type='text' id='01' value='' onkeyup='updateData()'/>
    	<input type='text' id='02' value='' onkeyup='updateData()'/>
    	<input type='text' id='03' value='' onkeyup='updateData()'/>
    	<textarea id='output_textarea'></textarea>
    </body>
    </html>
    Was this what you were after?
    - Spinner
    Producer, Developer, Gamer, Father and Husband.

    Spinners Web-development blog

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles