Question

我似乎无法让我的功能发挥作用。我很抱歉，如果这是一个非常简单的错误，我找不到答案，我只是刚刚开始使用JS。

所以，我试图这样做，以便在提交订单时锁定所有输入（使它们只读）我如何修复我的代码？

<!doctype html>
<html>
<head>
<style>
a#nav0,a#nav1,a#nav2,a#nav3,a#nav4,a#nav5,a#nav6,a#nav7,a#nav8,a#nav9,a#nav10,a#nav11,a#nav12{color:blue; background-color:white;  font-size:30px}
</style>
<script>
function hide () {
    var x = document.getElementsByTagName("input");
    x.readonly = "readonly";
}
</script>
<title>Garden Gnomes - Order</title>
</head>
<body style="background-color:lightblue">
<center>
<a id="nav0"> | </a> <a href="home page.html" id="nav1"> Home </a> <a id="nav2"> | </a> <a href="about.html" id="nav3"> About us </a> <a id="nav4"> | </a> <a href="packages.html" id="nav5"> Packages </a> <a id="nav6"> | </a> <a href="prices.html" id="nav7"> Prices </a> <a id="nav8"> | </a> <a href="associates.html" id="nav9"> Associates </a> <a id="nav10"> | </a> <a href="order.html" id="nav11"> Order </a> <a id="nav12"> | </a>
</center>
<center>
<br>    
<br>
<form onsubmit="output.value='Submitted'" action="MAILTO:kyran.gostelow@techie.com?SUBJECT=Gardening order form" method="post" enctype="text/plain">
<legend> <font size="5"> Order a Package </font> </legend>
<br>
<br>
Name:
<input type="text" name="Name">
<br>
<br>
Package:
<select name="Package">
  <option> Lawn Mowal </option>
  <option> Property Cleanup </option>
  <option> Lawn Mowal + Property Cleanup </option>
  <option> Premium Property Cleanup </option>
  <option> Premium Property Upgrade </option>
</select>
<br>
<br>
Quoted Price: $<input type="number" name="Price">
<br>
<br>
Land (in meters squared): <input type="number" name="Land Size">m<sup>2</sup>
<br>
<br>
Email: <input type="email" name="Email">
<br>
<br>
Phone Number: <input type="number" name="Phone Number">
<br>
<br>
Address: <input type="text" name="Address">
<br>
<br>
<input type="submit" value="Submit order" onclick="hide ()">
<br>
<br>
<output id="output"> </output>
</form>
</center>
</body>
</html>

Answer 1

尝试替换

 x.readonly = "readonly";

与

 x.readOnly = true;

请注意O的{{1}}现在是上限，而值是布尔值。

readOnly返回NodeList而不是Node。你需要迭代它们

getElementsByTagName

Answer 2

获取所有输入标签并设置attribute..working ...

function hide () {
    var x = document.getElementsByTagName("input");
    for ( var counter = 0; counter < x.length; counter++)
    {
       x[counter].setAttribute("readonly","true");
    }

}

Answer 3

而不是只读尝试禁用。

document.getElementById("InputBoxID").disabled = true;

使用JS将输入设置为只读

3 个答案: