Empty the form and close modal

I Need Help
1

I have a form in a modal. I would like to empty the already filled fields and close the modal. How does that work?

2

Would you like to reset the form and then close the modal in one step?

Or would a button for resetting suffice? I couldn’t find one in the Blocs form templates, or perhaps I overlooked it.
But you could use the HTML widget to insert a button

<button type="reset">Reset</button>

It will look different, but you can customize it by using a common class for all buttons.

If you want to do both in one step, it won’t work without JavaScript. Do you use jquery ?

3

I do now :wink:

I found a solution with AI.

  1. Step:
    Custom interaction “call javaScript” by using this script
    "const form = document.getElementById(‘form_1’);
    const inputs = form.getElementsByTagName(‘input’);
    for (let input of inputs) {
    input.value = ‘’;
    }

const textareas = form.getElementsByTagName(‘textarea’);
for (let textarea of textareas) {
textarea.value = ‘’;
}

const selects = form.getElementsByTagName(‘select’);
for (let select of selects) {
select.selectedIndex = 0;
}"

2.Step:
toggle modal.

That’s it.

Thank you Blocs-Freak

4

@Bootsie much easier without AI:

document.getElementById("form_1").reset();
2 Likes
5

It should be added and clarified that HTMLFormElement.reset() simply restores a forms default values, anything that is pre-filled will not be cleared / emptied. The same holds true for button type="reset". Either approach just restores each item to its initial “default” value. If anything is pre-filled those will need explicitly cleared / emptied, if that is the desire.

If users don’t make pre-filled form aspects then its not an issue. :+1:

1 Like
6

Thank you Jannis,
the result is the same but your script is much cleaner and easier.

1 Like
7

That’s exactly what I’m trying to achieve.
And Jannis’ script does exactly this.

Thank you both.

1 Like
8

Then either of the reset approaches mentioned above will work and yield the same result of restoring form controls to their initial values.

HTML : <input type="reset"> - HTML | MDN
Javascript : HTMLFormElement: reset() method - Web APIs | MDN

1 Like
9

Rather quiet around the forum lately, so re-read this thread …

Not sure about within Blocs but with vanilla Bootstrap, a button inside a modal:

<button type="reset" data-bs-dismiss="modal" class="btn btn-secondary">Reset & Close</button>

Two key aspects:
Reset: type="reset"
Close: data-bs-dismiss="modal"

No extra JS needed, if thats all you wan’t and if it can be done in Blocs.

1 Like