CODEWITHSUNDEEP
javascriptjqueryajaxasp.net-mvc-controller
shreyas35
shreyas35

Reputation: 175

Getting single bunch of multiple empty values of textbox in jquery

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>

Upvotes: 1

Views: 725

Answers (1)

Jaydip Shingala
Jaydip Shingala

Reputation: 429

$("#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.

Upvotes: 1

Related Questions