More than one form on a single page with conflicting outputs. Need Javascript only solution

Question

I posted a similar question before, but I failed to clarify I want to avoid using jQuery or any outside sources of code. I simply want to be able to have two or more forms existing on a single page that function independent of one another. I assume it's somewhere in my HTML and scripting where I have failed to identify the right output, please help.

<form name="Form1" onsubmit="return false;" action="">
<b><font color="#2C3E60">Name:</font></b><br>
<input type="text" name="name" id="name" placeholder="Name"><br>
<b><font color="#2C3E60">Phone number:</font></b><br>
<input type="text" name="phone" id="phone" placeholder="Phone number"><br>
<b><font color="#2C3E60">Yes/No?:</font></b> <br>   
<select type="drop" name="Question1" id="question1">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
<b><font color="#2C3E60">Yes/No 2?:</font></b><br>
<select type="drop" name="Question2" id="question2">
<option value="Select Yes, No or n/a">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="n/a">n/a</option>
</select>  
<br>
<b><font color="#2C3E60">Notes:</font></b><br>
<textarea type="textarea" name="Notes" id="notes" placeholder="Problem" 
cols="70"  rows="3"></textarea>
<br>
<b><font color="#2C3E60">Issue:</font></b><br>
<textarea type="textarea" name="Issue" id="issue" placeholder="Issue" 
cols="70"   rows="6"></textarea>    
<br>
<b><font color="#2C3E60">Action:</font></b><br>
<textarea type="textarea" name="Action" id="action" placeholder="Action" 
cols="70"  rows="10"></textarea>
<br>
<textarea type="textarea" name="form1output" 
onclick="this.focus();this.select()" id="output" cols="70"       rows="25" 
placeholder="Output"></textarea>
<br>
<div class="btn-group">
<button value="Combine" onclick="convert()" id="combine1">Combine</button> 
<br><br>
</div>    
<div class="btn-group">
<button type="reset" value="Reset form">Reset form</button> <br><br>
</div>

</form>

<hr>

<form name="Form2" onsubmit="return false;" action="">
<b><font color="#2C3E60">Name:</font></b><br>
<input type="text" name="Name2" id="name2" placeholder="Name"><br>
<b><font color="#2C3E60">Phone Number:</font></b><br>
<input type="text" name="Currentnumber" id="currentnumber" 
placeholder="Corrent phone number"><br>
<b><font color="#2C3E60">Y or N:</font></b> <br>   
<select type="drop" name="YESNO" id="yesno">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
<b><font color="#2C3E60">Did you offer self serve?:</font></b><br>
<select type="drop" name="Selfserve" id="SSO">
<option value="Select Yes, No or n/a">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="n/a">n/a</option>
</select>  
<br>
<b><font color="#2C3E60">Problem:</font></b><br>
<textarea type="textarea" name="Problem" id="problem" placeholder="Problem" 
cols="70"  rows="3">               </textarea>
<br>
<b><font color="#2C3E60">Issue:</font></b><br>
<textarea type="textarea" name="Issue" id="issue2" placeholder="Issue" 
cols="70"   rows="6">                   </textarea>    
<br>
<b><font color="#2C3E60">Action:</font></b><br>
<textarea type="textarea" name="Action" id="action2" placeholder="Action" 
cols="70" rows="10"></textarea>
<br>
<textarea type="textarea" name="form2output" id="output2" 
onclick="this.focus();this.select()"                 cols="70" rows="25" 
placeholder="Output"></textarea>
<br>
<div class="btn-group">
<button value="Combine" onclick="convert2()" id="combine2">Combine</button> 
<br><br>
</div>
<div class="btn-group">
<button type="reset" value="Reset form">Reset form</button> <br><br>
</div>
</form>

My first script

<script>
/*Reset command*/
$(document).ready(function(){
$(":reset").css("background-color", "");
});
</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 phone = document.getElementById("phone").value;
var question1 = document.getElementById("question1").value;
var question2 = document.getElementById("question2").value;
var notes = document.getElementById("notes").value;
var issue = document.getElementById("issue").value;
var action = document.getElementById("action").value;
//input = wordwrap(input, 70, true);

var output = "";

output += "Name: " + name + "\n";
output += "Number: " + phone + "\n";
output += "Question 1?: " + question1 + "\n";
output += "Question 2?: " + question2 + "\n\n";
output += "Notes: " + notes + "\n\n";
output += "Issue: " + issue + "\n\n";
output += "Action: " + action + " ";


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

}  


function myFunction(x) {
 x.classList.toggle("change");
 }


</script>

And the second...

<script>

if (!str)
return str;

var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : 
'|\\S+?(\\s|$)');

return str.match( RegExp(regex, 'g') ).join(brk);
}

