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

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 ?

CodePudding user response：

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>

CodePudding user response：

You can use document.getElementById("myForm").reset();.

CodePudding user response：

Just add a reset button after the submit button

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

By the way, your code is vulnerable to XSS.