单个页面上的多个表单具有冲突的输出。只需要 Javascript 解决方案

Question

我之前发布了一个类似的问题，但我没有说明我想避免使用 jQuery 或任何外部代码源。我只是希望能够在一个页面上存在两个或多个表单，它们的功能相互独立。我认为它在我的 HTML 和脚本中的某个地方我无法识别正确的输出，请帮助。

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

我的第一个脚本

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

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>

正如我所说，我需要所有内容才能使代码仅存在于一页上。

Answer 1

在这种情况下，JQuery 有助于加快您的开发过程，但如果您希望这种方法与纯 JS 一起使用，这可以帮助您

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

您应该为要捕获的每个输入/字段设置data-use="true" 属性。

在您的表单标签中，您应该替换 onsubmit="return convert(this); 而不是 onsubmit="return false"

希望对你有帮助。

这里是demo

Answer 2

你有一些语法错误 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;
}