I can't seem to get my function to work. I am very sorry if this is a very simple error, I couldn't find the answer and, I am only just starting out with JS.
So, I am trying to make it so that when the order is submitted it locks all of the inputs (make them read only) how can I fix my code?
<!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:[email protected]?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>
I can't seem to get my function to work. I am very sorry if this is a very simple error, I couldn't find the answer and, I am only just starting out with JS.
So, I am trying to make it so that when the order is submitted it locks all of the inputs (make them read only) how can I fix my code?
<!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:[email protected]?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>
- 1 You need to keep the script tag after the elements are rendered. i.e before end of body tag. – Mr_Green Commented Apr 12, 2016 at 10:10
- 1 And more, you want "all" inputs. var X will bee an array. – Aeldred Commented Apr 12, 2016 at 10:10
- @Mr_Green I'll try it, thanks. – qwerty77asdf Commented Apr 12, 2016 at 10:10
- @Aeldred How do I do that? – qwerty77asdf Commented Apr 12, 2016 at 10:11
- @Mr_Green it still isn't working. – qwerty77asdf Commented Apr 12, 2016 at 10:12
3 Answers
Reset to default 5Try replacing
x.readonly = "readonly";
with
x.readOnly = true;
Notice that O of readOnly is caps now, and value is a boolean.
getElementsByTagName returns a NodeList rather than a Node. You need to iterate them
function hide ()
{
var x = document.getElementsByTagName("input");
for ( var counter = 0; counter < x.length; counter++)
{
x.item(counter).readonly = "readonly";
}
}
Get all input tags and set attribute..working...
function hide () {
var x = document.getElementsByTagName("input");
for ( var counter = 0; counter < x.length; counter++)
{
x[counter].setAttribute("readonly","true");
}
}
Instead of read only try for disable.
document.getElementById("InputBoxID").disabled = true;
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745043689a4607965.html
评论列表（0条）