I am working on a form where I added a second output field, in the second field, it has a different format that I have placed an example of in my code. Now I have got it partially working, but two problems crop up.
First it returns the [object HTMLTextAreaElement] response in the output field first, than places the output I want. I can't figure out why it keeps adding [object HTMLTextAreaElement] first.
Second, the first time I use the form, aside from the [object HTMLTextAreaElement], it does work. However when I use my 'Reset' button, it doesn't actually seem to 'clear' the output from the first field, because it seems to be remembering anything entered the previous time around in spite of being reset. I do need the second output field to perform as it's coded, except without returning information entered before being reset. I hope this makes sense.
Lastly, is there some way I can just have one button output the results to both output boxes? It's not the end of the world if I have to use two buttons, but if I could get them combined into one, that would be great. As I have it set currently I know I have it grabbing the entered text from the first output before than converting it to the second. So maybe this isnt a super simple fix.
Also, please no JQuery fixes, just javascript and HTML. I want all code on the single page. Please, somebody help, I have been stuck on this for hours, and nothing I try to fix it has worked.
Here's my HTML
<table width="100%" height="700" border=0>
<tr>
<td width=550 valign=top>
<form name="Form1" onsubmit="return false;" action="">
Name:
<br>
<input type="text" name="Name" id="name" placeholder="Name"><br>
Number:
<br>
<input type="text" name="Number" id="number" placeholder="Number"><br>
Question:
<br>
<input type="text" name="Question1" id="questionOne" placeholder="Answer">
<br>
Question:
<br>
<select type="drop" name="Question2" id="questionTwo">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select><br>
Enter some text?
<br>
<textarea type="textarea" name="Sometext" id="someText" placeholder="Type
something"
cols="70" rows="3"></textarea><br>
Question:
<br>
<select type="drop" name="Question3" id="questionThree">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option></select>
<br>
Question:
<br>
<select type="drop" name="Question4" id="questionFour">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option></select>
<br>
Enter more text:<br>
<textarea type="textarea" name="Story" id="story" placeholder="Type me a
story"
cols="70" rows="10"></textarea>
<br>
</td>
<td valign="top">
<table border=0 height=100% ><tr><td valign="top" height=410>
<textarea type="textarea" name="output" onclick="this.focus();this.select()"
id="output" cols="70" rows="25" placeholder="Name:
Number:
Answer:
Answer:

Some text:

Answer:

Answer:

A little story:"></textarea>
<br>
</td>
</tr>
<tr>
<td valign=top>
<div class="btn-group">
<button value="Combine" onclick="convert()" id="combine1">
Combine
</button><br><br>
</div>
<textarea type="textarea" id="secondOutput" name="output"
onclick="this.focus();this.select()" cols="70" rows="15" placeholder="Three
Lines
Down
Name:
Number:
Answer:
Answer:
Some text:
Answer:
Answer:
A little story:"></textarea>
<div class="btn-group">
<button value="Combine" onclick="NoteStart()" id="combine1">
Second copy
</button><br><br>
</div>
</td>
</tr>
<tr>
<td align="right">
<table width=25% height=100% border=0>
<tr>
<td valign="bottom">
<div class="btn-group">
<button type="reset" value="Reset form">
Reset form
</button> <br><br>
</div>
</form></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Yes, I know, tables, sorry...
And the script
<script>
function wordwrap(str, width, brk, cut) {
brk = brk || '\n';
width = width || 60;
cut = cut || false;
if (!str)
return str;
var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' :
'|\\S+?(\\s|$)');
return str.match( RegExp(regex, 'g') ).join(brk);
}
function convert() {
var name = document.getElementById("name").value;
var number = document.getElementById("number").value;
var questionOne = document.getElementById("questionOne").value;
var questionTwo = document.getElementById("questionTwo").value;
var someText = document.getElementById("someText").value;
var questionThree = document.getElementById("questionThree").value;
var questionFour = document.getElementById("questionFour").value;
var story = document.getElementById("story").value;
var output = "";
output += "Name: " + name + "\n";
output += "Number: " + number + "\n";
output += "Answer: " + questionOne + "\n";
output += "Answer: " + questionTwo + "\n\n";
output += "Some text: " + someText + "\n\n";
output += "Answer: " + questionThree + "\n\n";
output += "Answer: " + questionFour + "\n\n";
output += "A little story: " + story + "";
document.getElementById("output").value = output;
}
</script>
<script>
function NoteStart() {
var input = document.getElementById("output").value;
input = input.replace(/\r/g, '').replace(/\n\n+/g, '\n');
input = wordwrap(input, 60, '\n', true);
var data = input.replace(/[ \n\t\r]+$/g, '').split(/\n+/);
var StartNS = "";
for (var i=0; i<data.length; i++) {
if (i%10==0) {
if (i>0)
output += "\n";
output += "Three\nLines\nDown\n";
}
output += data[i]+"\n";
}
output += (data.length%10>0) ? "\n\n" : "\n";
document.getElementById("secondOutput").value = output;
}
</script>
As I said, I have been trying to fix this on my own for a while now, but am stumped here. Appreciate any help. Here, I made a jsfiddle of it here https://jsfiddle.net/s8qhezmx/ so anyone can see what does work
