Run PHP code after button click but without refreshing page

Question

I have a form in HTML to apply a Discount Coupon to a current shopping cart. I would like the user to just click on APPLY (after entering the coupon code) and then without refreshing the page, to have some PHP code run so it computes the corresponding discount.

Here is my form:

<form action="">
   <input type="text" name="couponCode">
   <input type="submit" value="Apply">
</form>

PHP to be run:

if (isset($_REQUEST['couponCode']) && $_REQUEST['couponCode']!='') 
{
 $couponCode = $_REQUEST['couponCode'];
    if ($couponCode == "TEST1") 
    {
    $discount=0.2;
    }
}

How would this be done using javascript?

Answer 1

You need to use either the onsubmit event of the form or the onclick event of the button.

In the event handler, you assemble a URL and "get" it. For example:

<script type="text/JavaScript">

function submitCouponCode()
{
    var textbox = document.getElementById("couponCode");
    var url =
        "https://www.example.com/script.php?couponCode=" + encodeURIComponent(textbox.value);

    // get the URL
    http = new XMLHttpRequest(); 
    http.open("GET", url, true);
    http.send(null);

    // prevent form from submitting
    return false;
}

</script>

<form action="" onsubmit="return submitCouponCode();">
   <input type="text" id="couponCode">
   <input type="submit" value="Apply">
</form>

Answer 2

Use jQuery AJAX. When it's complete, refresh your page as needed.