I want to get multiple textbox values from a table inside a object I have five textboxes
From the code below if I have entered value inside only one textbox, I am getting only two values, not five values.
One is entered text and other four textbox values are combined as one showing empty string. I have checked in the console which is showing first textbox value and other four textbox value combined as empty string.
What should I do to get separate five values also I want to send this data to controller with ajax. How can I achieve that?
$("#list input[type='text']").on("change", function() {
var obj = {};
$("#list :input").each(function(i, value) {
obj = value.value;
console.log(obj);
});
var data = {
"filterColumn": obj
}
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "@Url.Action("TableData","Home")",
data: JSON.stringify(data),
dataType: "json",
success: function(response) {
console.log("success");
},
error: function(response) {
//
}
});
});
<table id="list">
<tr role="row">
<th><input type="text" class="form-control"></th>
<th><input type="text" class="form-control"></th>
<th><input type="text" class="form-control"></th>
<th><input type="text" class="form-control"></th>
<th><input type="text" class="form-control"></th>
</tr>
</table>
$("#list input[type='text']").on("change", function() {
var obj = [];
$("#list :input").each(function(i, value) {
obj.push(value.value);
console.log(obj);
});
var data = {
"filterColumn": obj
}
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "http://example.com",
data: JSON.stringify(data),
dataType: "json",
success: function(response) {
console.log("success");
},
error: function(response) {
//
}
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<table id="list">
<tr role="row">
<th><input type="text" class="form-control"></th>
<th><input type="text" class="form-control"></th>
<th><input type="text" class="form-control"></th>
<th><input type="text" class="form-control"></th>
<th><input type="text" class="form-control"></th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>Just Declare obj as an array and push all the values of textbox in array and pass into data. You will get entered five values on your controller.