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?

1. you want to hear about ajax; 2. you want to hear about not nesting `if` blocks. — moonwave99, Apr 04 '13 at 22:06
@Cristy they are smell for using boolean operators / splitting huge methods in reusable submethods / going for convention over configuration, and so. Sometimes they are needed, but this is the case where they are clearly not. — moonwave99, Apr 04 '13 at 22:12

Martin Prikryl · Accepted Answer · 2017-02-12T19:17:54.743

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>

score 2 · Answer 2 · answered Apr 04 '13 at 22:06

2

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

answered Apr 04 '13 at 22:06

Peter Rankin

713
1
6
29

score 2 · Answer 3 · answered Apr 04 '13 at 22:07

2

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/

answered Apr 04 '13 at 22:07

d g

1,594
13
13

You don't need a `POST` for that, but a `GET`. – moonwave99 Apr 04 '13 at 22:16

score 1 · Answer 4 · answered Oct 26 '15 at 21:08

1

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>

answered Oct 26 '15 at 21:08

Matthew

131
1
3

Run PHP code after button click but without refreshing page

4 Answers4