Javascript Get the Values of Input Array Elements
Hello devs, today I'll show you how to get the values of input array elements in a pure javascript way. Sometimes we face some difficulties to handle with array elements. And that's why my today's tutorial is. So, let's get started.
Get the Values of Input Array Elements
For getting the values of input array elements we'll use the javascript document.getElementsByName(). Let's see the below code snippets.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Input Array Values - shouts.dev</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<h3 class="text-center" id="mv">Input Array Elements</h3>
<form class="" action="index.html" method="post">
<input class="form-control" type="text" name="array[]" value="" /><br>
<input class="form-control" type="text" name="array[]" value="" /><br>
<input class="form-control" type="text" name="array[]" value="" /><br>
<input class="form-control" type="text" name="array[]" value="" /><br>
<input class="form-control" type="text" name="array[]" value="" /><br>
<button class="btn btn-primary" type="button" name="button" onclick="ns()">
Submit
</button>
</form>
</div>
</div>
</div>
<br>
<p class="text-center" id="var"></p>
<script type="text/javascript">
var v = "The respective values are :<br>";
function ns() {
var input = document.getElementsByName('array[]');
for (var i = 0; i < input.length; i++) {
var p = input[i];
v = v + "array[" + i + "].value= "
+ p.value + "<br>";
}
document.getElementById("var").innerHTML = v;
document.getElementById("mv").innerHTML = "Output";
}
</script>
</body>
</html>
Which will produce the below output.
Here what actually we do is, firstly we'll get all the input arrays element using document.getElementsByName() and then we'll iterate this field using for loop. Then we'll assign all the values in variable called "p". And finally, we'll output these values into our page.
That's it for today. Hope you've enjoyed this tutorial. Catch me in the comment section if anything goes wrong. Thanks for reading.
