同じページの出力が2つのフォームが互いに競合しています

Question

少なくとも2つのフォーム（おそらくより多くのフォーム）を作成しようとしています。 2番目のスクリプトを別のスクリプトに設定してみましたが、それぞれのフィールドに正しいIDを入力していました。しかし、それは常に、最初の出力テキストエリアに出力されます。私はスクリプトのためにそれぞれのフォームを定義する必要があると思います。私はこのすべてに慣れていないので、それをどうやって行うのかは分かりません。誰もが提供できる援助を本当に感謝します。

<table width="100%" height="600" border=0> 
<tr> 
<td width=550 valign=top> 

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



</td> 
<td valign="top"> 

<table border=0 height=100% ><tr><td valign="top" height=410> 

<textarea type="textarea" name="form1output" 
onclick="this.focus();this.select()" id="output" cols="70" rows="25" 
placeholder="Name: 
Number: 
Y or N?: 
Question?:&#x0a; 
Notes:&#x0a; 
Issue:&#x0a; 
Action:"></textarea> 
<br> 

</td> 

</tr> 
    <tr><td valign=top> 

    <div class="btn-group"> 
<button value="Combine" onclick="convert()">Combine</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> 

</td></tr></table> 
</td></tr></table> 
</td></tr></table> 

<hr> 

<table width="100%" height="600" border=0> 
<tr> 
<td width=550 valign=top> 

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


</td> 
<td valign="top"> 

<table border=0 height=100% ><tr><td valign="top" height=410> 
<textarea type="textarea" name="form2output" 
onclick="this.focus();this.select()"   
id="output2" cols="70" 
rows="25" placeholder="Name: 
Number: 
Y N?: 
Question?:&#x0a; 
Notes:&#x0a; 
Issue:&#x0a; 
Action:"></textarea> 
<br> 

</td> 

</tr> 
    <tr><td valign=top> 

    <div class="btn-group"> 
<button value="Combine" onclick="convert()">Combine</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> 

</td></tr></table> 
</td></tr></table> 
</td></tr></table> 

</div> 

、スクリプト

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

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

編集：私はイヴォによって提案された変更をしたが、まだ動作していないようです。

Answer 1

変更output2にForm2のテキストエリアのID：

<textarea type="textarea" name="form2output" 
onclick="this.focus();this.select()"    
id="output2" 
cols="70" rows="25" placeholder="Name: 
Number: 
Y N?: 
Question?:&#x0a; 
Notes:&#x0a; 
Issue:&#x0a; 
Action:"></textarea> 

、あなたがするForm2のために出力を設定するJSの行を変更：

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