Explicitly clear form field even though value=" " has been given

Question

I am displaying data from my database in an HTML form to make it editable by the user.

<input type="text"  id="name" placeholder="Name" required = " true"  value = <?php if(isset($_SESSION['name'])) echo $_SESSION['name'] ;?>>

There is a reason why I had to use session storage. The problem here is, when I refresh the page, it displays the old value stored in the session. Is there a way to explicitly clear the form while its loaded? I tried JavaScript and jQuery reset(), that doesn't work as its not a user input tht can be cleared.
Edit. This is not a case dealing with auto complete, to be more precise , I have another form to read an unique id which I use to query from the data base . The database results are stored in the session storage and I'm echoing them to the 2nd form.

I don't think I understand what you're asking. You are deliberately putting the session variable into the field when the page is loaded (without surrounding quotes btw), do you want the entered / changed value to remain when the page is refreshed? — , Jun 10 '18 at 16:18
Possible duplicate of [How to clear history of text input](https://stackoverflow.com/questions/17802690/how-to-clear-history-of-text-input) — USER249, Jun 10 '18 at 16:20
You will have to find a way to distinguish a "normal" page load from a reload. Look for localStorage. Then if it's a reload, `$("#name").val("");` will do in a document ready handler to clear the value. You could event force the "new" value from before the reload, with [**localStorage**](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). — Louys Patrice Bessette, Jun 10 '18 at 16:21
I am display a value that I have retrieved from the database, the user can make changes and the updated value is put into the database. — sai, Jun 10 '18 at 16:42

T.J. Crowder · Answer 1 · 2018-06-10T16:28:01.847

reset will just restore the elements to the state the markup dictates, which won't help.

Instead, you need to set the defaultValue of the elements to the new default, and then use reset (or just assign to value at the same time). defaultValue is the property that reflects the value attribute.

Example:

setTimeout(function() {
  console.log("Clearing defaultValue and resetting...");
  $("#the-form input").prop("defaultValue", "");
  $("#the-form")[0].reset();
}, 800);

<form id="the-form">
<input type="text"  id="name" placeholder="Name" required = " true"  value = "value from markup">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

To figure out whether you need to do that, you might save the PHP session ID in client-side sessionStorage (along the lines of Louys Patrice Bessette's suggestion) and only do this when they match. Along these lines on load:

var phpSessionId = <?php echo json_encode(session_id())?>;
if (sessionStorage.getItem("phpsessionid") != phpSessionId) {
    sessionStorage.setItem("phpsessionid", phpSessionId);
} else {
    // reset the fields -- perhaps even to values you stored in `sessionStorage`
}

score 1 · Answer 2 · answered Jun 11 '18 at 04:03

1

The solution turned out to be very simple. I destroyed the session after displaying in a jQuery on click function.

<?php session_destroy(); ?>

answered Jun 11 '18 at 04:03

sai

135
1
8

Explicitly clear form field even though value=" " has been given

2 Answers2