在 jquery 中获取文本框的多个空值

Question

我想从对象中的 table 获取多个文本框值我有五个文本框

从下面的代码中，如果我只在一个文本框中输入了值，我只会得到两个值，而不是五个值。

一个是输入文本，其他四个文本框值合并为一个显示空字符串。我已经检查了显示第一个文本框值和其他四个文本框值组合为空字符串的控制台。

我应该怎么做才能获得单独的五个值我也想用 ajax 将此数据发送到控制器。我怎样才能做到这一点？

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

Answer 1

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

只需将obj 声明为数组并将文本框的所有值压入数组并传递到数据中。您将在控制器上输入五个值。

在 jquery 中获取文本框的多个空值

Getting single bunch of multiple empty values of textbox in jquery

javascript

ajax

jquery

asp.net-mvc-controller