您好我的表格有2个步骤有问题，第一步会询问地址详情，第二步会带您到签证详情。第二步中的结账按钮我无法找出它无法正常工作的原因。
以下是表单的代码：
<div class="modal fade" id="checkOutModal" tabindex="-1" role="dialog" aria-labelledby="checkOutModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-primary" id="checkOutModalLabel">Shipping Address</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<form action="paymentPortal.php" method="post" id="paymentForm">
<span class="bg-danger" id="payment_errors"></span>
<div id="step1" style="display:block;">
<div class="form-group col-md-6">
<label for="firstName">Name: </label>
<input class="form-control" id="firstName" name="firstName" type="text">
</div>
<div class="form-group col-md-6">
<label for="lastName">Surname: </label>
<input class="form-control" id="lastName" name="lastName" type="text">
</div>
<div class="form-group col-md-6">
<label for="houseName">HouseName/No: </label>
<input class="form-control" id="houseName" name="houseName" type="text">
</div>
<div class="form-group col-md-6">
<label for="street">Street: </label>
<input class="form-control" id="street" name="street" type="text">
</div>
<div class="form-group col-md-6">
<label for="city">City: </label>
<input class="form-control" id="city" name="city" type="text">
</div>
<div class="form-group col-md-6">
<label for="postCode">Post Code: </label>
<input class="form-control" id="postCode" name="postCode" type="text">
</div>
<div class="form-group col-md-6">
<label for="country">Country: </label>
<input class="form-control" id="country" name="country" type="text">
</div>
<div class="form-group col-md-6">
<label for="email">e-Mail: </label>
<input class="form-control" id="email" name="email" type="email">
</div>
<div class="form-group col-md-6">
<label for="contactNo">Contact No: </label>
<input class="form-control" id="contactNo" name="contactNo" type="text">
</div>
</div>
<div id="step2"style="display:none;">
<div class="form-group col-md-3">
<label for="name">Name on Card: </label>
<input type="text" id="cardName" name="cardName" class="form-control"> <!-- NEVER enter name="" in credit card data handling because it may go to your server or you will be held liable -->
</div>
<div class="form-group col-md-3">
<label for="cardNumber">Card Number: </label>
<input type="text" id="cardNumber" name="cardNumber" class="form-control"> <!-- NEVER enter name="" in credit card data handling because it may go to your server or you will be held liable -->
</div>
<div class="form-group col-md-2">
<label for="cvc">CVC: </label>
<input type="text" id="cvc" name="cvc" class="form-control"> <!-- NEVER enter name="" in credit card data handling because it may go to your server or you will be held liable -->
</div>
<div class="form-group col-md-2">
<label for="expireMonth">Expire Month: </label>
<select id="expireMonth" name="expireMonth" class="form-control">
<option value=""></option>
<?php for($i=1;$i <13;$i++) :?>
<option value="<?= $i ;?>"><?= $i; ?></option>
<?php endfor; ?>
</select> <!-- NEVER enter name="" in credit card data handling because it may go to your server or you will be held liable -->
</div>
<div class="form-group col-md-2">
<label for="expireYear">Expire Year: </label>
<select id="expireYear" name="expireYear" class="form-control"><!-- NEVER enter name="" in credit card data handling because it may go to your server or you will be held liable -->
<option value=""></option>
<?php $yr=date("Y");?>
<?php for($i=0;$i<11;$i++) : ?>
<option value="<?= $yr+$i ;?>"><?= $yr+$i ;?></option>
<?php endfor;?>
</select>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="check_address();" id="nextButton">Next >></button>
<button type="button" class="btn btn-primary" onclick="back_address();" id="backButton" style="display:none;"> Back</button>
<button type="submit" class="btn btn-primary" id="checkOutButton" style="display:none;">Check Out</button>
</div>
</div>
</div>
</div>
此外，下面是两步工作的jquery / ajax，我不认为它与错误有任何关系：
function back_address(){
jQuery('#payment_errors').html("");//clears errors if pass
jQuery('#step1').css("display","block"); //hides modal with id="step1"
jQuery('#step2').css("display","none"); //show modal with id="step2"
jQuery('#nextButton').css("display","inline-block"); //hides next button
jQuery('#backButton').css("display","none"); //shows back button
jQuery('#checkOutButton').css("display","none"); //hides checkout button
jQuery('#checkOutModalLabel').html("Shipping Address"); //changes <h4> tags text to be displayed from Enter your credit card details!!! to Shipping Address
}
function check_address(){
var data={
'firstName' : jQuery('#firstName').val(),
'lastName' : jQuery('#lastName').val(),
'houseName' : jQuery('#houseName').val(),
'street' : jQuery('#street').val(),
'city' : jQuery('#city').val(),
'postCode' : jQuery('#postCode').val(),
'country' : jQuery('#country').val(),
'email' : jQuery('#email').val(),
'contactNo' : jQuery('#contactNo').val(),
};
jQuery.ajax({
url : '/aresV2/admin/parsers/check_address.php',
method: 'post',
data : data,
success : function(data){ //this data is what is forwarded back from the parser file
if(data != 'passed'){
jQuery ('#payment_errors').html(data);
}
if(data == 'passed'){
jQuery('#payment_errors').html("");//clears errors if pass
jQuery('#step1').css("display","none"); //hides modal with id="step1"
jQuery('#step2').css("display","block"); //show modal with id="step2"
jQuery('#nextButton').css("display","none"); //hides next button
jQuery('#backButton').css("display","inline-block"); //shows back button
jQuery('#checkOutButton').css("display","inline-block"); //hides checkout button
jQuery('#checkOutModalLabel').html("Enter your credit card details!!!"); //changes <h4> tags text to be displayed from Shipping Address to Enter your credit card details!!!
}
},
error : function(){alert("An error occured!!!");},
});
}
在浏览器的开发工具中，按钮没有错误，只有警告与端口80处理的签证信息有关。
这是我第一次尝试这个2步模态形式/模态，并且非常感谢任何解决问题的帮助。