页面有2个表单，单独的输出冲突

时间：2017-08-30 22:26:22

标签： javascript html

我之前问过，但我得到的答案没有解决问题。我正在尝试使用至少2个表单的页面，其中输入的文本出现在输出textarea上。我希望他们彼此独立运作。我试图给每个人一个单独的ID，并给输出testareas单独的ID。但仍然没有奏效。请帮忙。

<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()">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="convert()">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>
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 = output2;
}

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

</script>

我错过了什么？

1 个答案:

答案 0 :(得分：0)

最终，问题在于您有两个共享具有相同名称的函数的脚本。但是使用jQuery充分发挥其潜力，可以简化逻辑。

（1）为方便起见，在按钮上添加id和type="button"：id即可快速区分按钮，type="button"是为了防止表单提交默认情况下。

<button type="button" id="combine1">Combine</button>

<button type="button" id="combine2">Combine</button>

（2）将onclick事件处理程序附加到按钮

$('#combine1').click(function() {
    // get current form
    var button = $(this),
        form = button.closest('form');
    // get field values within current form
    var name = form.find("[name=name]").val(),
        phone = form.find("[name=phone]").val(),
        question1 = form.find("[name=question1]").val(),
        question2 = form.find("[name=question2]").val(),
        notes = form.find("[name=notes]").val(),
        issue = form.find("[name=issue]").val(),
        action = form.find("[name=action]").val();

    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 + " ";

    form.find("[name=output]").val(output);
});

// same idea as previous one
$('#combine2').click(function() {
    var button = $(this),
        form = button.closest('form');

    var name = form.find("[name=name]").val(),
        phone = form.find("[name=phone]").val(),
        yesno = form.find("[name=yesno]").val(),
        selfserve = form.find("[name=selfserve]").val(),
        problem = form.find("[name=problem]").val(),
        issue = form.find("[name=issue]").val(),
        action = form.find("[name=action]").val();

    var output = "";
        output += "Name: " + name + "\n";
        output += "Phone: " + phone + "\n";
        output += "Yes No?: " + yesno + "\n";
        output += "Self Serve?: " + selfserve + "\n\n";
        output += "Problem: " + problem + "\n\n";
        output += "Issue: " + issue + "\n\n";
        output += "Action: " + action + " ";

    form.find("[name=output]").val(output);
});

其他说明

document.getElementById()与jQuery完全相同，只需使用$(selector)即可。 selector有许多变体，例如#id，.class，[name=name]等

此外，您可以添加selector context来查找元素中的元素，即$("[name=name]", form).val()与form.find("[name=name]").val()相同。

为了便于说明，我删除了表单中的ID，并且某些字段在两种表单中共享相同的名称。我通过使用选择器上下文来区分字段的方式。

<强>演示 

$(function() {
  $('#combine1').click(function() {
    console.clear();
    console.log(this.id);
 
    var button = $(this),
      form = button.closest('form');
      
    var name = form.find("[name=name]").val(),
      phone = form.find("[name=phone]").val(),
      question1 = form.find("[name=question1]").val(),
      question2 = form.find("[name=question2]").val(),
      notes = form.find("[name=notes]").val(),
      issue = form.find("[name=issue]").val(),
      action = form.find("[name=action]").val();

    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 + " ";

    form.find("[name=output]").val(output);
  });


  $('#combine2').click(function() {
    console.clear();
    console.log(this.id);
    
    var button = $(this),
      form = button.closest('form');

    var name = form.find("[name=name]").val(),
      phone = form.find("[name=phone]").val(),
      yesno = form.find("[name=yesno]").val(),
      selfserve = form.find("[name=selfserve]").val(),
      problem = form.find("[name=problem]").val(),
      issue = form.find("[name=issue]").val(),
      action = form.find("[name=action]").val();

    var output = "";
    output += "Name: " + name + "\n";
    output += "Phone: " + phone + "\n";
    output += "Yes No?: " + yesno + "\n";
    output += "Self Serve?: " + selfserve + "\n\n";
    output += "Problem: " + problem + "\n\n";
    output += "Issue: " + issue + "\n\n";
    output += "Action: " + action + " ";

    form.find("[name=output]").val(output);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FORM 1 -->
<form name="Form1" action="">
  <b><font color="#2C3E60">Name:</font></b><br>
  <input type="text" name="name" placeholder="Name"><br>
  <b><font color="#2C3E60">Phone number:</font></b><br>
  <input type="text" name="phone" placeholder="Phone number"><br>
  <b><font color="#2C3E60">Yes/No?:</font></b> <br>
  <select type="drop" name="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">
        <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" placeholder="Problem" cols="70" rows="3"></textarea>
  <br>
  <b><font color="#2C3E60">Issue:</font></b><br>
  <textarea type="textarea" name="issue" placeholder="Issue" cols="70" rows="6"></textarea>
  <br>
  <b><font color="#2C3E60">Action:</font></b><br>
  <textarea type="textarea" name="action" placeholder="Action" cols="70" rows="10"></textarea>
  <br>
  <textarea type="textarea" name="output" onclick="this.focus();this.select()" cols="70" rows="25" placeholder="Output"></textarea>
  <br>
  <div class="btn-group">
    <button type="button" 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 2 -->
<form name="Form2" action="">
  <b><font color="#2C3E60">Name:</font></b><br>
  <input type="text" name="name" placeholder="Name"><br>
  <b><font color="#2C3E60">Phone Number:</font></b><br>
  <input type="text" name="phone" placeholder="Corrent phone number"><br>
  <b><font color="#2C3E60">Y or N:</font></b> <br>
  <select name="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 name="selfserve">
        <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" placeholder="Problem" cols="70" rows="3">               </textarea>
  <br>
  <b><font color="#2C3E60">Issue:</font></b><br>
  <textarea type="textarea" name="issue" placeholder="Issue" cols="70" rows="6">                   </textarea>
  <br>
  <b><font color="#2C3E60">Action:</font></b><br>
  <textarea type="textarea" name="action" placeholder="Action" cols="70" rows="10">     </textarea>
  <br>
  <textarea type="textarea" name="output" onclick="this.focus();this.select()" cols="70" rows="25" placeholder="Output"></textarea>
  <br>
  <div class="btn-group">
    <button type="button" id="combine2">Combine</button> <br><br>
  </div>
  <div class="btn-group">
    <button type="reset" value="Reset form">Reset form</button> <br><br>
  </div>
</form>

相关问题
最新问题