Question

我有以下脚本在单击表单后执行

 <script type="text/javascript">
    // This identifies your website in the createToken call below
  Stripe.setPublishableKey('CODE');

    var stripeResponseHandler = function(status, response) {
      var $form = $('#payment-form');

      if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
        $form.find('button').prop('disabled', false);
      } else {
        // token contains id, last4, and card type
        var token = response.id;
        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="text" name="stripeToken" />').val(token));
        // and re-submit
      }
    };

    jQuery(function($) {
      $('#payment-form').submit(function(e) {
        var $form = $(this);

        // Disable the submit button to prevent repeated clicks
        $form.find('button').prop('disabled', true);

        Stripe.card.createToken($form, stripeResponseHandler);

        // Prevent the form from submitting with the default action
        return false;
      });
    });


function phpCall() {
   $.ajax({
      url: 'paymentEmail.php',
      success: function (response) {//response is value returned from php (for    your example it's "bye bye"
        alert(response);
      }
   });
}
  </script>

我的问题是脚本完成后php paymentEmail.php没有运行。

我的目标如下：曾经且只有这一行已经运行

  $form.append($('<input type="text" name="stripeToken" />').val(token));

以下情况发生：

stripeToken的值会发布到paymentEmail.php
paymentEmail.php被执行。

如果您有点好奇，以下是paymentEmail.php的样子：

 <?php
    if(isset($_POST['paid'])){



               $course_price_final = $_POST['course_price_final'];

 $course_token = $_POST['stripeToken'];
                $course_provider = $_POST['course_provider'];
                $user_email = $_POST['user_email'];
$course_delivery = $_POST['course_delivery'];

    $order_date = date("Y-m-d");



         $insert_c = "insert into orders (course_title,course_price_final,course_provider,user_email,course_date,course_delivery,order_date,course_token) 
         values ('$crs_title','$course_price_final','$course_provider','$user_email','$course_date1','$course_delivery','$order_date','$course_token')";

        $run_c = mysqli_query($con, $insert_c); 

}

提前致谢

更新

<script type="text/javascript">
    // This identifies your website in the createToken call below
  Stripe.setPublishableKey('');

    var stripeResponseHandler = function(status, response) {
      var $form = $('#payment-form');

      if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
        $form.find('button').prop('disabled', false);
      } else {
        // token contains id, last4, and card type
        var token = response.id;
        var appendedStripeToken = false;
        // Insert the token into the form so it gets submitted to the server
$form.append($('<input type="text" name="stripeToken" />').val(token);  
function handleCall() { if (!appendedStripeToken) { appendedStripeToken = true; phpCall(); } }      // and re-submit
      }
    };

function onSubmit() {
    var $form = $('#'+id_from_form);

    // Disable the submit button to prevent repeated clicks
    $form.find('input').prop('disabled', true);

    Stripe.card.createToken($form, stripeResponseHandler);

}

function phpCall() {
   $.ajax({
      url: 'paymentEmail.php',
      success: function (response) {//response is value returned from php (for    your example it's "bye bye"
        alert(response);
      }
   });
}
  </script>

更新2：

 <script type="text/javascript">
    // This identifies your website in the createToken call below
  Stripe.setPublishableKey('CODE');

    var appendedStripeToken = false;

var stripeResponseHandler = function(status, response) {
    var $form = $('#payment-form');

    if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
        $form.find('button').prop('disabled', false);
    } else {
        // token contains id, last4, and card type
        var token = response.id;
        handleCall(token);
    }
};

function handleCall(token) { 
    if (!appendedStripeToken) { 
        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="text" name="stripeToken" />').val(token); 
        appendedStripeToken = true; 
        phpCall(); 
    } 
}

function onSubmit() {
    var $form = $('#payment-form'); // TODO: give your html-form-tag an "id" attribute and type this id in this line. IMPORTANT: Don't replace the '#'!

    // Disable the submit button to prevent repeated clicks
    $('#paymentSubmit').prop('disabled', true); // TODO: give your html-submit-input-tag an "id" attribute

    Stripe.card.createToken($form, stripeResponseHandler);
}

