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

Uh, if you are looking for answers, you should at least try to describe the problem. — Johannes Jander
– Johannes Jander, Commented Dec 11, 2015 at 8:03
the "=1" goes inside the [] => $(".payAmountForm [data-ID=" + $(this).attr("data-ID") + "]" ) — Zibellino
– Zibellino, Commented Dec 11, 2015 at 8:06
@JohannesJander I added another description of what is going on, sorry for not being more clear — Danny
– Danny, Commented Dec 11, 2015 at 8:06

guest271314 · Accepted Answer · 2015-12-11 08:32:15Z

2

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>

edited Dec 11, 2015 at 8:32

answered Dec 11, 2015 at 7:54

guest271314

1

Sign up to request clarification or add additional context in comments.

3 Comments

Danny Over a year ago

I added the error I am getting which is causing the problem. The solution you provided doesnt work.

guest271314 Over a year ago

Missing quotes around data-id attribute, also selector is incorrect

Danny Over a year ago

First part of your solution helped me very much. The space between was the problem

Collectives™ on Stack Overflow

Get form contents from array of forms

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related