Creating a multi input to single output text area

Question

I am not very experienced with Javascript, I am working on a little project on the side and could use some assistance. In essence I am trying to create a form that I can enter key points of data, as well as text, than have it convert to a format in a textbox for easy copy and paste.

<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 input = document.getElementById("name").value;
var input = document.getElementById("phone").value;
var input = document.getElementById("sex").value;
var input = document.getElementById("options").value;
var input = document.getElementById("text1").value;
var input = document.getElementById("text2").value;
var input = document.getElementById("text3").value;
input = wordwrap(input, 70, true);

var output = "";

document.getElementById("output").value = output;
}

</script>
<form name="myform" onsubmit="return false;">
Name:<br>
<input type="text" name="name" id="name"><br>
Phone number:<br>
<input type="text" name="phone" id="phone"><br>
Sex?:    
<select name="sex" id="sex">
<option value="man">Male</option>
<option value="woman">Female</option>
</select>
<br>
Options: 
<select name="Options" id="options">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>  
<br>
Text 1:<br>
<textarea name="input" id="text1" cols="70" rows="10"></textarea>
<br>
Text 2:<br>
<textarea name="input" id="text2" cols="70" rows="10"></textarea>
<br>
Text 3:<br>
<textarea name="input" id="text3" cols="70" rows="10"></textarea>
<br>
<input type="button" value="Combine" onclick="convert();"><br>

<textarea name="output" id="output" cols="70" rows="10"></textarea>
</form>

I would ideally like to even format how the text appears as such

Name: Entered Name

Phone: Entered number

Sex: Chosen Sex

Option: Chosen Option

Text 1: The text entered

Text 2: The text entered

Text 3: The text entered

I can't seem to get the output to function at all. I would really appreciate any help anyone can offer.

Put your javascript before close body tag or use DOMContentLoaded — Risa__B
– Risa__B, Commented Aug 27, 2017 at 4:34

Sohail · Accepted Answer · 2017-08-27 04:39:25Z

Maybe you don't need wordwrap, infact you need to capture all the input fields in seperate variables and combine them together into one output.

<form name="myform" onsubmit="return false;">
Name:<br>
<input type="text" name="name" id="name"><br>
Phone number:<br>
<input type="text" name="phone" id="phone"><br>
Sex?:    
<select name="sex" id="sex">
<option value="man">Male</option>
<option value="woman">Female</option>
</select>
<br>
Options: 
<select name="options" id="options">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>  
<br>
Text 1:<br>
<textarea name="text1" id="text1" cols="70" rows="10"></textarea>
<br>
Text 2:<br>
<textarea name="text2" id="text2" cols="70" rows="10"></textarea>
<br>
Text 3:<br>
<textarea name="text3" id="text3" cols="70" rows="10"></textarea>
<br>
<input type="button" value="Combine" onclick="convert()"><br>

<textarea name="output" id="output" cols="70" rows="10"></textarea>
</form>


<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 phone = document.getElementById("phone").value;
var sex = document.getElementById("sex").value;
var options = document.getElementById("options").value;
var text1 = document.getElementById("text1").value;
var text2 = document.getElementById("text2").value;
var text3 = document.getElementById("text3").value;
//input = wordwrap(input, 70, true);

var output = "";

output += "Name: " + name + "\n";
output += "Phone: " + phone + "\n";
output += "Sex: " + sex + "\n";
output += "Options: " + options + "\n";
output += "Text1: " + text1 + "\n";
output += "Text2: " + text2 + "\n";
output += "Text3: " + text3 + "\n";


document.getElementById("output").value = output;

}

</script>

Collectives™ on Stack Overflow

Creating a multi input to single output text area

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related