...

View Full Version : How to Display Contents of Multiple InputBoxes and Lists on a Single TextArea



ValashuElahad
01-02-2012, 09:46 PM
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:



<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!

Old Pedant
01-02-2012, 10:16 PM
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.

ValashuElahad
01-02-2012, 10:28 PM
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?



<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.

Old Pedant
01-02-2012, 11:02 PM
You managed to add in an extra "c" somehow:


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:


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:

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

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]

Old Pedant
01-02-2012, 11:04 PM
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.

ValashuElahad
01-03-2012, 12:07 PM
Awesooooooooooome. I really appreciate your help on this! You are a man full of Javascript wisdom. ;) I learned a number of things from you. :D 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:



<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. :(



<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:


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

xelawho
01-03-2012, 02:58 PM
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


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:

document.getElementById('tickDoc_id').value += document.getElementById('name_id').value+"\n";

ValashuElahad
01-05-2012, 10:07 PM
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:


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



While this doesn't:



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

Old Pedant
01-05-2012, 10:49 PM
Yes? Why did you omit the two .value properties in that second function?????



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

xelawho
01-05-2012, 10:54 PM
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:



<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>

Old Pedant
01-05-2012, 10:58 PM
So what you want is this:


<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.

Old Pedant
01-05-2012, 10:59 PM
Well, now you have both answers. Xelawho shows how to do it using IDs. Me, I'll stick with names for fields.

Old Pedant
01-05-2012, 11:02 PM
If you wanted to keep doing this, for several names and addresses, then we could make a minor modification:


<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>

ValashuElahad
01-06-2012, 12:18 AM
Ohh. Ha ha. I missed that sorry. :| Again thanks. :D


Yes? Why did you omit the two .value properties in that second function?????



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

ValashuElahad
01-06-2012, 01:14 AM
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.



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.

Old Pedant
01-06-2012, 02:49 AM
Let's start with a basic question, first.

WHAT is it you rea REALLY trying to accomplish here?

What possible value is there in copying those fields to a <textarea> if then the only thing you do with any of it is hit a "clear all" button and the start all over again?

Are you intending to somehow store these "logs" somewhere? If so, where? And how?

**********

Up until you said you wanted to get rid of the "-------------" line and wanted to stop appending the next set of name/value pairs to the textarea, it *kind* of made sense to me: You'd accumulate a boatload of name/value pairs into the one textarea and *then* save the textarea contents to a file or database. Not the way I would recommend doing it, but at least it made sense.

But now you are saying you never want more than one set of the field names with value in the textarea. WHY THEN ARE YOU DOING THIS, AT ALL?

I just can't help but feel that there is something badly wrong about this entire exercise.

ValashuElahad
01-06-2012, 08:43 PM
This is actually a form that would allow the user input information from another person. It generates all the data afterwards so that the user can copy and paste the accumulated information to an application/software and have the logs saved there.

This HTML document will not be saved on the server but rather on a network folder. And saving the generated logs from the form directly to the application on or to any database is not an option. If the user would like to save the information he has gathered everytime he uses the form, the only option is to save it on a notepad and save it to his local computer or to a network folder.

The MAIN reason why I am creating this form is to make the format of the documentation of the information we gather from the people standardized. People who would be using this can actually do this manually on a notepad using a template. However I want the HTML page where this form will be embedded to to have other things that may help the person with his work. Like a scrolling text for guidelines, timezone application, etc.

I hope you get the gist of what I am trying to do here. But if you really need to see the actual form I am creating, I can probably send you the form so you can view it personally.

ValashuElahad
01-06-2012, 08:51 PM
By the way, not all the fields are required to be filled up. It actually depends on the situation of the person where the data will be gathered from. That's why I need some sort of a loop script that would go through the whole form and if it sees a field with a blank value then it would output its value as 'N/A' rather than just leave it blank.

ValashuElahad
01-06-2012, 08:56 PM
Also, I tried to work on it myself and below is the code I came up with. The logic seems to be correct to me. I do not really know where I went wrong. The loop script should go through all the elements on the form one by one and then if it sees that the field value is blank then it would display the field name plus 'N/A' and if it isn't then it would display the field name plus the value on the field.



<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 == "text" && field.value == "")
{
log = field.name + ": " + "N/A" "\n";
}
else
{
log = field.name + ": " + field.value + "\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>

Old Pedant
01-06-2012, 09:06 PM
Not quite.


if ( field.type == "text" )
{
var value = field.value;
if ( value == "") value = "N/A"
log = field.name + ": " + value + "\n";
}

As your code was, it would have picked up the textarea and the submit button and shown them as N/A. (You were also missing a + but that wasn't the big problem.)

ValashuElahad
01-06-2012, 09:28 PM
THANK YOU SO MUCH!! I finally found the code I am looking for and it works!



<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 == "text" )
{
var value = field.value;
if ( value == "") value = "N/A"
log += field.name + ": " + value + "\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>

ValashuElahad
01-06-2012, 09:34 PM
Sir I have one last question before we end this thread. I am just wondering..


How come this works:


if ( field.type == "text" )
{
var value = field.value;
if ( value == "") value = "N/A"
log += field.name + ": " + value + "\n";

}


While this doesn't:


if ( field.type == "text" )
{
var value = field.value;
if ( value == "")
{
value = "N/A"
log += field.name + ": " + value + "\n";
}

}

ValashuElahad
01-07-2012, 11:11 AM
Nevermind my question. I found my mistake. Should be like this:



if ( field.type == "text" )
{
var value = field.value;
if ( value == "")
{
value = "N/A"
}
log += field.name + ": " + value + "\n";
}



Sir I have one last question before we end this thread. I am just wondering..


How come this works:


if ( field.type == "text" )
{
var value = field.value;
if ( value == "") value = "N/A"
log += field.name + ": " + value + "\n";

}


While this doesn't:


if ( field.type == "text" )
{
var value = field.value;
if ( value == "")
{
value = "N/A"
log += field.name + ": " + value + "\n";
}

}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum