Question

我目前在html中使用twig基于数组创建“表单”列表。有点难以解释我想要做什么，但是如果你看下面我的代码，应该很清楚。根据用户按下的付款按钮，我想获得相应的金额。

编辑：我遇到的问题是我无法根据用户点击的付费按钮访问输入（.payAmountForm）。我尝试在我的js文件中使用选择器，但是我在底部提供了错误。

html table

  <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

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

的data-id属性周围添加引号

还缺少属性选择器

的右括号

html

<input type ="text" class="form-control payAmountForm" maxlength="11" data-id="{{report.reportID}}">在问题payInfo处是Array，而不是js;尝试使用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);
  });

});

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

1 个答案: