javascript - 从表单数组中获取表单内容

Question

我目前在我的 html 中使用 twig 制作了一个基于数组的“表单”列表。很难解释我正在尝试做什么，但如果您查看下面的代码，应该会很清楚。根据用户按下的支付按钮，我想得到相应的金额。

编辑:我遇到的问题是我无法根据用户单击的支付按钮访问​​输入 (.payAmountForm)。我尝试在我的 js 文件中使用选择器，但是我收到了底部提供的错误。

html表格

  <table>
    <thead>
      <tr class="rowTable header">
        <th class="cell">Date Submitted</th>
        <th class="cell">Report Name</th>
        <th class="cell">Details</th>
        <th class="cell">Message</th>
        <th class="cell">Amount</th>
        <th class="cell">Pay</th>
      </tr>
    </thead>
    <tbody>
      {% for report in submittedReports.result %}
      <tr class="rowTable">
        <td class="cell">{{report.dateSubmitted}}</td>
        <td class="cell">{{report.errorName}}</td>
        <td class="cell">
          <button type="button" class="displayDetailsModal detailsButton" data-toggle="modal"
          data-target="#detailsModal" data-whatever="@getbootstrap"
          data-ID={{report.reportID}}>
            View
          </button>
        </td>
        <td class="cell">
          <button type="button" class="messageButton" data-toggle="modal"
              data-target="#messageModal" data-whatever="@getbootstrap"
              data-ID={{report.reportID}}>
            Edit
          </button>
        </td>
        <td class="cell">
          <div class="input-group payInput">
            <span class="input-group-addon">$</span>
            <input type ="text" class="form-control payAmountForm" maxlength="11" data-id={{report.reportID}}>
          </div>
        </td>
        <td class="cell">
            <button data-ID={{report.reportID}} class="btn btn-success payButton" type="button" value="Pay">Pay</button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table> 

js文件内容

$(document).ready(function () {


    $(".payButton").click(function(event) { 

        payInfo = [];

        event.preventDefault();

        alert($(this).attr("data-ID"));

        payInfo.amount = $(".payAmountForm [data-ID]=" + $(this).attr("data-ID")).val();


    });

});

我正在使用 jquery。我得到的错误是

Uncaught Error: Syntax error, unrecognized expression: .payAmountForm [data-ID]=1

Answer 1

html 中缺少 data-id 属性的引号；选择器也不正确，当前选择 .payAmountForm 的子元素；尝试删除 class 选择器和属性选择器之间的空格；在 html

中为 data-id 属性添加引号

属性选择器也缺少右括号

<input type ="text" class="form-control payAmountForm" maxlength="11" data-id="{{report.reportID}}">

payInfo 是一个 Array at js at Question，不是一个 Object ；尝试使用 Array.prototype.push()

payInfo.push(
  $(".payAmountForm[data-id='" + $(this).attr("data-ID") +"']").val()
);

或者创建一个对象数组

payInfo.push(
  {"amount": $(".payAmountForm[data-id='" + $(this).attr("data-ID") +"']").val()
  }
);

---

$(document).ready(function() {


  $(".payButton").click(function(event) {

    payInfo = [];

    event.preventDefault();

    // alert($(this).attr("data-ID"));

    payInfo.push({
      "amount": $(".payAmountForm[data-id='" + $(this).attr("data-ID") 
                  + "']").val()
    });

    console.log($(".payAmountForm[data-id='" + $(this).attr("data-ID") + "']")
                , $(this).attr("data-ID")
                , payInfo);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control payAmountForm" maxlength="11" data-id="{{report.reportID}}" value="">
<button data-ID="{{report.reportID}}" class="btn btn-success payButton" type="button" value="Pay">Pay</button>