Working with forms: Executing the ID then the php action

Question

I have the following form

<form action="" method="POST" id="payment-form" class="form-horizontal">

where when the user hit submit the following actions is suppose to be done: The JavaScript Function start to run, and once done, then the php code run

However, my problem is that the php code does not execute when an id is added to the form, and where only the JavaScript function is run. I do not want both to be executed at the same time, but rather the javascript function first then the php.

Below is the JS function:

 <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;
      });
    });
  </script>

Below is the php code

  <?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); 

?>

Hence, my problem can be boil down as:

• PHP code not execute because of the payment-form id that was added to the form
• Not sure if I will be able to grab the value of payment-form as such

Answer 1

Why not restructure your approach as follows:

$("#payment-form").click(function(event){
    event.preventDefault(); //prevent form submission or onclick event
    event.find('button').prop('disabled', true);
    var var1 = ""; //Value from form
    var var2 = ""; //Value from form
    phpCall(var1, var2);
});

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

//ajax example from: calling php function from jquery?

Answer 2

Here you go, replace your whole jQuery(function($) {/**stuff**/}); block with this:

//wait for the DOM to load HTML tags
$(document).ready(function(){

    //attach event listeners
    $('#payment-form button').on({

        //attach the click listener
        click:function(e){

            //stop javascript from calling other asynchronous click events
            e.preventDefault();

            //get form element from the DOM
            var $form = $('#payment-form');

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

            //create the stripe token
            Stripe.card.createToken($form, stripeResponseHandler);

            //Submit the form
            $form.submit();

        } //click

    }); //on()

}); //DOM Ready