0
'.reqF'という名前のクラスが満たされていないときに警告ポップアップを表示し、 '.reqF'がすべて満たされたときにフォームからアクションページを送信します。各jQueryはこのフォームの最後の要素を取得します
これは
<form method="post" class="flat-p-form p-form-flat-extra5color4" action="/payment-verify-before-submit-multiple-students/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true" style="margin: 30px 0;" id="paymentForm" >
<input type="text" name="parentName" placeholder="Parent Name" required class="form-control reqF" value=""/>
<input type="text" name="payee_email" placeholder="Email" required class="form-control reqF" value=""/>
<input type="text" name="parentMobile" placeholder="Mobile No" required class="form-control reqF" value=""/>
<hr/>
<input type="text" id="sudentname" name="sudentname[]" placeholder="Student Name" required class="form-control reqF" />
<input type="text" id="admissionnmbr" name="admissionnmbr[]" placeholder="Admission No" class="form-control reqF" required />
<select id="budget" name="purpose[]" class="form-control reqF" required>
<option class="p-select-default" value="">--Type--</option>
<option value="SchoolFees">School Fees </option>
<option value="BoardingFees">Boarding Fees</option>
</select>
<input type="text" id="amount" name="amount[]" placeholder="Amount" required class="form-control reqF inputChangeVal" data-js-input-type="number" />
<select name="Grade[]" id="grade" class="form-control reqF" required>
<option class="p-select-default" value="" >-- Grade --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<div class="add_another_st"></div>
<hr/>
<button class="btn add_another_st_btn" style="float: right;">ADD ANOTHER STUDENT</button>
<hr/>
<div class="col-sm-3" style="font-size: 20px; border-bottom: 1px solid; padding-bottom: 10px;">
Total Amount
</div>
<div class="col-sm-12">
<input type="text" class="totalAmount" id="updatedTotalAmount" style="font-size: 20px; font-weight: bold; margin-bottom: 25px; text-align: right; border: 0;" readonly />
</div>
<button class="btn" class="confirm" type="submit" name="confirm" id="payBtn"><i class="fa fa-share-square-o"></i> Pay Now</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Proccess Payment</h4>
</div>
<div class="modal-body">
<p>
"Your about to make a online payment. Click 'Edit' to review the data before proceeding or click 'Continue' to confirm the details for payment."
</p>
<button class="btn btn-default" data-dismiss="modal">Edit</button>
<button class="btn btn-primary" id="continuebtn">Continue</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModalforErrorMsg" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">All required fields should be filled.</h4>
</div>
<div class="modal-body">
<p>
"Following fields should be filled for all the students you've added"
<ul>
<li>Student Name</li>
<li>Admission No.</li>
<li>Grade</li>
<li>Payment Type</li>
<li>Amount</li>
</ul>
</p>
<button class="btn btn-default" data-dismiss="modal">UPDATE</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
私の形であり、これは私のjQueryのです：
<script>
jQuery(document).ready(function() {
var wrapper = jQuery(".add_another_st"); //Fields wrapper section 3
var add_button = jQuery(".add_another_st_btn"); //Add button section 3
var add_sec_3 = '<div class="add_another_st"><hr/><div class="row"><div class="col-sm-12"><div class="form-group"><label for="sudentname" class="p-label-required">Student Name</label><span style="color: red"> Type the name as how it appears in the college registry</span><div class="input-group p-has-icon"><input type="text" id="sudentname" name="sudentname[]" placeholder="Student Name" class="form-control reqF" required aria-required="true" aria-invalid="false"/><span class="input-group-state"><span class="p-position"><span class="p-text"><span class="p-required-text"><i class="fa fa-star"></i></span></span></span></span><span class="p-field-cb"></span><span class="input-group-icon"><i class="fa fa-user"></i></span></div></div></div></div><div class="row"><div class="col-sm-6"><div class="form-group"><label for="name" class="p-label-required">Admission No</label><div class="input-group p-has-icon"><input type="text" id="admissionnmbr" name="admissionnmbr[]" placeholder="Admission No" class="form-control reqF" required /><span class="input-group-state"><span class="p-position"><span class="p-text"><span class="p-required-text"><i class="fa fa-star"></i></span></span></span></span><span class="p-field-cb"></span><span class="input-group-icon"><i class="fa fa-sort-numeric-asc"></i></span></div></div></div><div class="col-sm-6"><div class="form-group"><label for="budget" class="p-label-required">Payment Type</label><label class="input-group p-has-icon p-custom-arrow"><select id="budget" name="purpose[]" class="form-control reqF required"><option class="p-select-default" value="">--Select--</option><option value="SchoolFees">School Fees </option><option value="BoardingFees">Boarding Fees</option></select><span class="input-group-state"><span class="p-position"><span class="p-text"><span class="p-valid-text"><i class="fa fa-check"></i></span><span class="p-error-text"><i class="fa fa-times"></i></span></span></span></span><span class="p-field-cb"></span><span class="p-select-arrow"><i class="fa fa-caret-down"></i></span><span class="input-group-icon"><i class="fa fa-bullseye"></i></span></label></div></div></div><div class="row"><div class="col-sm-6"><div class="form-group"><label for="name" class="p-label-required">Amount <span style="color: red"> (Numbers only)</span></label><div class="input-group p-has-icon"><input type="text" id="amount" name="amount[]" placeholder="Amount" class="form-control inputChangeVal reqF" data-js-input-type="number" required /><span class="input-group-state"><span class="p-position"><span class="p-text"><span class="p-required-text"><i class="fa fa-star"></i></span></span></span></span><span class="p-field-cb"></span><span class="input-group-icon"><i class="fa fa-money"></i></span></div></div></div><div class="col-sm-6"><div class="form-group"><p>Grade</p><label class="input-group p-custom-arrow"><select name="Grade[]" class="form-control reqF" required><option class="p-select-default" value="">-- Select --</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option></select><span class="input-group-state"><span class="p-position"><span class="p-text"><span class="p-required-text"><i class="fa fa-star"></i></span></span></span></span><span class="p-field-cb"></span><span class="p-select-arrow"><i class="fa fa-caret-down"></i></span></label></div></div></div><a href="#" class="remove_field btn" style="margin-bottom: 15px;">-</a></div>';
// Add Brother begins
var max_fields = 10; //maximum input boxes allowed
var x = 1; //initlal text box count
//jQuery(add_button).click(function(e){ //on add input button click
//jQuery(add_button).click(function(e){
jQuery(add_button).on('click', function(e){
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
jQuery(wrapper).append(add_sec_3); //add section
jQuery('.add_another_st .add_another_st:last').hide();
jQuery('.add_another_st .add_another_st:last').show('fast');
}
});
jQuery(wrapper).on("click",".remove_field", function(e){ //user click on remove text
//e.preventDefault(); jQuery(this).parent('div').remove(); x--;
e.preventDefault();
jQuery(this).parent('div').slideUp(1000, function() {
jQuery(this).remove();
x--;
updateTotal();
});
});
// Add Brother Ends
function updateTotal()
{
var price = 0;
jQuery(".inputChangeVal").each(function(){
var t = parseFloat(jQuery(this).val(), 10);
price = price + t;
});
//var total = (price + 1) * 1.05;
var total = price.toFixed(2);
jQuery(".totalAmount").val(total);
console.log('updateTotal Runs');
}
jQuery(document).on("change, keyup", ".inputChangeVal", updateTotal);
jQuery(document).ready(function() {
jQuery('#payBtn').on('click', function(e) {
e.preventDefault();
var empty = false;
jQuery('.reqF').each(function() {
if (jQuery(this).val() === '') {
console.log('error');
empty = false;
} else empty = true;
});
if (empty == true)
jQuery('#myModal').modal('toggle');
else
//console.log('your error message');
jQuery('#myModalforErrorMsg').modal('toggle');
});
jQuery('#continuebtn').on('click', function() {
jQuery('form').submit();
});
var hiddenTot = jQuery('.reqFamount').val() ;
//alert (hiddenTot);
jQuery(".totalAmount").val(hiddenTot);
});
});
</script>
しかし、事はそれが最後の要素/グレードがいっぱいにされていない場合にのみ、#myModalforErrorMsgボックスを示しています。
私はgradeを記入し、私は他の去ったとき.reqFフィールドが空の後にのみフォームを送信することができています。..
理由です？
は、時にはそれがローカルホスト上で動作しますが、決してワードプレスで..
は、私が何をしないのですか？
sooooありがとう –