I'm making a filter in PHP but I need javascript to fill the form after pushing submit button (for people to see what they entered in the form).
To do so, I did this:
<form method="post">
<div style="display:flex;margin-top:20px;">
<input name="surfMin" id="surfMin" type="text" style="height: 35px;width: calc(100%/3);" placeholder="min surface">
<input name="surfMax" id="surfMax" type="text" style="height: 35px;width: calc(100%/3);" placeholder="max surface">
<input name="prix" id="prix" type="text" style="height: 35px;width: calc(100%/3);" placeholder="price">
</div>
<div style="width:100%;margin-top:30px;text-align: center;">
<input id="button" style="width: 25%;height: 35px;background: #dc3545;color:white;" type="submit" name="search" />
</div></form>
if (isset($_POST['surfMin']))
print " <script>
document.getElementById('surfMin').value = '" . $_POST['surfMin'] . "'
</script>";
if (isset($_POST['surfMax']))
print " <script>
document.getElementById('surfMax').value = '" . $_POST['surfMax'] . "'
</script>";
if (isset($_POST['prix']))
print " <script>
document.getElementById('prix').value = '" . $_POST['prix'] . "'
</script>";
This code is working perfectly except if I try to fill again new values in the form. The last values stayed in. I want to delete all values if we click on any input to be capable of to refill it.
How can I to do so ?
I'm editing my answer, because I finally understand your question.
You want the values of the form to still be displayed even after the form has been submitted, BUT once it's been submitted, you want the next edit attempt to clear out all its data.
Here is your solution:
<form>
<input name="name" />
<input name="email" />
<button type="submit">Submit</button>
</form>
<script>
const form = document.querySelector('form');
const inputs = form.querySelectorAll('input');
// Add event listener for once the form is submitted
form.addEventListener('submit', (e) => {
e.preventDefault();
// Once submitted, add event listener to the form for the next edit
function onKeyUp({ target }) {
// Grab character user typed so it's not lost
const char = target.value[target.value.length - 1];
// Clear out all the form inputs
[...inputs].forEach((input) => (input.value = ''));
// Put the typed character back in its place
target.value = char;
// Remove this event listener now
form.removeEventListener('keyup', onKeyUp);
}
form.addEventListener('keyup', onKeyUp);
});
</script>Also, maybe it could help you, but you can get a nice clean object with all your form's inputs in object format (as long as each input has a name attribute) using FormData:
<form>
<input name="name" />
<input name="email" />
<button type="submit">Submit</button>
</form>
<script>
const form = document.querySelector('form');
const inputs = form.querySelectorAll('input');
// Add event listener for once the form is submitted
form.addEventListener('submit', (e) => {
e.preventDefault();
const jsonFormData = Object.fromEntries([...new FormData(e.target)]);
console.log(jsonFormData);
});
</script>You can use
document.getElementById("myForm").reset();
Just add a reset button after the submit button
<input type="reset" value="Reset form" />
By the way, your code is vulnerable to XSS.