function phpCall() {
    $.ajax({
        url: 'paymentEmail.php',
        success: function (response) { // response is value returned from php (for your example it's "bye bye")
            alert(response);
        }
    });
}
  </script>

</head>

<body>



<form action="" method="POST" id="payment-form" class="form-horizontal">
  <div class="row row-centered">
  <div class="col-md-4 col-md-offset-4">


  <div class="alert alert-danger" id="a_x200" style="display: none;"> <strong>Error!</strong> <span class="payment-errors"></span> </div>
  <span class="payment-success">
  <? $success ?>
  <? $error ?>
  </span>
  <fieldset>

    <div class="form-group">
    <label class="col-sm-4 control-label" for="textinput">Choose Start Date</label>
    <div class="col-sm-6">
      <select name="course_date" class="address form-control" required>
      <option><?php 

      if(isset($_GET['crs_id'])){

      $course_id = $_GET['crs_id'];

      $get_crs = "select * from courses where course_id='$course_id'";
  $run_crs = mysqli_query($con, $get_crs);

 while($row_crs=mysqli_fetch_array($run_crs)){

        $course_date1  = $row_crs['course_date1'];


        echo $course_date1 ;

  }
}
  ?></option>
  <option value=<?php 

      if(isset($_GET['crs_id'])){

      $course_id = $_GET['crs_id'];

      $get_crs = "select * from courses where course_id='$course_id'";
  $run_crs = mysqli_query($con, $get_crs);

 while($row_crs=mysqli_fetch_array($run_crs)){

        $course_provider = $row_crs['course_provider'];

        $course_date2 = $row_crs['course_date2'];

                $course_price = $row_crs['course_price'];
                                $course_title = $row_crs['course_title'];



        $course_priceFinal = $row_crs['course_priceFinal'];
   $dig = explode(".", $row_crs['course_tax']);
    $course_tax = $dig[1];



        echo $course_date2 ;

  }
}
  ?>/>
  </select>
    </div>
  </div>
<input type="hidden" name="course_provider" value="<?php echo $course_provider; ?>" >
<input type="hidden" name="course_title" value="<?php echo $course_title; ?>" >

    <div class="form-group">
    <label class="col-sm-4 control-label" for="textinput">Course Delivery</label>
    <div class="col-sm-6">
      <select name="course_delivery" class="address form-control" required>
    <option value="classroom">Classroom</option>
  </select>
    </div>
  </div>


  <div class="form-group">
    <label class="col-sm-4 control-label" for="textinput">Seats</label>
    <div class="col-sm-6">
      <select name="course_seats" class="address form-control" required>
      <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>
  </select>
    </div>
  </div>

  <!-- Form Name -->
  <legend>Billing Details</legend>

  <!-- Street -->
  <div class="form-group">
    <label class="col-sm-4 control-label" for="textinput">Billing Street</label>
    <div class="col-sm-6">
      <input type="text" name="street" placeholder="Street" class="address form-control" required>
    </div>
  </div>

  <!-- City -->
  <div class="form-group">
    <label class="col-sm-4 control-label" for="textinput">Billing City</label>
    <div class="col-sm-6">
      <input type="text" name="city" placeholder="City" class="city form-control" required>
    </div>
  </div>

  <!-- State -->
  <div class="form-group">
    <label class="col-sm-4 control-label" for="textinput">Billing Province</label>
    <div class="col-sm-6">
      <input type="text" name="province" maxlength="65" placeholder="Province" class="state form-control" required>
    </div>
  </div>

  <!-- Postcal Code -->
  <div class="form-group">
    <label class="col-sm-4 control-label" for="textinput">Postal Code</label>
    <div class="col-sm-6">
      <input type="text" name="postal" maxlength="9" placeholder="Postal Code" class="zip form-control" required>
    </div>
  </div>

  <!-- Country -->
  <div class="form-group">
    <label class="col-sm-4 control-label" for="textinput">Country</label>
    <div class="col-sm-6"> 
      <input type="text" name="country" placeholder="Country" class="country form-control">
      <div class="country bfh-selectbox bfh-countries" name="country" placeholder="Select Country" data-flags="true" data-filter="true"> </div>
    </div>
  </div>

  <!-- Email -->

  <?php 


  $email = $_GET['user_email'];
