免责声明:我对此非常陌生,我正在帮助某人开发网站,并且遇到了一个问题。他们买了一个主题,我很难理解事件发生时发生的一切。
这里发生了什么(最后的代码)。
我在/register.php页面上收集注册和付款。我有一个表格(收集姓名,电子邮件,电话等)。我想要一个提交按钮,按下后,将信息保存到安全的csv文件,然后显示条带检查。我应该注意到我确实想使用Stripe Checkout,因为我觉得最终用户会觉得更安全。
问题来自表单验证。该页面使用jQuery.validate.js,我假设它是一个标准的js脚本,以及一个名为form-validation.js的自定义脚本。表单调用process-form.php,我将数据保存到csv文件中。问题是从这里激活Stripe Checkout。
Stripe的默认值附带一个在运行时注入的按钮。我创建了第二个按钮(并隐藏了它们),除了id =" customButton"之外,它是相同的。我想使用javascript从form-validation.js页面或process-form.php页面单击此按钮,但这些都不起作用。
我已经测试了按钮,它本身可以正常工作,但条纹结帐从不会弹出。
这是我的代码的相关位。
register.php
<div class = "form-group">
<span class = "highlight"><h3>$30</h3></span>
Full-Access Day Pass
</div>
<div class="form-group">
<label for="delegateName" class="col-sm-4 col-xs-12 control-label">Full Name</label>
<div class="col-sm-8 col-xs-12">
<input type="text" class="form-control required" name="delegateName" id="delegateName" placeholder="Jack Smith">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-4 col-xs-12 control-label">Email</label>
<div class="col-sm-8 col-xs-12">
<input type="email" class="form-control required email" name="email" id="email" placeholder="jack.smith@illuminatevancouver.com">
</div>
</div>
<div class="form-group">
<label for="firstchoice" class="col-sm-4 col-xs-12 control-label">First Choice</label>
<div class="col-sm-8 col-xs-12">
<select class="form-control required" name="firstchoice" id="firstchoice" placeholder="Select your first workshop choice">
<option value="Entrepreneurship" selected>Entrepreneurship</option>
<option value="Technology" >Technology</option>
<option value="Personal Branding" >Personal Branding</option>
</select>
</div>
</div>
<div class="form-group">
<label for="secondchoice" class="col-sm-4 col-xs-12 control-label">Second Choice</label>
<div class="col-sm-8 col-xs-12">
<select class="form-control required" name="secondchoice" id="secondchoice" placeholder="Select your second workshop choice">
<option value="Entrepreneurship" selected>Entrepreneurship</option>
<option value="Technology" >Technology</option>
<option value="Personal Branding" >Personal Branding</option>
</select>
</div>
</div>
<div class="form-group">
<label for="grade" class="col-sm-4 col-xs-12 control-label">Grade</label>
<div class="col-sm-8 col-xs-12">
<select class="form-control required" name="grade" id="grade" placeholder="Select your grade">
<option value="8 - 9">8 - 9</option>
<option value="10 - 11" selected>10 - 11</option>
<option value="12 or above">12 or above</option>
</select>
</div>
</div>
<div class="form-group">
<label for="school" class="col-sm-4 col-xs-12 control-label">School</label>
<div class="col-sm-8 col-xs-12">
<input type="text" class="form-control required " name="school" id="school" placeholder="Sauder School of Business">
</div>
</div>
<div class="form-group">
<label for="cellPhone" class="col-sm-4 col-xs-12 control-label">Cell Phone</label>
<div class="col-sm-8 col-xs-12">
<input type="text" class="form-control required number" name="cellPhone" id="cellPhone" placeholder="778 123 4567">
</div>
</div>
<div class="form-group">
<label for="emergencyContact" class="col-sm-4 col-xs-12 control-label">Emergency #</label>
<div class="col-sm-8 col-xs-12">
<input type="text" class="form-control required number" name="emergencyContact" id="emergencyContact" placeholder="778 987 6543">
</div>
</div>
<div class="form-group">
<label for="meal" class="col-sm-4 col-xs-12 control-label">Meal</label>
<div class="col-sm-8 col-xs-12">
<select class="form-control required" name="meal" id="meal" placeholder="Select your meal type">
<option value="Non - Vegetarian" selected>Non - Vegetarian</option>
<option value="Vegetarian" >Vegetarian</option>
</select>
</div>
</div>
<div class="form-group">
<label for="other" class="col-sm-4 col-xs-12 control-label">Other</label>
<div class="col-sm-8 col-xs-12">
<input type="text" class="form-control " name="other" id="other" placeholder="Allergic to Dairy">
</div>
</div>
<input type="submit" class="btn btn-primary btn-sm btn-block" name = "payNow" value = "Pay With Stripe"></input>
</form>
<script src="https://checkout.stripe.com/checkout.js"></script>
<?php require_once('config.php'); ?>
<div class = "hidden/"
<form action="charge.php" method="post">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<?php echo $stripe['publishable_key']; ?>"
data-amount="3000" data-description="All-Access Day Pass"></script>
<button type = "submit" class = "stripe-button-el" id = "customButton">Custom Button</button>
</form></div>
形状validation.js
// Form validation - register form
toastr.options = {"positionClass": "toast-top-full-width"};
$('.form-register').validate({
messages: {
fullname: "Please enter your fullname",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirmPassword: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address"
},
submitHandler: function(form) {
var $this = $(form);
$.ajax({
url: $this.attr('action'),
type: 'POST',
data: $this.serialize(),
})
.done(function(msg) {
if( msg == 'ok' ) {
toastr.success('Thanks for signing up! Expect an email soon from auto-confirm@illuminatevancouver.com.');
$this[0].reset();
} else {
toastr.error('An error occured. Please try again later.');
}
})
.fail(function() {
toastr.error('An error occured. Please try again later.');
});
}
});
过程-form.php的
<?php
require_once('/config.php');
$varDelegateName = $_POST['delegateName'];
$varemail = $_POST['email'];
$varFirstChoice = $_POST['firstchoice'];
$varSecondChoice = $_POST['secondchoice'];
$vargrade = $_POST['grade'];
$varschool = $_POST['school'];
$varcellPhone = $_POST['cellPhone'];
$varemergencyContact = $_POST['emergencyContact'];
$varmeal = $_POST['meal'];
$varother = $POST_['other'];
$fs = fopen("delegateData.csv","a");
fwrite($fs,$varDelegateName.", ".$varemail.", ".$varFirstChoice.",".$vargrade.",".$varSecondChoice.",".$varschool.", ".$varcellPhone.", ".$varemergencyContact.", ".$varmeal.",".$varother."\n");
fclose($fs);
echo "ok";
exit;
?>
我用来调用按钮的代码是document.getElementById("customButton").click();
我认为这是无可争议的。在PHP中,它以回声包裹为
echo'<script type = "text/javascript"> document.getElementById("customButton").click(); </script>';
如果我遗漏任何东西,你可以在illuminatevancouver.com/register.php上看到所有内容