0
나는 줄무늬를 사용하기위한 모달을 만들려고 노력하고 있지만 제출할 양식을 가져올 수 없습니다. 나는 왜 jQuery가 폼 ID를 참조하는 것 같은지 모르겠다. 내가 ID를 참조 할 때 나는 부모 div를 참조하고 양식을 참조하는 것으로 보이는 양식을 참조하는 .click을 사용할 때 코드가 인식하지 못하는 것 같습니다. 이것은 아직 특질 jQuery를인가, 아니면 바보 구현에게 I를jquery와 함께 제출하지 않는 모달의 양식
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#cardModal">Update card Details</button>
<!-- 'Update' Modal -->
<div id="cardModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<!-- Modal header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Update card details</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
<from action="/settings/card" method="post" id="updateCard" class="form-horizontal">
<div class="form-group has-feedback">
<label class="control-label col-sm-2">Card Number:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data-stripe="number" required>
<i class="form-control-feedback glyphicon glyphicon-pencil"></i>
</div>
</div>
<div class="form-group has-feedback">
<label class="control-label col-sm-2">Name on card:</label>
<div class=" col-sm-6">
<input type="text" class="form-control" data-stripe="name" required>
<i class="form-control-feedback glyphicon glyphicon-user"></i>
</div>
</div>
<div class="form-group has-feedback">
<label class="control-label col-sm-2">Expiry Date:</label>
<div class="col-sm-4">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" data-stripe="exp_month" placeholder="Month" required/>
input type="text" class="form-control" data-stripe="exp_year" placeholder="Year" required />
</div>
</div>
</div>
</div>
<div class="form-group has-feedback">
<label class="control-label col-sm-2">CVC:</label>
<div class=" col-sm-2">
<input type="password" class="form-control" data-stripe="cvc" required>
<i class="form-control-feedback glyphicon glyphicon-shopping-cart"></i>
</div>
</div>
<!-- Form Submit -->
<button type=submit id="submitP" class="btn btn-default btn-lg">Submit</button>
</from>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Exit</button>
</div>
</div>
</div>
에서 볼 수있는 바와 같이 이 -> #updateCard (양식) -> #submitP (제출) . $('#cardModal').on('click', 'updateCard') 같은 것을 사용하지 않으면 updateCard를 참조 할 수 없습니다. 그러나 사용자가 제출할 때 폼에 액세스하기 때문에 원하는 내용이 아닙니다. 내가
// Before the form submits
$('#updateCard').submit(function(event){
alert('submitted');
//Disable the button
$('#updateCard').find('.btn btn-default btn-lg').prop('disabled', true);
//Create a token for the user
Stripe.card.createToken($('#updateCard'), stripeResponseHandler);
// Prevent the form from being submitted:
return false;
});
function stripeResponseHandler(status, response) {
console.log('in response handler')
// Grab the form:
var $form = $('#cardModal updateCard');
//If there is an error
if (response.error) { // Problem!
console.log(response.error)
// Show the errors on the form:
$('<div id="paymentError" class="alert alert-danger">'+response.error.message+'</div>').insertBefore('#submit');
$('#updateCard').find('.btn btn-default btn-lg').prop("disabled", false); // Re-enable submission
} else {
// Token was created!
console.log('created');
// Get the token ID:
var token = response.id;
// Insert the token ID into the form so it gets submitted to the server:
$form.append($('<input type="hidden" name="stripeToken">').val(token));
// Submit the form:
$form.submit();
}
}