How to Get an Input Value Inside a List in Jquery
11 months ago
admin
Jquery
In this lesson, we will see how to get an input value inside a list in jquery, some times when working with a list and you add a form input inside you need to get the value of the input using jquery, so let's see how we can do that.
Get the input value
So to get the input value inside a list group item using jquery add the code below.
<!DOCTYPE html>
<html>
<head>
<title>Get value inside list in jquery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h1>Get value inside list in jquery</h1>
<ul class="list-group">
<li class="list-group-item">
<input type="text" name="name" class="form-control" placeholder="Name">
<button class="btn btn-sm- btn-primary my-2" id="button">submit</button>
</li>
</ul>
<!-- Jquery JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script>
$(document).ready(function(){
$('#button').on('click', function() {
const val = $('.list-group li input').val();
alert(val);
});
});
</script>
</body>
</html>