如何使用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

使用document ，而不是this在HTML時點擊復選框

您將通過this.OnlineForm獲得未定義的通行證

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

並在復制功能中切換您的值分配順序

Answer 2

這是一段很長的代碼，因為我選擇了每個字段，因此您可以更好地理解它，每次用戶單擊checkbox它都會將每個input[name='present_address1']的值分別存儲在variable ，並替換為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 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>