表单验证后激活条带检出

时间:2015-05-13 08:20:28

标签: javascript php jquery forms validation

免责声明:我对此非常陌生,我正在帮助某人开发网站,并且遇到了一个问题。他们买了一个主题,我很难理解事件发生时发生的一切。

这里发生了什么(最后的代码)。

我在/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上看到所有内容

0 个答案:

没有答案