Streaming live at 10am (PST)

How to make 'clear text input' button?

Hi all!
I have a very simple question but I didn’t find anything on this theme.
How to make a button to clear an input text field from the previously entered text?

Screenshot 2020-06-10 at 20.29.18

1 Like

I’m feeling helpful today. Here, have a present:

Top example:

I’ve used an HTML embed. Open up that embed or see below for the code. This Reset button will reset everything within the form - use with caution as it may frustrate your site visitor if they click it by mistake:

Bottom example:

This uses Javascript in the <body> tag, like so:


Note that the reset referred to within this code is an actual button element with an id of reset - it’s not an HTML embed. Further note that the field you want this button to clear needs to have the ID set - in this case the field I want to clear is name-field, so it has an ID of name-field:


Here’s the working example:


Andy, thank you for your very detailed answer! I’ve just tried — the text input becomes clear. But my problem isn’t solved :frowning: I want to clean text in the search text field — text is deleted but after that my list doesn’t return to an initial state and doesn’t see that text field is empty :frowning:


Unfortunately I’m not sure how to achieve what you want - hopefully someone with deeper knowledge of the script required will see this and reply!

1 Like