你能帮我设置一下,这样它就不会检查隐藏的必填输入框是否已填写吗?
我有一个带有取货和送货单选按钮的订单系统。 当他们选择取件时,我让它隐藏了地址、城市、州和邮政编码的输入框。 交付时需要这些盒子。因为它们是必需的,所以即使框被隐藏,它仍然会检查框是否已填充。
我这里的脚本函数可以隐藏输入框,但它不会让我继续前进,因为它仍在检查输入框是否已填充。
< script >
function showFunctionDelivery() {
var x = document.getElementById("deliveryStuff");
var y = document.getElementById("pickupStuff");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "block";
}
}
function showFunctionPickup() {
var x = document.getElementById("deliveryStuff");
var y = document.getElementById("pickupStuff");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
} <
/script> <
script src = "assets/js/script.js" > < /script> < /
body >
<body>
<form action="/shipping" method="POST">
<div class="container">
<h1>Delivery/Pick Up</h1>
<hr>
<input onchange="showFunctionDelivery()" type="radio" class="form-group" id="delivery" name="delivery" checked> Delivery  
<input onchange="showFunctionPickup()" type="radio" class="form-group" id="pickup" name="delivery"> Pick Up  
<br>
<!---Needed for order name, date time.-->
<div class="row" id="pickupStuff">
<div class="col-sm-3">
Name: ex. John Smith
<input required type="text" pattern="\D+" id="name" class="form-control" value="" name="name">
</div>
<div class="col-sm-3">
Desired Date:
<input required type="date" id="date" class="form-control" name="date">
</div>
<div class="col-sm-3" id="time">
Desired Time:
<select class="form-control">
<option value="7am">7am</option>
<option value="8am">8am</option>
<option value="9am">9am</option>
<option value="10am">10am</option>
<option value="11am">11am</option>
<option value="12pm">12pm</option>
<option value="1pm">1pm</option>
<option value="2pm">2pm</option>
<option value="3pm">3pm</option>
<option value="4pm">4pm</option>
</select>
</div>
</div>
</div>
<br>
<!--delivery stuff-->
<div class="container" id="deliveryStuff">
<div class="row">
<div class="col-sm-3" id="deliveryOp">
Address: ex. 12345 Plain Dr
<input required type="text" id="address" pattern="\d+\s\D+" class="form-control" value="" name="address">
</div>
<div class="col-sm-3" id="deliveryOp">
City: ex. Austin
<input required type="text" id="city" pattern="\D+" class="form-control" value="" name="city">
</div>
<div class="col-sm-3" id="deliveryOp">
State:
<select required class="form-control" id="state" name="statename">
<option value="">Please Select One</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Etc.</option>
</select>
</div>
<div class="col-sm-3" id="deliveryOp">
Zip Code: ex. 12345
<input required id="zip" type="text" pattern="\d{5}" class="form-control" value="" name="zipcode">
</div>
</div>
</div><br><br>
<script>
let d = document.getElementById("delivery"),
p = document.getElementById("pickup");
</script>
<footer class="container-fluid text-center">
<a href="/billing"><button type="submit" class="btn btn-danger">Next</button></a>
</footer>
</form>
</body>
最佳答案
在 showFunctionPickUp()
方法中将地址、城市、州和邮政编码的必需属性设置为 false。
function showFunctionPickup() {
var x = document.getElementById("deliveryStuff");
var y = document.getElementById("pickupStuff");
var address = document.getElementById("address");
var city = document.getElementById("city");
var state = document.getElementById("state");
var zip = document.getElementById("zip");
x.style.display = "none";
address.required = false;
city.required = false;
state.required = false;
zip.required = false;
}
关于javascript - 使用 JavaScript 禁用 HTML 所需输入 onchange 单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49862350/