How to get span element with no id which is inside a div with no id
Question
I have 2 span elements inside 2 div elements. Both span elements have no id and both div elements also have no id.
The 1st div has the 1st input element with an id (id_name) and then have the 1st span element after it.
The 2nd div has the 2nd input element with an id (id_password) and then have the 2nd span element after it.
I have a javascript function which I call on submit of form. Inside that function I can get the 1st input element in a variable element_id_name and the 2nd input element in a variable element_id_password . Now how can I get the 1st span element which comes after 1st input element? And how can I get the 2nd span element which comes after 2nd input element? Since I dont have id for span elements, I cannot use document.getElementById() . Is there a way to get 1st span element by reference to 1st input element?
This is my code:
<html>
<head>
<meta charset="ISO-8859-1">
<title>test</title>
<style type="text/css">
.error_noshow{
display: none;
}
.error_show{
color: red;
}
</style>
<script type="text/javascript">
function validate() {
var element_id_name = document.getElementById("id_name");
var element_id_password = document.getElementById("id_password");
return false;
}
</script>
</head>
<body>
<form id="form_login" method="post" action="" onsubmit="validate();">
<div>
<label for="id_name">User Name:</label>
<input type="text" id="id_name" name="txt_user_name">
<span class="error_noshow">Required field</span>
</div>
<div>
<label for="id_password">Password:</label>
<input type="password" id="id_password" name="txt_password">
<span class="error_noshow">Required field</span>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
Thank you for reading my question.
4 answers
solution1
1 2015-03-04 23:34:23
var spans = document.getElementsByTagName('span');
span[0] is the first span, span[1] is the second span. However it's not the preferred way to do this. Use jQuery to make it easier or add an id or classname
solution2
1 ACCPTED 2015-03-05 00:10:17
To access next span element you can use nextElementSibling property.
<script type="text/javascript">
function validate() {
var element_id_name = document.getElementById("id_name");
var element_id_password = document.getElementById("id_password");
var firstSpan=element_id_name.nextElementSibling;
return false;
}
</script>
But keep in mind that nextElementSibling not working in all version of browsers so you can simulate this using nextSibling http://www.w3schools.com/dom/prop_node_nextsibling.asp ;
solution3
0 2015-03-04 23:33:29
You can use querySelector to find the elements by their attributes.
function validate() { var element_id_name = document.querySelector("[name=txt_user_name]"); var element_id_password = document.querySelector("[name=txt_password]"); console.log(element_id_name, element_id_password); return false; }
.error_noshow{ display: none; } .error_show{ color: red; }
<form id="form_login" method="post" action="" onsubmit="validate();"> <div> <label for="id_name">User Name:</label> <input type="text" id="id_name" name="txt_user_name"> <span class="error_noshow">Required field</span> </div> <div> <label for="id_password">Password:</label> <input type="password" id="id_password" name="txt_password"> <span class="error_noshow">Required field</span> </div> <button type="submit">Submit</button> </form>
solution4
0 2015-03-04 23:43:05
I'm not answering the question because someone already did, but it seems like you want to check if the user typed something in both field, you could skip the javascript and use the HTML5 tag "required" like so
<input type="text" require /> .
The user will have an error message if he tries to submit. But keep in mind that old version of IE will skip this check.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.