Coupon Code method Ajax jquery

Question

I'm trying to add a coupon Code system method to my existing form, the only problem is that the form already has a form action.

<form id="apply" name="apply" method="post" action="<?php echo $editFormAction; ?>">

I have searched high and low for a solution and stumbled on a solution of a combination of AJAX java script/ jquery.

In my code i echo the discount value from the database which will be used for the math. I also echo the coupon code itself and the total to be reduced.

<tr>
    <td class="detailnoborder"><label for="Dicount_code">Enter Code for Discount:</label>&nbsp;&nbsp;</td>
    <td class="detailnoborder1">
        <input type="text" tabindex="33" id="coupon" name="coupon_id" size="10"/>
        <input type="text" tabindex="10" id="T_cost" name="T_cost" size="5" value="<?php echo $row_rsMembershipTypes['Cost']?>"/>
        <input type="text" tabindex="10" id="Discount" name="Discount" size="5" value="<?php echo $row_rsdiscount['discount']?>"/>
        <input type="text" tabindex="10" id="D_amount" name="D_amount" size="5" value="<?php echo $row_rsdiscount['D_Cost']?>"/>
    <input type="button" id="Check" value="Check" onclick="chk_discount()" type="submit"/> 
</tr>

I originally had a function named chk_discount of which i was completely unsure of what i was doing.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
  $("#Check").click(function() {
      $.ajax({
         type: "POST",
         url: 'ajax.php',
         data:{coupon: $('#coupon').val(), },
         success:function(data) {
         if (data != ''){
         //display error message however you would like 
             }
          }
      });
 }
</script>

further research i decided to create a function that connects to my ajax.php file which the php function will be in.. to be honest im kinder confused.

 <?php
     if(isset($_POST['coupon'] == HXAR1){
         $D_Cost - $Cost; 
     }

     return ($Cost);
  ?>

Ideally when I post to ajax I would like to do that math for subtracting one database value with the other to give a total cost to then be sent to Paypal on submission but the check discount will be done before..

I'm not asking for anyone to do this for me but some help would be deeply appreciated.

score 1 · Answer 1 · edited May 23 '17 at 12:05

I´ll try to explain what I´ve understood:

You have a Coupon code, that checks from Javascript (client side) to PHP (server side) that the coupon has a registered code (HXAR1). This is a security method to ensure a user does not change it in client code, and then, changes your product value, or uses a coupon that is not registered. Then your server (PHP) is the master to give that info.

After calling ajax.php (a file that will run in server) from your AJAX client (Asynchronous JavaScript And XML methods ) your PHP server function will return the REAL COST after applying the coupon discount, then that value is the one you need to send to PAYPAL.

AJAX will receive PHP return value in success method, then, you will need to retrieve this value in javascript (at client) and send it to PAYPAL.

I´ll try to explain you where you have to code it:

Have a look at the snippet I´ve prepared. It will easily explain you how to send data to a php file.

NOTE You have some PHP code that makes me think that you have N occurrences of this structure, then the $("#Check") or $("#coupon") selectors will not work if there are more than one occurrence. I removed php code there, then you can use your own values

  $("#Check").click(function() {
        $.ajax({
          type: "POST",
          url: 'ajax.php',
          data: {
            Dis_code: $('#coupon').val(),
            T_cost: $('#T_cost').val(),
            Discount: $('#Discount').val()
          },
          success: function(data) {
            if (data != '') {
                        alert("you succesfully send and received "+data+" from ajax.php");

                        //HERE IS THE SUBMIT YOU NEED ALL. IT WILL 
                        //SUBMIT THE FORM TO THE ORIGINAL ACTION 
                        $("#apply").submit();
            }
          },
          error: function(data){
            alert("You tried to send data to ajax.php but it didn´t give a OK response");
          }

        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<tr>
  <td class="detailnoborder">
    <label for="Dicount_code">Enter Code for Discount:</label>&nbsp;&nbsp;</td>
  <td class="detailnoborder1">
 <form id="apply" name="apply" method="post" action="<?php echo $editFormAction; ?>">

    <br>Coupon<input type="text" tabindex="33" id="coupon" name="coupon_id" size="10" />
    <br>
    Cost<input type="text" tabindex="10" id="T_cost" name="T_cost" size="5" value="" />
    <br>Discount<input type="text" tabindex="10" id="Discount" name="Discount" size="5" value=""/>
    <br>DiscountCost<input type="text" tabindex="10" id="D_amount" name="D_amount" size="5" value="" />
    <br><input type="button" id="Check" value="Check" />
</tr>

HOW IT WORKS

The jquery click() function binds your ajax function to an element with id Check (in this case, the button). If there is more than one button, you should make it in a different way. Check the button has not type="submit", then it will be a dummy button at first (before this click binding is executed).

$.ajax picks the values from coupon, T_cost, and Discount inputs, and puts them in the data payload of POST request, and sends IT after user click.

Ajax.php will receive the data payload, and will able to use its parameters to make all the operations you need. After that, will send back a RESPONSE that ajax will receive.

$.ajax will receive the response send by Ajax.php in success method, and then you will be able to do what to do with it. This method will be executed right after php in server side has ben executed and the response has been send.

After all, in success(), $.submit() will send the form called "apply" to it´s original action.

Hope this explanations and the code in the snippet will clarify you. Sorry but I had to remove php code to make it run.

Anyway, here you have some info about javascript and php communicate

jQuery Ajax POST example with PHP

Pass variable from jQuery to PHP

You have a onclick event function on `$("#Check").click(function(){...}`. It´s the jquery click binding to "Check" button: https://api.jquery.com/click/ — Alejandro Teixeira Muñoz, Jun 10 '15 at 14:49
Sorry but i found those links not so helpful, still in need of tips towards form submits, i want to submit my form after the discount check. i already have one form submit and my onclick doesnt seem to work.. — zen, Jun 10 '15 at 14:56
i can see the code works fine here, my code however ( the alerts are not firing). — zen, Jun 10 '15 at 16:01
your code is not there... put the whole code.. or check the console to see what´s happening. — Alejandro Teixeira Muñoz, Jun 10 '15 at 16:03
Still no luck.. i can see how yours works but mine does not even show alerts.. I will spend some more time on it tonight and tommor and get back to you. c — zen, Jun 10 '15 at 16:20
I think you should understand a little more how AJAX, jquery, and PHP work: http://blog.teamtreehouse.com/beginners-guide-to-ajax-development-with-php http://www.differencebetween.net/technology/difference-between-ajax-and-php/ — Alejandro Teixeira Muñoz, Jun 10 '15 at 16:23

Coupon Code method Ajax jquery

1 Answers1