// Note the (int). This is how you cast a variable.
$coupon = isset($_GET['crs_coupon']) ? (int)$_GET['crs_coupon'] : '';
if(is_int($coupon)){
    $course_priceFinalAll = $course_priceFinal - ($course_priceFinal * ($coupon/100));
    $coupon_deduction = $course_priceFinal * ($coupon/100);

};

  ?>
  <div class="form-group">
    <label class="col-sm-4 control-label" for="textinput">Email</label>
    <div class="col-sm-6">
      <input type="text" name="user_email" value=<?php echo $email; ?> class="email form-control" required>
            <input type="hidden" name="course_title" value=<?php echo $course_title; ?> class="email form-control">
                        <input type="hidden" id="box1"  name="course_price" value=<?php echo $course_priceFinal; ?> class="email form-control">


    </div>
  </div><br>
    <legend>Purchase Details</legend>

    <div class="form-group">
    <label class="col-sm-4 control-label">Coupon Code</label>
    <div class="col-sm-6">
      <input type="text"  style="text-align:left; float:left; border:none; width:100px;"  name="name" class="email form-control" placeholder="Coupon Code" value="<?php echo $coupon; ?>%" readonly>

    </div>
  </div>


    <div class="form-group">
    <label class="col-sm-4 control-label">Want to replace the current coupon code?</label>
    <div class="col-sm-6">
      <input type="text"  name="name" class="email form-control" placeholder="Please enter another coupon code" value="">

    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" style="color:#FF6400; font-weight:normal;">Tax</label>
    <div class="col-sm-6">
      <input type="text" class="email form-control"  name="name"style="text-align:left; float:left; border:none; width:100px;" placeholder="Please enter another coupon code" value=" <?php echo $course_tax; ?>%" readonly>

    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" style="color:#FF6400;font-weight:normal;">Price before Tax</label>
    <div class="col-sm-6">
      <input type="text" style="text-align:left; float:left; border:none; width:100px;" name="course_price_before_tax" class="email form-control"  value=" $<?php echo $course_price; ?>" readonly>

    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" style="color:#FF6400; font-weight:normal;">Price After Tax</label>
    <div class="col-sm-6">
      <input type="text" style="text-align:left; float:left; border:none; width:100px;" name="course_price_after_tax" class="email form-control"  value=" $<?php echo $course_priceFinal; ?>" readonly>

    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-4 control-label" style="color:#FF6400; font-weight:normal;">Coupon Deduction</label>
    <div class="col-sm-6">
      <input type="text" style="text-align:left; float:left; border:none; width:100px;" name="course_deduction" class="email form-control"  value=" -$<?php echo $coupon_deduction; ?>" readonly>

    </div>
  </div>

   <div class="form-group">
    <label class="col-sm-4 control-label" style="color:#FF6400"><b>Final Price</b></label>
    <div class="col-sm-6">
<input type="text" style="text-align:left; font-weight:bold; float:left; border:none; width:100px;" name="course_price_final" class="email form-control" placeholder="Course Price Final" value="$<?php echo $course_priceFinalAll; ?>" readonly>

    </div>
  </div>

  <!-- Coupon Code-->
<input type="hidden" name="coupon_code" class="email form-control" placeholder="Coupon Code" value=<?php echo $coupon; ?> readonly>

