如何使用javascript将一个字段输入值复制到其他字段输入

Question

想要在某人点击复选框时将某些字段从我的表单复制到另一个字段，并在取消选中时将其删除。

我是怎么做到的，但它不起作用。

<script>
function filladdress(f) {
  if(f.sameaddress.checked == true) {
    f.present_address1.value = f.perm_address1.value;
    f.present_address2.value = f.perm_address2.value;
    f.present_address3.value = f.perm_address3.value;
  }
}
</script>

这是形式去..

<form name="OnlineForm" method="post" onsubmit="return OnSubmitForm();" action="apply4.php">
<input name="present_address1" type="text" title="Maximum 35 Character allowed" class="textBoxDashed" id="present_address1" value="" size="43"  maxlength="35">
<input name="present_address2" type="text" title="Maximum 35 Character allowed" class="textBoxDashed" id="present_address2" value="" size="43" maxlength="35">
<input name="present_address3" title="Maximum 35 Character allowed" class="textBoxDashed" id="present_address3" value="" size="43" maxlength="35">

<input type="checkbox" name="sameaddress" onclick="filladdress(this.OnlineForm)">

<input name="perm_address1" type="text" title="Maximum 35 Character allowed" class="textBoxDashed" id="perm_address1" value="" size="43" maxlength="35">
<input name="perm_address2" type="text" title="Maximum 35 Character allowed" class="textBoxDashed" id="perm_address2" value="" size="43" maxlength="35">
<input name="perm_address3" type="text" title="Maximum 35 Character allowed" class="textBoxDashed" id="perm_address3" value="" size="43" maxlength="35">

Answer 1

这是一个很长的代码，因为我选择了每个字段，因此您可以更好地理解它，每次当用户单击checkbox时，它将variable中的值单独存储为每个input[name='present_address1']并替换为input[name='perm_address1']。

document.querySelector("input[type='checkbox']").onclick = function(){
	var val1 = document.querySelector("input[name='present_address1']").value;
 	var val2 = document.querySelector("input[name='present_address2']").value;
	var val3 = document.querySelector("input[name='present_address3']").value;
	if(this.checked){
 		document.querySelector("input[name='perm_address1']").value = val1;
 		document.querySelector("input[name='perm_address2']").value = val2;
 		document.querySelector("input[name='perm_address3']").value = val3;
  }
  else{
  	document.querySelector("input[name='perm_address1']").value = "";
 		document.querySelector("input[name='perm_address2']").value = "";
 		document.querySelector("input[name='perm_address3']").value = "";
  }
}

<form name="OnlineForm" method="post" onsubmit="return OnSubmitForm();" action="apply4.php">
  <input name="present_address1" type="text" title="Maximum 35 Character allowed" class="textBoxDashed" id="present_address1" value="" size="43" maxlength="35">
  <input name="present_address2" type="text" title="Maximum 35 Character allowed" class="textBoxDashed" id="present_address2" value="" size="43" maxlength="35">
  <input name="present_address3" title="Maximum 35 Character allowed" class="textBoxDashed" id="present_address3" value="" size="43" maxlength="35">

  <input type="checkbox" name="sameaddress">

  <input name="perm_address1" type="text" title="Maximum 35 Character allowed" class="textBoxDashed" id="perm_address1" value="" size="43" maxlength="35">
  <input name="perm_address2" type="text" title="Maximum 35 Character allowed" class="textBoxDashed" id="perm_address2" value="" size="43" maxlength="35">
  <input name="perm_address3" type="text" title="Maximum 35 Character allowed" class="textBoxDashed" id="perm_address3" value="" size="43" maxlength="35">

Answer 2

当复选框单击时，在html中使用document而不是this

你会得到this.OnlineForm未定义的传球

看到这里演示https://jsbin.com/subebaz/edit?html,js,output

并在复制功能中切换值赋值序列

Answer 3

尝试一下：

<script>
    function filladdress(f) {
        if(document.forms['f']['present_address1'].checked == true) {
            document.forms['f']['present_address1'].value = document.forms['f']['perm_address1'].value;
            document.forms['f']['present_address2'].value = document.forms['f']['perm_address2'].value;
            document.forms['f']['present_address3'].value = document.forms['f']['perm_address3'].value;
        }
    }
</script>