PHP variable doesn't update after button click

Question

What I'm trying to achieve is to display the inputted name in text.The user is allowed to edit it by clicking the edit button. A form will replace the text and the form must have the default value of the name.

My code is able to perform the process stated. The problem is when I click the save button, the displayed text is still the old value. It doesn't update.

function edit(firstname){
        document.getElementById("firstname-div").innerHTML='First Name:<input type="text" name="firstname" value="'+firstname+'">';
      }

function save(firstname){
        document.getElementById("firstname-div").innerHTML= 'First Name:'+firstname;
        }

<div id="firstname-div">
        <?php echo "First Name: $firstname<br>"; ?>
</div>
      
      <button type="button" onclick="edit('<?php echo $firstname ?>')">edit</button><br>

      <button type="button" onclick="save('<?php echo $_POST['firstname']?>')">save</button><br>

I know it has something to do with <button type="button" onclick="save('<?php echo $_POST['firstname']?>')">save</button>. The $_POST['firstname'] value is still the same.

Any idea on how to solve this? Or other implementation in pure javascript?

You seem to have a basic misunderstanding of how PHP works. It runs on the server side. By the time the user downloads the button tags, that part of the PHP has finished running. You *can't* update it on the client side. — elixenide, Jun 22 '18 at 03:39
Yes. I'm new to web development. Any idea on how we implement this in pure javascript? — Erlisar Vasquez, Jun 22 '18 at 03:41
Do you mean that, when I use $_POST['firstname'] on the next page, it has the new value? — Erlisar Vasquez, Jun 22 '18 at 03:46
@ErlV I'm honestly not 100% clear on what you're trying to do. The point that I am making is that `$_POST['firstname']` is a PHP variable, and it is determined exactly one time, when your PHP code runs on the server. You can't change it based on something the client does. In other words, your `onclick` actions will always have the same value on any given page load; the user can't change the PHP variables because they aren't variables anymore; they're values. If the client submits a form, of course, then whatever they submit is available to whatever PHP code handles that form submission. — elixenide, Jun 22 '18 at 04:26

Charith H · Accepted Answer · 2018-06-22T04:33:28.400

As you are new to web development, better try more tutorials about javascript and php to understand how do they work in client side and the server side.

Why this doesn't work?
In order to access $_POST you must submit a http post request to the server from client side.
Answer for your question.
(Please remember here i will only display the user inputs in client side and, this will not change your database or any server side variable.)

<button type="button" onclick="save()">save</button><br>

function edit(firstname){
   var firstname_old = document.getElementById("firstname-div")

   //Set id="FirstName" to your input field
   firstname_old.innerHTML= 'First Name:<input type="text" id="FirstName" name="firstname" value="'+ firstname +'">';
}

function save(){
  var firstname_new = document.getElementById("FirstName").value

  document.getElementById("firstname-div").innerHTML = firstname_new

}

Hope this will helpful to fix it without reloading your page.

Excellent. This is what I'm trying to find. But I have a question, once I access $_POST on the next page, is it already the updated value? — Erlisar Vasquez, Jun 22 '18 at 05:19
Read [this](https://stackoverflow.com/questions/871858/php-pass-variable-to-next-page) (GET and POST section in first answer). You can use `window.location = "page2.php?firstname=" + firstname_new` inside `save()` function. You can do the rest in your php file. But try more tutorials as these are not best practices. :) — Charith H, Jun 22 '18 at 05:46

PHP variable doesn't update after button click

1 Answers1