How can I clear all texts after pushing submit button in a form?

Question

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 ?

This may help for jQuery: https://stackoverflow.com/questions/6653556/jquery-javascript-function-to-clear-all-the-fields-of-a-form .And this other one on pure JS: https://stackoverflow.com/questions/569357/clear-all-html-fields-using-javascript — Heroselohim, Mar 29 '22 at 21:47
_Side note:_ Why don't you just put the default values from PHP into the HTML inputs directly instead of doing it through JS? — M. Eriksson, Mar 29 '22 at 21:50

mstephen19 · Answer 1 · 2022-03-29T21:58:58.250

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>

Hi mstephen19. Thank's for the answer and especially because you understood my question. BRAVO !!! (It was complicated to explain). Anyway, I'm going to try what you wrote. Bye. — alex000111, Mar 30 '22 at 14:39
Hi. I tried the code. I adapted it to my website and it worked perfectly. Thank's again mstephen19 and all of you actually to your answer. See you soon. Bye. — alex000111, Mar 31 '22 at 14:30

score 0 · Answer 2 · edited Mar 30 '22 at 04:25

0

You can use

document.getElementById("myForm").reset();

edited Mar 30 '22 at 04:25

Henry Ecker

34,399
18
41
57

answered Mar 29 '22 at 22:05

Gotzi

39
4

score 0 · Answer 3 · answered Mar 29 '22 at 22:31

0

Just add a reset button after the submit button

<input type="reset" value="Reset form" />

By the way, your code is vulnerable to XSS.

answered Mar 29 '22 at 22:31

Leao Augusto

1

Hi. Thank's Leao for the comment but in my version, I added the function "htmlspecialchars" to all the $_POST values. – alex000111 Mar 30 '22 at 14:30

How can I clear all texts after pushing submit button in a form?

3 Answers3