Michael LB
Reputation: 2722
Why doesn't this jQuery 'closest' code work?
When I click the 'Generate' button I'd like the #payment_reference field value to be generated as per the code. I think the code makes it pretty much clear what I want it to do but for some reason it won't work :(
I've added an alert for testing purposes but it just outputs undefined
$( document ).ready(function() {
// generate payment reference
$( "#generate_payment_reference" ).click(function() {
$( ".amount_received" ).each(function( index ) {
var thisAmount = parseFloat($(this).val());
var paymentRef = '';
if (thisAmount > 0) {
paymentRef += $(this).closest(".invoice_reference").val();
alert($(this).closest(".invoice_reference").val());
}
$('#payment_reference').val(paymentRef);
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<fieldset>
<legend>Client Details</legend>
<table class="nobord">
<tr>
<td>Type:</td>
<td>Landlord </td>
</tr>
<tr>
<td>Name:</td>
<td>Mr XXX</td>
</tr>
<tr>
<td>Client Bank Account Balance:</td>
<td>£387.68</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Outstanding Invoice Details</legend>
<table class="solid" style="margin:5px;">
<tr>
<th>Invoice #</th>
<th>Date</th>
<th>Due Date</th>
<th>Invoice Total</th>
<th>Amount Paid</th>
<th>Amount Due</th>
<th>Amount Received (£)</th>
</tr>
<tr>
<td><a href="view_invoice.php?invoice_id=496" target="_blank">496</a>
<input type="text" class="invoice_reference" value="496">
</td>
<td>14/01/16</td>
<td>14/01/16</td>
<td>£25.20</td>
<td>£0.00</td>
<td>£25.20
<input type="hidden" name="amount_outstanding[]" value="25.20">
</td>
<td>
<input type="number" name="amount_received[]" class="amount_received" value="0.00" max="25.20" required>
<button class="pay_in_full" type="button">Pay in Full</button>
<input type="hidden" name="invoice_id[]" value="496">
<input type="hidden" name="invoice_tenancy_id[]" value="40">
<input type="hidden" name="invoice_property_id[]" value="119">
</td>
</tr>
<tr>
<td><a href="view_invoice.php?invoice_id=497" target="_blank">497</a>
<input type="text" class="invoice_reference" value="497">
</td>
<td>14/01/16</td>
<td>14/01/16</td>
<td>£25.20</td>
<td>£0.00</td>
<td>£25.20
<input type="hidden" name="amount_outstanding[]" value="25.20">
</td>
<td>
<input type="number" name="amount_received[]" class="amount_received" value="0.00" max="25.20" required>
<button class="pay_in_full" type="button">Pay in Full</button>
<input type="hidden" name="invoice_id[]" value="497">
<input type="hidden" name="invoice_tenancy_id[]" value="40">
<input type="hidden" name="invoice_property_id[]" value="119">
</td>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<table class="nobord">
<tr>
<td>
<label for="invoice_payment_date">Date:</label>
</td>
<td>
<input type="date" id="invoice_payment_date" name="invoice_payment_date" class="datepicker2months" ondblclick="this.value='2016-01-14';" readonly required>
</td>
</tr>
<tr>
<td>
<label for="total_amount_received">Total Amount Received (£):</label>
</td>
<td>
<input type="number" id="total_amount_received" name="total_amount_received" readonly required>
<input type="hidden" id="client_bank_account_balance" name="client_bank_account_balance" value="387.68" required>
</td>
</tr>
<tr>
<td>
<label for="payment_reference">Payment Reference:</label>
</td>
<td>
<input type="text" id="payment_reference" readonly>
<button id="generate_payment_reference" type="button">Generate</button>
</td>
</tr>
<tr>
<td>
<label for="invoice_payment_use_balance">Pay from Client Bank Account Balance:</label>
</td>
<td>
<select id="invoice_payment_use_balance" name="invoice_payment_use_balance" required>
<option value="">Please Select</option>
<option value="0">No</option>
<option value="1" selected>Yes</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="invoice_payment_method">Method:</label>
</td>
<td>
<select id="invoice_payment_method" name="invoice_payment_method" required>
<option value="">Please Select</option>
<option value="2" selected>Bank Transfer</option>
<option value="1">Cash</option>
<option value="3">Cheque</option>
<option value="4">Credit Card</option>
<option value="5">Debit Card</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="invoice_payment_notes">Notes:</label>
</td>
<td>
<textarea id="invoice_payment_notes" name="invoice_payment_notes" rows="6" cols="40"></textarea>
</td>
</tr>
</table>
</fieldset>Upvotes: 3
Views: 274
Answers (2)
guest271314
Reputation: 1
If $(".amount_received").length is equal to $(".invoice_reference").length, try using .eq() with parameter index; moving $('#payment_reference').val(paymentRef); outside of .each() to prevnt value from being overwritten. Note, duplicate closing </td>s at html.
Note also, not certain is expected result is concatenated string or addition of values at paymentRef variable ?
$( document ).ready(function() {
// generate payment reference
$( "#generate_payment_reference" ).click(function() {
var paymentRef = "";
$( ".amount_received" ).each(function( index ) {
var thisAmount = parseFloat($(this).val());
//var paymentRef = '';
if (thisAmount > 0) {
paymentRef += $(".invoice_reference").eq(index).val();
}
});
$('#payment_reference').val(paymentRef);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
</script>
<fieldset>
<legend>Client Details</legend>
<table class="nobord"><tr>
<td>Type:</td>
<td>Landlord </td>
</tr><tr>
<td>Name:</td>
<td>Mr XXX</td>
</tr><tr>
<td>Client Bank Account Balance:</td>
<td>£387.68</td>
</tr></table>
</fieldset><fieldset>
<legend>Outstanding Invoice Details</legend><table class="solid" style="margin:5px;"><tr>
<th>Invoice #</th>
<th>Date</th>
<th>Due Date</th>
<th>Invoice Total</th>
<th>Amount Paid</th>
<th>Amount Due</th>
<th>Amount Received (£)</th>
</tr><tr>
<td><a href="view_invoice.php?invoice_id=496" target="_blank">496</a>
<input type="text" class="invoice_reference" value="496">
</td>
<td>14/01/16</td>
<td>14/01/16</td>
<td>£25.20</td>
<td>£0.00</td>
<td>£25.20
<input type="hidden" name="amount_outstanding[]" value="25.20">
</td>
<td>
<input type="number" name="amount_received[]" class="amount_received" value="0.00" max="25.20" required> <button class="pay_in_full" type="button">Pay in Full</button>
<input type="hidden" name="invoice_id[]" value="496">
<input type="hidden" name="invoice_tenancy_id[]" value="40">
<input type="hidden" name="invoice_property_id[]" value="119"></td>
</tr>
<tr>
<td><a href="view_invoice.php?invoice_id=497" target="_blank">497</a>
<input type="text" class="invoice_reference" value="497">
</td>
<td>14/01/16</td>
<td>14/01/16</td>
<td>£25.20</td>
<td>£0.00</td>
<td>£25.20
<input type="hidden" name="amount_outstanding[]" value="25.20">
</td>
<td>
<input type="number" name="amount_received[]" class="amount_received" value="0.00" max="25.20" required> <button class="pay_in_full" type="button">Pay in Full</button>
<input type="hidden" name="invoice_id[]" value="497">
<input type="hidden" name="invoice_tenancy_id[]" value="40">
<input type="hidden" name="invoice_property_id[]" value="119"></td>
</tr></table></fieldset>
<fieldset>
<legend>Payment Details</legend>
<table class="nobord"><tr>
<td><label for="invoice_payment_date">Date:</label></td>
<td>
<input type="date" id="invoice_payment_date" name="invoice_payment_date" class="datepicker2months" ondblclick="this.value='2016-01-14';" readonly required>
</td>
</tr><tr>
<td><label for="total_amount_received">Total Amount Received (£):</label></td>
<td>
<input type="number" id="total_amount_received" name="total_amount_received" readonly required>
<input type="hidden" id="client_bank_account_balance" name="client_bank_account_balance" value="387.68" required>
</td>
</tr><tr>
<td><label for="payment_reference">Payment Reference:</label></td>
<td>
<input type="text" id="payment_reference" readonly> <button id="generate_payment_reference" type="button">Generate</button>
</td>
</tr><tr>
<td><label for="invoice_payment_use_balance">Pay from Client Bank Account Balance:</label></td>
<td><select id="invoice_payment_use_balance" name="invoice_payment_use_balance" required><option value="">Please Select</option><option value="0">No</option><option value="1" selected>Yes</option></select></td></tr><tr>
<td><label for="invoice_payment_method">Method:</label></td>
<td><select id="invoice_payment_method" name="invoice_payment_method" required><option value="">Please Select</option><option value="2" selected>Bank Transfer</option><option value="1">Cash</option><option value="3">Cheque</option><option value="4">Credit Card</option><option value="5">Debit Card</option></select></td></tr><tr>
<td><label for="invoice_payment_notes">Notes:</label></td>
<td><textarea id="invoice_payment_notes" name="invoice_payment_notes" rows="6" cols="40"></textarea></td></tr></table>
</fieldset>Upvotes: 2
James Donnelly
Reputation: 128791
This is because your .invoice_reference element is not an ancestor of your .amount_received element. Instead you can go up to the tr element and use find() to pull the .invoice_reference within that:
$(this).closest('tr').find(".invoice_reference").val()
Upvotes: 4
Related Questions
- Select2 doesn't work when embedded in a bootstrap modal
- Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?
- val() doesn't trigger change() in jQuery
- jQuery first child of "this"
- jQuery Validation -- Not validating
- How can I exclude $(this) from a jQuery selector?
- Label fires click function twice
- Why is the selection not extended when using `add()` in jQuery
- regular expression in jQuery selectors