Get form contents from array of forms

Question

I currently make a list of "forms" based on an array using twig in my html. It is kind of hard to explain what I am trying to do, but if you look at my code below it should be clear to see. Based on which pay button the user presses, I want to get the corresponding amount.

EDIT: The problem I am having is that I cannot access the input (.payAmountForm) based on which pay button the user clicked. I tried using the selector in my js file, however I get the error provided at the bottom.

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 file contents

$(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();


    });

});

I am using jquery. The error I am getting is

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

Answer 1

Missing quotes around data-id attribute at html; also selector is incorrect , currently selecting child element of .payAmountForm ; try removing space between class selector and attribute selector ; adding quotes around data-id attribute at html

Also missing closing brackets at attributes selector

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

payInfo is an Array at js at Question, not an Object ; try using Array.prototype.push()

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

or to create an array of objects

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>