function convert2() {
var Name2 = document.getElementById("name2").value;
var Currentnumber = document.getElementById("currentnumber").value;
var YESNO = document.getElementById("yesno").value;
var selfserve = document.getElementById("SSO").value;
var problem = document.getElementById("problem").value;
var issue2 = document.getElementById("issue2").value;
var action2 = document.getElementById("action2").value;
//input = wordwrap(input, 70, true);

var output = "";

output += "Name2: " + name2 + "\n";
output += "Current number: " + currentnumber + "\n";
output += "Yes No?: " + yesno + "\n";
output += "Self Serve?: " + selfserve + "\n\n";
output += "Problem: " + problem + "\n\n";
output += "Issue: " + issue2 + "\n\n";
output += "Action: " + action2 + " ";


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

function myFunction(x) {
x.classList.toggle("change");
}

</script>

As I said, I need everything for the code to exist on just the one page.

Possible duplicate of [More than one form on a single page](https://stackoverflow.com/questions/10936359/more-than-one-form-on-a-single-page) — Ken White, Aug 31 '17 at 02:55
No, that page looks to be using JQuary. I am asking how to solve this without JQuary, or anything but the javascript on the single page. — Ty H, Aug 31 '17 at 03:03
It is a question, I am not super experienced with this, and am asking for help. — Ty H, Aug 31 '17 at 03:05
So you want somebody to implement it for you for free? At the moment you just posted a task and awaiting a solution. What is your role in the process of "solving" the problem? — zerkms, Aug 31 '17 at 03:08
What is your problem? I have been stuck on this of a while now and had no luck. If you don't want to help, that's fine, no need to be rude. And seeing as this site seems to be where people come to ask for help, I am not sure why you find it so surprising someone asking for help. — Ty H, Aug 31 '17 at 03:12
@zerkms Ty H is new to SO, It's better if you explained how to ask or how to present the problem... — Aref Ben Lazrek, Aug 31 '17 at 03:15
@TyH please clarify what's the problem you are facing whats not working with your code? you must be more specific — Aref Ben Lazrek, Aug 31 '17 at 03:17
@TyH you're not asking for help, you're looking for someone to do your work for free. — zerkms, Aug 31 '17 at 03:17
Thanks, and sorry, I thought it was clear. The two forms I have there as an example are conflicting, when I hit submit on either, it only outputs to the first output text area. But I want them as to separate forms, so submitting on one has no effect on the other. — Ty H, Aug 31 '17 at 03:20
@TyH I'm here helping you realise you're doing it wrong. Also, you won't learn anything from the answer, as you confirmed recently: "I'll admit I don't understand all of it.". — zerkms, Aug 31 '17 at 03:23
first issue: you have duplicated function names - and, a minor issue, your code is unreadable - poor indentation — Jaromanda X, Aug 31 '17 at 03:26
Sorry my code is ugly. and ok, so can you tell me how I should fix it? I can change the second script to a different function name. But I am still lost on this. — Ty H, Aug 31 '17 at 03:34
word wrap function is duplicated, if your js files are separated doesn't mean they are independant of each other — Aref Ben Lazrek, Aug 31 '17 at 03:34
var Name2 = document.getElementById(name2").value; //missing a quote — Aref Ben Lazrek, Aug 31 '17 at 03:35
Ok, I have eliminated the second word wrap, and I have also fixed the missing quote. — Ty H, Aug 31 '17 at 03:38
@TyH if you did that it will work, the last error in convert 2 : js variable are case sensitive but you are using uppercase var then calling lowercase — Aref Ben Lazrek, Aug 31 '17 at 04:01

score 0 · Answer 1 · answered Aug 31 '17 at 04:44

JQuery is useful in this case to speed up your development process , but if you want this approach with pure JS this can help you

function convert(currentForm){

var fields = currentForm.elements;

var limit = fields.length;
var output = "";

for(var i = 0; i < limit; i++){
var field = fields[i];

if(field.getAttribute("data-use") !== "true"){
continue;
}

var value = null;
if (field.type === "input" || field.type === "textarea"){
value = field.value;
}

if(field.type === "select-one"){
value = field.options[field.selectedIndex].value;
}

var label = field.name + ":  " + value + "\n";
output += label;

}

var outputContainer = document.getElementById("output");

outputContainer.innerHTML = output;
return false;
}

You should set data-use="true" attribute for every input/field you want to capture.

In your form tag you should replace onsubmit="return convert(this); instead onsubmit="return false"

Hope it helps you.

Here a demo

You can add whatever form you want and just keep one output div element and this code will work without problem, so you don't need to generate multiple functions for the same process. — Juorder Gonzalez, Aug 31 '17 at 04:47

score -1 · Accepted Answer · answered Aug 31 '17 at 04:03

your have some syntaxic errors here a corrected code

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 question1 = document.getElementById("question1").value;
var question2 = document.getElementById("question2").value;
var notes = document.getElementById("notes").value;
var issue = document.getElementById("issue").value;
var action = document.getElementById("action").value;
//input = wordwrap(input, 70, true);

var output = "";

output += "Name: " + name + "\n";
output += "Number: " + phone + "\n";
output += "Question 1?: " + question1 + "\n";
output += "Question 2?: " + question2 + "\n\n";
output += "Notes: " + notes + "\n\n";
output += "Issue: " + issue + "\n\n";
output += "Action: " + action + " ";


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

}  



 /////// second



function convert1() {
var name2 = document.getElementById("name2").value;
var currentnumber = document.getElementById("currentnumber").value;
var yesno = document.getElementById("yesno").value;
var selfserve = document.getElementById("SSO").value;
var problem = document.getElementById("problem").value;
var issue2 = document.getElementById("issue2").value;
var action2 = document.getElementById("action2").value;
//input = wordwrap(input, 70, true);

var output = "";

output += "Name2: " + name2 + "\n";
output += "Current number: " + currentnumber + "\n";
output += "Yes No?: " + yesno + "\n";
output += "Self Serve?: " + selfserve + "\n\n";
output += "Problem: " + problem + "\n\n";
output += "Issue: " + issue2 + "\n\n";
output += "Action: " + action2 + " ";


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

Perfect, that's amazing, I can't believe it was simply due to the case sensitivity issue. I though I had those all correct. I really appreciate you helping unlike that other guy. — Ty H, Aug 31 '17 at 04:16

More than one form on a single page with conflicting outputs. Need Javascript only solution

2 Answers2