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.

Answer 3

You can use Jquery to do an AJAX post you your PHP script, and then use JS to change the contents of the calling page.

http://api.jquery.com/jQuery.post/

Answer 4

It's simple with jQuery. You just have to use the right tag. If you use an "a" tag the page will refresh.

<button id="MyButton">Click Me!</button>

<script>
  $("#MyButton").click( function(){
    $.post("somefile.php");
  });
</script>