<!-- Price Final -->
  <br>
  <fieldset>
    <legend>Card Details</legend>
        <span class="payment-errors"></span>

    <!-- Card Holder Name -->
    <div class="form-group">
      <label class="col-sm-4 control-label"  for="textinput">Card Holder's Name</label>
      <div class="col-sm-6">
        <input type="text" name="cardholdername" maxlength="70"  placeholder="Card Holder Name" class="card-holder-name form-control" required>
      </div>
    </div>

    <!-- Card Number -->
    <div class="form-group">
      <label class="col-sm-4 control-label" for="textinput">Card Number</label>
      <div class="col-sm-6">
        <input type="text" id="cardnumber" maxlength="19" data-stripe="number" placeholder="Card Number" class="card-number form-control" required>
      </div>
    </div>


    <div class="form-row">
      <label class="col-sm-4 control-label">CVC</label>
              <div class="col-sm-6">

        <input type="text" size="4" class="email form-control" data-stripe="cvc" required/>
    </div>
  </div>
 <br>
    <div class="form-row"><br><br>
      <label class="col-sm-4 control-label">Expiration (MM/YYYY)</label>
              <div class="col-sm-6">
 <div class="form-inline">
          <select name="select2" data-stripe="exp-month" class="card-expiry-month stripe-sensitive required form-control" required>
            <option value="01" selected="selected">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select>



        </div>
      <input type="text" size="4" class="email form-control" data-stripe="exp-year" required/>
    </div>
 </div>


  <br>

    <!-- Submit -->
    <div class="control-group">
      <div class="controls">
        <center><br>
       <input id="paymentSubmit" class="btn btn-danger"  name="paid"  onClick="onSubmit()" type="submit" value="Pay Now" class="btn btn-success"></button>
        </center>
      </div>
    </div>
  </fieldset>
</form>

更新

enter image description here

两个小问题：单击后按钮被禁用，如果例如返回错误，则不允许再次单击，如上所示。它应该只在输入释放后禁用它

$form.append($('<input type="text" name="stripeToken" />').val(token));

php code

 <?php


    $course_price_final = $_POST['course_price_final'];
    $course_token = $_POST['stripeToken'];
    $course_provider = $_POST['course_provider'];
    $user_email = $_POST['user_email'];
    $course_delivery = $_POST['course_delivery'];
    $order_date = date("Y-m-d");
    $insert_c = "insert into orders (course_title,course_price_final,course_provider,user_email,course_date,course_delivery,order_date,course_token) 
             values ('$crs_title','$course_price_final','$course_provider','$user_email','$course_date1','$course_delivery','$order_date','$course_token')";
    $run_c = mysqli_query($con, $insert_c);

    $location = "../paymentConfirmed.php";









header( "Location: $location" );

enter image description here

?>

Answer 1

请求是异步的！

创建一个执行脚本的函数，并在最后调用phpCall()。
使您的html表格调用新方法。

- ＆GT;脚本完成后应该启动请求。

编辑：新功能可能如下所示：

// You don't need jQuery

function onSubmit() {
    var $form = $('#'+id_from_form);

    // Disable the submit button to prevent repeated clicks
    $form.find('input').prop('disabled', true);

    Stripe.card.createToken($form, stripeResponseHandler);

    phpCall();
}

在submitButton上调用方法并将其类型从提交更改为按钮：

<input type="button" onClick="onSubmit()" value="Submit" name="submit" />

（您可以从表单标记中删除操作和方法属性）

<form id="my-form">
    <!-- stuff -->
    <!-- put the input tag here -->
</form>

Answer 2

试试这个：

// This identifies your website in the createToken call below
Stripe.setPublishableKey('');
var appendedStripeToken = false;

var stripeResponseHandler = function(status, response) {
    var $form = $('#payment-form');

    if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
        $form.find('button').prop('disabled', false);
    } else {
        // token contains id, last4, and card type
        var token = response.id;
        handleCall(token);
    }
};

function handleCall(token) { 
    if (!appendedStripeToken) { 
        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="text" name="stripeToken" />').val(token); 
        appendedStripeToken = true; 
        phpCall(); 
    } 
}

function onSubmit() {
    var $form = $('#[put the form id here]'); // TODO: give your html-form-tag an "id" attribute and type this id in this line. IMPORTANT: Don't replace the '#'!

    Stripe.card.createToken($form, stripeResponseHandler);
}

function phpCall() {
    $.ajax({
        url: 'paymentEmail.php',
        success: function (response) { // response is value returned from php (for your example it's "bye bye")
            // Disable the submit button to prevent repeated clicks
            $('#[put the input id here]').prop('disabled', true); // TODO: give your html-submit-input-tag an "id" attribute

            alert(response);
        }
    });
}

有两条TODO条评论！

编辑：修改代码

Answer 3

您已定义了函数phpCall()，但您没有在脚本中的任何位置调用它。只需调用函数或删除函数声明，以便函数内部以程序方式运行。

使用ajax - 将变量发布到另一个执行的页面中

3 个答案: