如何使用javascript

时间:2017-12-23 06:25:41

标签: javascript forms

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

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

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

3 个答案:

答案 0 :(得分:2)

当复选框点击

时,在html中使用document代替this

您将通过this.OnlineForm

获得未定义的传递

点击此处演示https://jsbin.com/subebaz/edit?html,js,output

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

答案 1 :(得分:1)

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

&#13;
&#13;
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 = "";
  }
}
&#13;
<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">
&#13;
&#13;
&#13;

答案 2 :(得分:0)

尝试一下:

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