CODEWITHSUNDEEP
javascriptphpjqueryhtml
nrofis
nrofis

Reputation: 9766

Temporarily changing HTML structure on the same page in PHP when submit button is clicked?

I have PHP page that have submit button to another URL.

I want to reload the current page after the submit button clicked, and add div to the HTML.

My page url is: /foo.php, and in the HTML I have:

<button onclick="$.get('/bar', function() { ... })">Submit</button>

As you can see the form sends request to /bar page.

I want to reload the /foo.php (the current page), and change the HTML to:

<button onclick="$.get('/bar', function() { ... })">Submit</button>
<div>Thank you!</div>

My problem is how can I know that the user click on the button and the refresh was because the click, and not because just navigating.

Another thing, if it possible, I want that the new div will disappear if the user refresh the page again.

Upvotes: 0

Views: 572

Answers (3)

user1978142
user1978142

Reputation: 7948

Alternatively, you could simulate a flash session (one time use session) if you opt to do this in PHP. Consider this example:

foo.php

<?php session_start(); ?>

<form method="POST" action="bar.php">
    <button type="submit" name="thank_you">Submit</button>
</form>
<?php if(isset($_SESSION['thank_you'])): ?>
<?php unset($_SESSION['thank_you']); ?>
    <h1>Thank You!</h1>
<?php endif; ?>

bar.php

<?php
session_start();

if(isset($_POST['thank_you'])) {
    $_SESSION['thank_you'] = true;
    // processes
    header('Location: foo.php');
}

?>

Upvotes: 0

xanobius
xanobius

Reputation: 158

Why don't you just append the div in the success callback of the get function? You wouldn't have to reload the page.

<div id="btn_area">
    <button onclick="$.get('/bar', function() { $('#btn_area').append($('<div>').html('Thank You');)})">Submit</button>
</div>

By the way, i hardly recommend to separate the javascript from the html and not put it directli in the DOM.

Another Method would be, to fire an additional form with a hidden parameter to the same side. After that, you check on the serverside the hidden parameter and display the div.

A third method is, to set a cookie in the Callback, reload the side, check the cookie, display the div and remove the cookie again.

In my opinion, the first mentioned option (add the div directly in the callback without reloading) would be by far the 'prettiest', but of course i don't know what else is going on on your site

Upvotes: 3

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

Demo

You can handle that in js side. Just make your request, and in callback, you can manipulate dom. You can see below;

<button>Submit</button>

$("button").on("click", function() {
   var $button = $(this);
   $.get("/echo/html", function() {
       $button.after("<div>Thank you!</div>");
   });
});

Upvotes: 0

Related Questions