0
私はすべてのユーザー請求書を一覧表示するテーブルを用意しています。各請求書には請求書を支払うための支払いボタンが含まれています。javascriptを使用して複数のIDを取得する
私は現在、各請求書を通過して各請求書を独自の行に表示するループを持っています。ユーザーが支払いボタンをクリックすると、保存されたカードまたは新しいカードを使用する選択ボックスが表示されますユーザが保存されたカードを選択すると、JavaScriptは保存されたカードを含む他の選択ボックスを表示し、新しいカードが選択されると他の入力フィールドが表示され、保存されたカードを選択すると表示/新しいカードは、テーブルの最初の行だけで動作します。他の行はそのJavaScriptで動作しません。JavaScriptは最初のIDを取得してそこで停止しているためです。ユーザーが各請求書に保存されたカードまたは新しいカードを選択したときに、すべてのIDを取得してコードを実行する場所にこれを正しく行うにはどうすればよいですか？
私は自分の正確な状況を示すためにJSFiddleを作成しました。誰かがそれを動作させる場所に変更できますか？とても感謝しております！ https://jsfiddle.net/s0fbrcw6/1/
payments.blade.php
@if($payments)
@foreach($payments as $payment)
<tr>
<td><a href="">${{number_format(($payment->price /100), 2, '.', ' ')}}</a></td>
<td>{{$payment->product_name}}</td>
<td>{{$payment->created_at->toFormattedDateString()}}</td>
<td>{{$payment->created_at->addMonth()->toFormattedDateString()}}</td>
<td>{{$payment->reoccurring}}</td>
<td>{{$payment->status}}</td>
@if($payment->status == "Paid")
@else
<td>
<div class="add-payment-container">
<button class="toggle-add-payment mdl-button mdl-js-button mdl-js-ripple-effect pull-right btn-info">
@if($payment->reoccurring == "Yes")
Subscribe
@else
Pay Here
@endif
</button>
<div class="add-payment">
</br>
<form action="{{'/users/payment'}}" method="post"
id="checkout-form">
<input type="text" name="price" class="hidden"
value="{{$payment->price}}">
<input type="text" name="productName" class="hidden"
value="{{$payment->product_name}}">
<input type="text" name="paymentID" class="hidden"
value="{{$payment->id}}">
<input type="text" name="reoccurring" class="hidden"
value="{{$payment->reoccurring}}">
<div class="row">
<div class="col-sm-4">
<div id="paymentMethodDiv"
class="form-group label-floating">
{!! Form::label('paymentMethod', 'Payment Method') !!}
</br>
{!! Form::select('paymentMethod', ['Saved Card'=>'Saved Card','New Card'=>'New Card'], null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'paymentMethod'])!!}
</div>
</div>
<div class="col-sm-4">
<div id="savedCardsDiv" class="form-group label-floating" style="display: none;">
{!! Form::label('card', 'Previous Cards') !!}
</br>
{!! Form::select('card', $cardLast4, null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'savedCards'])!!}
</div>
</div>
<div class="col-md-4">
<div id="cardHolderNameDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Holder
Name</label>
<input type="text" id="card-name"
class="form-control">
</div>
</div>
<div class="col-md-4">
<div id="cardNumberDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Number</label>
<input type="text" id="card-number"
class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div id="expirationMonthDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration
Month</label>
<input type="text" id="card-expiry-month"
class="form-control">
</div>
</div>
<div class="col-md-5">
<div id="expirationYearDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration Year</label>
<input type="text" id="card-expiry-year"
class="form-control">
</div>
</div>
<div class="col-md-2">
<div id="cvcDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">CVC</label>
<input type="text" id="card-cvc"
class="form-control">
</div>
</div>
</div>
{{csrf_field()}}
<button type="submit" class="btn btn-primary pull-right">Make
Payment
</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</td>
@endif
</tr>
<script>
var paymentMethodSelect = document.getElementById('paymentMethod');
paymentMethodSelect.onchange = function() {
if (paymentMethodSelect.value == 'Saved Card') {
document.getElementById("savedCardsDiv").style.display = "block";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
} else if (paymentMethodSelect.value == 'New Card') {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "block";
document.getElementById("cardNumberDiv").style.display = "block";
document.getElementById("expirationMonthDiv").style.display = "block";
document.getElementById("expirationYearDiv").style.display = "block";
document.getElementById("cvcDiv").style.display = "block";
} else {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
}
};
</script>
本当にまっすぐ進みます。ページ上でIDを複数回使用しようとしています。 IDはユニークです。代わりに 'querySelectorAll（）'でクラスを使用してください。 – Ohgodwhy
ありがとうございました！私はIDのこと、そして彼らがどのようにユニークであると考えられているのか、本当に良いことを知らなかった！では、正しいdivのセットを表示するためにクリックされた行のインデックス値を取得するにはどうすればよいですか？説明したり、例を見せたりできますか？ – rapid3642