Submit form without redirect to action page, but refresh current page

Question

I have a form that post to basket.php page, upon form submission it redirects to basket.php page and back to order page(page where form is located). it happens fast but you can still see the basket page for a just second, how do i stop the form from showing the basket.php page at all but still refresh the current page(order page).

My code:

<?php
echo '<div class="food">'; 
echo '<form method="post" action="basket.php"    
    onsubmit="window.location.reload()" >';
echo '<h4>'.$obj->food_title.'</h4>';
echo '<div class="pic"><img src="admin/food_images/'.$obj->food_image.'" 
    width= "180" height= "160"></div>';
echo "<p><b>£".$obj->food_price."</b></p>";
echo '<div class = "btn"><a href="info.php?foo_id='.$obj->food_id.'" 
    style="float:left">INFO</a></div>';
echo '<div class = "add_b"><button>Add to Basket</button></div>';
echo '<input type="hidden" name="food_code" 
    value="'.$obj->food_id.'"  />';
echo '<input type="hidden" name="type" value="add" />';
echo '</form>';
echo '</div>';
?>

i haven't really used ajax before, please can you give an example. — , Mar 12 '15 at 12:52
Refer this link for AJAX tutorial... http://www.w3schools.com/ajax/ — phpfresher, Mar 12 '15 at 12:55
Just execute the `basket.php` file from AJAX.. like this `xmlhttp.open("GET","basket.php",true);` and if you want to send any values through URL. you can give them there... — phpfresher, Mar 12 '15 at 12:58

score 2 · Answer 1 · answered Mar 12 '15 at 12:52

2

Cut the code from basket.php and paste it at the top of your main page, preceded by

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  //basket.php code here 
}

Afterwards, change the form code to

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">

This will refresh the page and execute the php code at the top of the page.

answered Mar 12 '15 at 12:52

i need basket.php to be on a seperate page. – Mar 12 '15 at 12:58
some variables in basket.php are linked to other pages aswell, doing this would cause me to change lots of stuff in those pages – Mar 12 '15 at 13:22
Well this is the way I do it, consider putting you variables from basket.php in a session, like this `$_SESSION['value1'] = $variable1; ` after that you can call on the variables on another page by using `$variable1 = $_SESSION['value1'];`. To do this you'll need to make sure you have a `session_start();` on every page you wish to call on a variable. Just trying to help. – Mar 12 '15 at 15:00

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

Perhaps this will help. Contains various answers, some involve using an absolute url Refresh page after form submiting

To stop the action from briefly showing the basket page, I'm not sure you can prevent the visit to that page. Does basket.php print anything to the screen? I would think it's just there to process the incoming POST vars, and then move on to your orders page, right?

edited May 23 '17 at 11:46

Community

1
1

answered Mar 12 '15 at 13:32

Adam T

675
8
22

score 0 · Accepted Answer · answered Mar 12 '15 at 13:35

Hi here is a simple ajax form submit file try this,

index.html:

<!DOCTYPE html>
<html>
<title>AJAX Tutorial</title>
<head>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
</head>
<body>
<div class="container">
  <form id="add-basket-form" class="form-inline">
    <div class="form-group">
      <label class="sr-only" for="exampleInputAmount">Name</label>
      <div class="input-group">
        <input type="text" class="form-control" id="name" name="name" placeholder="name">
      </div>
    </div>
    <div class="form-group">
      <label class="sr-only" for="exampleInputAmount">Age</label>
      <div class="input-group">
        <input type="text" class="form-control" id="age" name="age" placeholder="age">
      </div>
    </div>
    <div class="form-group">
      <div class="input-group">
        <input type="submit" class="form-control" name="add" value="Add" placeholder="age">
      </div>
    </div>
  </form>
</div>

<script>
jQuery(function(){
    $('#add-basket-form').submit(function(){
        var name = $('#name').val();
        var age = $('#age').val();

        $.ajax({
            url : 'basket.php',
            dataType : 'JSON',
            type : 'post',
            data: {
                'name' : name,
                'age' : age,
            },
            success: function(data) {
                console.log(data);
            }
        });
        return false;
    });
});
</script>
</body>
</html>

<?php
    $name = $_POST['name'];
    $age = $_POST['age'];
    // Above is the way to get variables and you can process whatever you want

    echo 'success';
?>

Submit form without redirect to action page, but refresh current page

3 Answers3

Linked