Question

我需要添加在此表单上启用自动填充所需的JavaScript代码。每当选中该复选框时，代码应自动将值从Shipping Name和Shipping Zip复制到Billing Name和Billing Zip。如果未选中此复选框，则“结算名称”和“结算邮编”应为空白。这是HTML代码

  <!-- language: lang-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

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!

Answer 1

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

尝试这种方法。这是我项目的代码。

Answer 2

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 3

/ *这是完整的Javascript函数。在编码中使用它。

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 个答案: