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:

https://preview.webflow.com/preview/reset-button?utm_medium=preview_link&utm_source=designer&utm_content=reset-button&preview=c5d35cfd6a5fa60088c269034c090eac&mode=preview


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:

image

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:

image


Here’s the working example:

2 Likes

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