使用 JavaScript onchange 函数和复选框状态自动填充/清除 HTML 表单字段

Question

I need to add the JavaScript code needed to enable auto-fill on this form.我需要添加启用此表单自动填写所需的 JavaScript 代码。 Whenever the checkbox is checked, the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip.每当检查复选框时，代码应自动将值从运输名称和运输ZIP复制到帐单名称和计费zip中。 If the checkbox is unchecked, the Billing Name and Billing Zip should go blank.如果未选中该复选框，则账单名称和账单邮编应为空白。 Here is the HTML code:这是 HTML 代码：

 <form>
  <label for="shippingName">Name:</label>
  <input type="text" name="Name" id="shippingName" required>
  <br/>
  <label for="shippingzip">Zip code:</label>
  <input type="text" name="zip" id="shippingZip" pattern=[ 0-9]{5} required>
  <br/>
 <input type="checkbox" id="same" name="same" onchange="billingFunction()" />
  <label for="same">Is the Billing Information the Same?</label>
  <label for="billingName">Name:</label>
  <input type="text" name="Name" id="billingName" required>
  <br/>
  <label for="billingzip">Zip code:</label>
  <input type="text" name="zip" id="billingZip" pattern=[ 0-9]{5} required>
  <br/>
  <input type="submit" value="Verify" />
 </form>

Here is my JavaScript:这是我的 JavaScript：

function billingFunction() {
  if (document.getElementById("same").checked) {
    document.getElementById("billingName").value = document.getElementById("shippingName").value;
    document.getElementById("billingZip").value = document.getElementById("shippingZip").value;

  }
 else {
    document.getElementById("billingName").value = "";
    document.getElementById("billingZip").value = "";
  }
}

Any other ideas / such as jQuery would be appreciated!任何其他想法/如 jQuery 将不胜感激！

Answer 1

 function billingFunction() { if (document.getElementById("same").checked) { document.getElementById("billingName").value = document.getElementById("shippingName").value; document.getElementById("billingZip").value = document.getElementById("shippingZip").value; } else { document.getElementById("billingName").value = ""; document.getElementById("billingZip").value = ""; } }

 input { border: 1px solid black; } input:focus { background-color: #E6E6E6; } fieldset { margin-bottom: 4%; }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Shipping|Billing Data</title> <script src="js/script.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>JavaScript Homework</h1> <p>Add the JavaScript code needed to enable auto-complete on this form, Whenever the checkbox is checked. the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip, If the checkbox is unchecked. the Billing Name and Billing Zip should go blank:</p> <form> <fieldset> <legend>Shipping Information</legend> <label for="shippingName">Name:</label> <input type="text" name="shipName" id="shippingName" required> <br/> <label for="shippingzip">Zip code?</label> <input type="text" name="shipZip" id="shippingZip" pattern="[0-9]{5}" required> <br/> </fieldset> <input type="checkbox" id="same" name="same" onchange="billingFunction()" /> <label for="same">Is the Billing Information the Same:</label> <fieldset> <legend>Billing Information</legend> <label for="billingName">Name:</label> <input type="text" name="billName" id="billingName" required> <br/> <label for="billingzip">Zip code:</label> <input type="text" name="billZip" id="billingZip" pattern="[0-9]{5}" required> <br/> </fieldset> <input type="submit" value="Verify" /> </form> </body> </html>

Answer 2

<script>
 $('#change_password').click(function(){
 if($(this).prop("checked") == true){
    alert("checked");
  }
else if($(this).prop("checked") == false){
    alert("Checkbox is unchecked.");
  }
  });
</script>

Try this approach.试试这个方法。 It is a code from my project.这是我项目中的代码。

Answer 3

/*Here is the complete Javascript function. /*这是完整的 Javascript 函数。 use it in your coding.在你的编码中使用它。

function billingFunction() {
    if (document.getElementById('same').checked) {
        var shippingName = document.getElementById('shippingName').value;
        var shippingZip = document.getElementById('shippingZip').value;

        document.getElementById('billingName').value = shippingName;
        document.getElementById('billingZip').value = shippingZip;

    } else {
        document.getElementById('billingName').value = "";
        document.getElementById('billingZip').value = "";
    }
}

使用 JavaScript onchange 函数和复选框状态自动填充/清除 HTML 表单字段

问题描述

3 个解决方案

解决方案1
1 2016-05-14 07:17:08

解决方案2
0 2016-01-01 01:03:45

解决方案3
0 2020-10-15 11:25:32

使用 JavaScript onchange 函数和复选框状态自动填充/清除 HTML 表单字段

问题描述

3 个解决方案

解决方案1 1 2016-05-14 07:17:08

解决方案2 0 2016-01-01 01:03:45

解决方案3 0 2020-10-15 11:25:32

解决方案1
1 2016-05-14 07:17:08

解决方案2
0 2016-01-01 01:03:45

解决方案3
0 2020-10-15 11:25:32