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

make the event fire on the click of the button used to submit the form, then prevent the default action do your thing and do `$('#payment-form').submit();` — iam-decoder, Apr 16 '15 at 23:00
Thanks for you're suggestion. I am quite novice, could you kindly elaborate, possibly with an example. thanks vm — code_legend, Apr 16 '15 at 23:02
`$('#payment-form button').on({click:function(e){e.preventDefault();/***YOURCODEHERE***/$('#payment-form').submit();}});` — iam-decoder, Apr 16 '15 at 23:05
I think you're good to declare an answer. just a bit more detailed please — code_legend, Apr 16 '15 at 23:21

score 1 · Answer 1 · edited May 23 '17 at 11:57

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?

edited May 23 '17 at 11:57

Community

1
1

answered Apr 16 '15 at 23:57

Mark Bellamy

135
1
10

thank you. were would i put this Stripe.card.createToken($form, stripeResponseHandler); ? thanks (found inside my payment-form js function) – code_legend Apr 17 '15 at 00:31
so now everytime they click on the form, regardless of actual button, it does that? – iam-decoder Apr 17 '15 at 20:38

score 0 · Answer 2 · answered Apr 17 '15 at 20:47

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

Working with forms: Executing the ID then the php action

2 Answers2