Получение одного набора из нескольких пустых значений текстового поля в jquery - PullRequest
Новая
       1

Получение одного набора из нескольких пустых значений текстового поля в jquery

1 голос
/ 26 марта 2020

Я хочу получить несколько значений текстового поля из таблицы внутри объекта У меня есть пять текстовых полей

Из приведенного ниже кода, если я ввел значение только в одном текстовом поле, я получаю только два значения, а не пять значений ,

Один введенный текст, а остальные четыре значения текстового поля объединяются в одно, показывая пустую строку. Я проверил в консоли, которая показывает первое значение текстового поля и другие четыре значения текстового поля, объединенные в виде пустой строки.

Что я должен сделать, чтобы получить отдельные пять значений, также я хочу отправить эти данные в контроллер с 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>

1 Ответ

1 голос
/ 26 марта 2020 

$("#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 как массив, а pu sh все значения текстового поля в массиве и передайте в данные. Вы получите пять введенных значений на вашем контроллере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...