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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to Display Contents of Multiple InputBoxes and Lists on a Single TextArea

    Hi guys. I am a newbie here on this forum. I have tried to learn how to use javascript on HTML forms however I just couldn't find the answers to my questions on the net. Perhaps I am not using the correct 'terms' when searching so I decided to join a forum like this to ask help.

    Anyway, I have a form with multiple inputboxes and lists and my goal is to generate and display all the accumulated information to a textarea so that the user can copy it afterwards.

    I have an idea how I could make it work but I am not entirely sure how to put it on a code. I actually have a number of questions on this so let me start off with the first one. I am eager to learn javascript so I would post my questions one after the other as my questions get answered. That way I get to learn how to build the code from the top.

    So my first one is this..

    1. I would like to know how to display a user input on an inputbox to a textarea. My html form is like this:

    Code:
    <html>
    	<head>
    		<script language="javascript">
    			function generateLogs (form)
    			{
    				TW_Logger.tickDoc.value = TW_Logger.name.value;
    			}
    		</script>
    	</head>
    	<body>
    		<form name="TW_Logger">
    			<label for="name_id">Name: </label>
    			<input type="text" name="name" id="name_id"/><br /><br />
    			<label for="logs_id">Ticket Documentation: </label><br />
    			<textarea cols="53" rows="5" name="tickDoc" id="tickDoc_id">       
    			</textarea><br /><br />
    			<label></label> 
    			<input type="submit" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
    		</form>
    	</body>
    </html>
    I don't know what I did wrong but the script is not working. I appreciate any help I can get from anyone. Thanks!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    Code:
        form.tickDoc.value = form.name.value;
    You passed the <form> reference in to your function, so use it.

    But...

    But because you used a SUBMIT button to call generateLogs, even if the code works that <form> will then be immediately submitted back to the server which will then serve up a brand new page.

    Change your type="submit" to type="button" and now the <form> will not be submitted.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the reply. Appreciate it.

    So.. I made the changes I believe I should and tried it out but it still didn't work. Whatever I put in on the inputbox doesn't appear on the textarea after hitting the Generate Logs button. Did I do something wrong?

    Code:
    <html>
    	<head>
    		<script language="javascript">
    			function generateLogs (form)
    			{
    				form.tickDoc.value = form.cname.value;
    			}
    		</script>
    	</head>
    	<body>
    		<form name="TW_Logger">
    			<label for="name_id">Name: </label>
    			<input type="text" name="name" id="name_id"/><br /><br />
    			<label for="logs_id">Ticket Documentation: </label><br />
    			<textarea cols="53" rows="5" name="tickDoc" id="tickDoc_id">       
    			</textarea><br /><br />
    			<label></label> 
    			<input type="button" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
    		</form>
    	</body>
    </html>

    And also, I am not really sure what you meant by this:

    You passed the <form> reference in to your function, so use it.
    Can't I use the name of the form as its reference?

    I hope you can enlighten me on this Old Pedant.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    You managed to add in an extra "c" somehow:
    Code:
        form.tickDoc.value = form.cname.value;
    It doesn't belong there. Get rid of it.

    *******

    (1) You *can* refer to the form by name, but if you do that you need to qualify it with document.

    Thus:
    Code:
            document.TW_Logger.tickDoc.value = document.TW_Logger.name.value;
    (2) Actually, though, using a name for a <form> is considered obsolescent. You should use an id, instead. And then you would use document.getElementById(...id of the form...)

    (3) When you invoked your generateLogs function from the button, you code this:
    Code:
         onclick="generateLogs(this.form)"
    this is a reference to the current element (the button) and then .form gets the parent form of the element. This is good codind!

    Then your function is defined as
    Code:
        function generateLogs(form)
    so the variable form there (it could be any name...perhaps using form is confusing to you?) *RECEIVES* the reference to the <form> that was sent by the button's onclick call. So this means that you *already have* a reference to the <form> in your function and there is no reason to "look up" the form by name or id.


    [/code]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    Oh, and also <script language=...> is obsolescent. You should use <script type="text/javascript"> instead.

    If you are learning JavaScript from a reference source that uses language=... then you are probably using an outdated source.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Awesooooooooooome. I really appreciate your help on this! You are a man full of Javascript wisdom. I learned a number of things from you. Oh and yeah, I was quite confused with using a name of the variable on my function. I thought I had to use form for it somehow.. But thanks for clearing that out for me.

    So, here's my final working code:

    Code:
    <html>
    	<head>
    		<script type="text/javascript">
    			function generateLogs (form)
    			{
    				form.tickDoc.value = form.name.value;
    			}
    		</script>
    	</head>
    	<body>
    		<form name="TW_Logger">
    			<label for="name_id">Name: </label>
    			<input type="text" name="name" id="name_id"/><br /><br />
    			<label for="logs_id">Ticket Documentation: </label><br />
    			<textarea cols="53" rows="5" name="tickDoc" id="tickDoc_id">       
    			</textarea><br /><br />
    			<label></label> 
    			<input type="button" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
    		</form>
    	</body>
    </html>
    Btw, I have a quick question on document.getElementById(...id of the form...). I just looked it up on the internet and thought I understand now how it works so I configured my code using it. I thought I had it right but it is not working.

    Code:
    <html>
    	<head>
    		<script type="text/javascript">
    			function generateLogs (form)
    			{
    				document.getElementById('tickDoc_id') = document.getElementById('name_id');
    			}
    		</script>
    	</head>
    	<body>
    		<form name="TW_Logger">
    			<label for="name_id">Name: </label>
    			<input type="text" name="name" id="name_id"/><br /><br />
    			<label for="logs_id">Ticket Documentation: </label><br />
    			<textarea cols="53" rows="5" name="tickDoc" id="tickDoc_id">       
    			</textarea><br /><br />
    			<label></label> 
    			<input type="button" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
    		</form>
    	</body>
    </html>
    I also tried this but it also didn't work:
    Code:
    <script type="text/javascript">
    		function generateLogs (form)
    		{
    			var tickDocContent = document.getElementById('tickDoc_id');
    			var nameContent = document.getElementById('name_id');
    			tickDocContent = nameContent;
    		}
    </script>

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    getElementById() just creates a reference to the element (the text area or input box or whatever). To get or set the text inside them you have specify .value the way you did when you were working with the form names

    Code:
    document.getElementById('tickDoc_id').value = document.getElementById('name_id').value;
    you may also be interested in this, which puts a new text box value on a new line every time the button is pushed, instead of overwriting what is currently in the text area:
    Code:
    document.getElementById('tickDoc_id').value += document.getElementById('name_id').value+"\n";

  • Users who have thanked xelawho for this post:

    ValashuElahad (01-05-2012)

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey xelawho. Thanks for the answer. I finally got the getElementbyID() work on my form. However, I have another question for you. I'm not sure what I am doing wrong here.

    This script works:
    Code:
    <script type="text/javascript">
    		function generateLogs (form)
    		{
    			document.getElementById('tickDoc_id').value = document.getElementById('name_id').value;
    		}
    </script>

    While this doesn't:

    Code:
    <script type="text/javascript">
    		function generateLogs (form)
    		{
    			var tickDocContent = document.getElementById('tickDoc_id');
    			var nameContent = document.getElementById('name_id');
    			tickDocContent = nameContent;
    		}
    </script>
    Last edited by ValashuElahad; 01-05-2012 at 10:05 PM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    Yes? Why did you omit the two .value properties in that second function?????

    Code:
    <script type="text/javascript">
    		function generateLogs (form)
    		{
    			var tickDocContent = document.getElementById('tickDoc_id');
    			var nameContent = document.getElementById('name_id');
    			tickDocContent.value = nameContent.value;
    		}
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    if you want to start adding values, you just, uh, add values. Before you get too attached to this approach, though, you should know that bolding some text in a text area and some not is (I think) impossible. But here's how you would do it without the bold:

    Code:
    <html>
    	<head>
    <script type="text/javascript">
    		function generateLogs (form)	{
    			var nameContent = document.getElementById('name_id').value;
    			var addressContent = document.getElementById('address_id').value;
    			document.getElementById('tickDoc_id').value='Name: '+nameContent+'\n'+'Address: '+addressContent;
    		}
    </script>
    	</head>
    	<body>
    		<form name="TW_Logger">
    			<label for="name_id">Name: </label>
    			<input type="text" name="name" id="name_id"/><br /><br />
    			<label for="address_id">Address: </label>
    			<input type="text" name="address" id="address_id"/><br /><br />
    			<label for="logs_id">Ticket Documentation: </label><br />
    			<textarea cols="53" rows="5" name="tickDoc" id="tickDoc_id">       
    			</textarea><br /><br />
    			<label></label> 
    			<input type="button" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
    		</form>
    	</body>
    </html>
    </body>
    </html>

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    So what you want is this:
    Code:
    <html>
        <head>
            <script type="text/javascript">
                function generateLogs (form)
                {
                    var log = "";
                    for ( var e = 0; e < form.elements.length; ++e )
                    {
                        var field = form.elements[e];
                        if ( field.type != null && field.type == "text" )
                        {
                            log += field.name + ": " + field.value + "\n";
                        }
                    }
                    form.tickDoc.value = log; // could be += to retain prior values  
                }
            </script>
        </head>
        <body>
            <form name="TW_Logger">
                <label>Name: <input type="text" name="name" /></label>
                            <br />
                <label>Address: <input type="text" name="address" /></label>
                            <br /><br />
                <label>Ticket Documentation: <br />
                    <textarea cols="53" rows="5" name="tickDoc"></textarea>
                            </label>
                            <br /><br />
                <input type="button" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
            </form>
        </body>
    </html>
    I don't know why you thought it was better to start using id's instead of names. It's not. It's harder because you have to know the exact ids. With the names, you can use the elements collection to find the fields.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    Well, now you have both answers. Xelawho shows how to do it using IDs. Me, I'll stick with names for fields.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    If you wanted to keep doing this, for several names and addresses, then we could make a minor modification:
    Code:
    <html>
        <head>
            <script type="text/javascript">
                function generateLogs (form)
                {
                    var log = "";
                    for ( var e = 0; e < form.elements.length; ++e )
                    {
                        var field = form.elements[e];
                        if ( field.type != null && field.type == "text" )
                        {
                            log += field.name + ": " + field.value + "\n";
                            field.value = ""; // reset the value
                        }
                    }
                    log += "------------------------------\n";
                    form.tickDoc.value += log; 
                }
            </script>
        </head>
        <body>
            <form name="TW_Logger">
                <label>Name: <input type="text" name="name" /></label>
                <br />
                <label>Address: <input type="text" name="address" /></label>
                <br /><br />
                <label>Ticket Documentation: <br />
                    <textarea cols="53" rows="5" name="tickDoc"></textarea>
                </label>
                <br /><br />
                <input type="button" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
            </form>
        </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ohh. Ha ha. I missed that sorry. :| Again thanks.

    Quote Originally Posted by Old Pedant View Post
    Yes? Why did you omit the two .value properties in that second function?????

    Code:
    <script type="text/javascript">
    		function generateLogs (form)
    		{
    			var tickDocContent = document.getElementById('tickDoc_id');
    			var nameContent = document.getElementById('name_id');
    			tickDocContent.value = nameContent.value;
    		}
    </script>

  • #15
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks to you two. Really. I appreciate it a lot.

    Anyway, I honestly think that as far as my project is concerned, Old Pendant's method is more efficient to use since I want to include the label of the inputboxes on the output, and apparently using field.name on my script makes it a lot easier. Nevertheless, I still want to thank you Xelawho for pointing out my miss.

    I have a question for you Old Pendant regarding the loop. I don't really plan to use the Generate Logs button to generate multiple input from my input fields. I actually intend to put a Clear Logs button to clear everything out after every use of the form. That (clearing of the fields) I think I can easily find a script for out there. My problem is with validating the contents of the fields. I want to use 'N/A' as the output value for the blank fields rather than just leaving them blank on the generated output. I believe I can use a loop for that. So basically the output should look like this with the blank fields:

    Name: inputvalue
    Address: N/A

    I checked out the example you've given me and, I think it is something I can modify to do this.

    Code:
    for ( var e = 0; e < form.elements.length; ++e )
                    {
                        var field = form.elements[e];
                        if ( field.type != null && field.type == "text" )
                        {
                            log += field.name + ": " + field.value + "\n";
                            field.value = ""; // reset the value
                        }
                    }
                    log += "------------------------------\n";
                    form.tickDoc.value += log;
    If I understand your loop right, you are validating the field.type first. If it is not null and it is a text type kind of field then you proceed with the output which is basically: field.name + ": " + field.value + "\n";, right?

    Also, correct me if I am wrong but if I want to achieve what I want using your loop as my script's foundation then, I have to remove these lines: field.value = ""; and log += "------------------------------\n"; from this loop. Then, add another loop within this loop that will validate the field.value if they are empty -after validating the field.type of course- then if they are I use log += field.name + ": " + field.value + "N/A"; , right? :|

    I haven't actually tried it yet. I just want to know from a knowledgeable person like you that my logic here is right before I try it out.
    Last edited by ValashuElahad; 01-06-2012 at 01:10 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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