Contact|Frittery

Reset button to clear form in html

A working fiddle based on your needs is here — http://jsfiddle.net/hwpmeu6d/ Solution 2: Your problem sounds similar to this one: reset value of multiple (but not all) form fields with jQuery in one line You could solve it with the same jQuery. id attribute is added to the reset button originally & the form to access them easily Then assign a click event on the button as follows Below is the code that helps resetting all types of form elements , you can keep whatever you wish to reset and remove which you don`t want to be reset.

Clearing a portion of a HTML FORM (Reset button)

Reset button does not reset part of a form , if you need to reset a portion of a form using the button you can try using jquery for this like

Change the reset button to a simple button , id attribute is added to the reset button originally & the form to access them easily

Then assign a click event on the button as follows

Below is the code that helps resetting all types of form elements , you can keep whatever you wish to reset and remove which you don`t want to be reset.

$('#my-form').find('input:text, input:password, select, textarea').val(''); $('#my-form').find('input:radio, input:checkbox').prop('checked', false); 

A working fiddle based on your needs is here — http://jsfiddle.net/hwpmeu6d/

Your problem sounds similar to this one: reset value of multiple (but not all) form fields with jQuery in one line

You could solve it with the same jQuery.

Reset button to clear form fields, Simple Solution · The event should be onclick and not onkeydown . · You have to trigger the reset before changing the value of the input otherwise

How to Reset All Values in an HTML form

Adding a Reset Button to Clear a Form

Build online database apps without coding. Try for FREE: https://pages.caspio.com/free-trialIn this Duration: 1:56

How to create HTML form with reset button

How to create HTML form with reset button. Please subscribe to the channel for more videos Duration: 10:46

Clear form values with reset button

may a little bit more you have to do

But his may help-Using Jquery

Edited Version:    "> 
Submit 

Orginal Version:

How to reset a form using jQuery with .reset() method?, JavaScript reset(): The reset() method resets the values of all elements in a form (same as clicking the Reset button).

How to clear javascript validation error messages with the reset button

Don’t reset them manual by repeating code. Define a custom reset function which iterates over error messages and empty all of them:

Also don’t put any script tag in your head tag. Read more here

function resetForm() < var elems = document.querySelectorAll(".text-danger"); elems.forEach(itm =>< document.getElementById(itm.id).innerHTML = '' >) > function validation() < var formFname = document.getElementById("fname").value; var formLname = document.getElementById("lname").value; var formEmail = document.getElementById("email").value; var formNumber = document.getElementById("pnumber").value; //Validate first name if (formFname.length == 0) < document.getElementById("fnameMessage").innerHTML = "You did not enter your first name" > //Validate last name if (formLname.length == 0) < document.getElementById("lnameMessage").innerHTML = "You did not enter your last name" > //Validate email if (formEmail.length == 0) < document.getElementById("emailMessage").innerHTML = "You did not enter your email" > else < var regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w)+$/; if (regex.test(formEmail) === false) < document.getElementById("emailMessage").innerHTML = "Please enter a valid email" > > //Validate phone if (formNumber.length == 0) < document.getElementById("phoneMessage").innerHTML = "You did not enter your phone number" > else if (formNumber.length != 10) < document.getElementById("phoneMessage").innerHTML = "Phone Number must be exactly 10 digits" return false; > else return true; >

         
General Enquiry Form 
 
First Name 
 
 
Last Name 
 
 
Email 
 
 
Phone 
 
 
Message 
 
 
 
Submit Reset 
 
  
 
   

You need to call the eraseText function separately like mentioned below

Источник

How to create a button to clear the input field

It’s a good idea to allow users to clear the input with push of a button. Lets look at how you can add a clear button to the input field.

The first thing you need to know is that the input tag with the type=»search» has a clear button by default.

 type="search" placeholder="Search. " /> 

The default clear button will appear once user has typed something in to the input field.

Markup

However it’s not working in all browsers, Firefox doesn’t have such functionality.

Also you may want to add clear button to other input types, like text , email , etc.

To add a button we’ll need to slightly modify the HTML.

💡 NOTE: If it’s a search type input, be aware that you might want to display a search icon as well.

One way to do that is if it’s a standalone input field, you can wrap it in a form tag. Or if it’s a single input already inside a form you can add a button tag with reset type.

For close (cross) charachter we’ll use an HTML entity, times symbol — “×”. It’s a simple and quick way to show a close character. Ofcourse you can also use a font or an SVG.

The reset button, will reset all form values, in this particular case it will clear the one and only input field. The main benefit is that you don’t need to add any additional JavaScript to clear the field. Form reset is a native behavior.

 class="clear-input-container">  class="clear-input" type="text">  class="clear-input-button" type="reset" aria-label="Clear input" title="Clear input" >×  

If you have a specific input you want to clear, the idea is similar. Wrap input tag inside a div and add a button.

 class="clear-input-container">  class="clear-input" type="text">  class="clear-input-button" aria-label="Clear input" title="Clear input" >×  

In both cases, input and button are contained in a single wrapper element.

Styling

Whether you choose to use form or div element as a container the CSS will be the same.

First we need to set container element to have a position: relative , so that we can align the clear button later.

And set it to display: inline-block so that it takes the size (width and height) of the input .

.clear-input-container  position: relative; display: inline-block; > 

The clear button has to be positioned reative to the container with position: absolute . Now we can set it to be at the end of the input , which is right side for LTR direction.

Additionally to positioning properties, we need to style the visual appearance of the button.

.clear-input-button  /* button position */ position: absolute; right: 4px; top: 4px; bottom: 0; /* button appearane */ justify-content: center; align-items: center; width: 16px; height: 16px; appearance: none; border: none; border-radius: 50%; background: gray; margin: 0; padding: 2px; color: white; font-size: 13px; cursor: pointer; /* hide the button initially */ display: none; > .clear-input-button:hover  background: darkgray; > 

We’ll hide the button to make it visible only when use input a value. We’ll add a custom class with JavaScript to the input field if if has a value.

And we’ll set some styles to show the clear button with the touched input.

.clear-input--touched:focus + .clear-input-button, .clear-input--touched:hover + .clear-input-button, .clear-input--touched + .clear-input-button:hover  display: inline-flex; > 

Functionality

To make the button visible on input value change lets add an event listener, which will add a custom class name. and toggle on focus (if there’s a value)

const input = document.querySelector(".clear-input") const handleInputChange = (e) =>  if (e.target.value && !input.classList.contains("clear-input--touched"))  input.classList.add("clear-input--touched") > else if (!e.target.value && input.classList.contains("clear-input--touched"))  input.classList.remove("clear-input--touched") > > input.addEventListener("input", handleInputChange) 

Finally, we need to clear the input on button click.

If you’re using the form with a button type reset , then you don’t need additional JavaScript.

Otherwise lets add an event listener for clear button.

const input = document.querySelector(".clear-input") const clearButton = document.querySelector(".clear-input-button") const handleButtonClick = (e) =>  input.value = '' input.focus() input.classList.remove("clear-input--touched") > clearButton.addEventListener("click", handleButtonClick) 

As you can see from the code above, on button click, we set the input value to an empty string.

Additionally, we leave input focused and remove the clear-input—touched class to hide the clear button.

Demo

You can find a full demo with a complete code examples on my CodePen:

See the Pen Untitled by Nikita Hlopov (@nikitahl) on CodePen.

Источник

Html form clear form button

elements of type reset are rendered as buttons, with a default click event handler that resets all inputs in the form to their initial values.

Try it

Note: You should usually avoid including reset buttons in your forms. They’re rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button).

Value

An element’s value attribute contains a string that is used as the button’s label. Buttons such as reset don’t have a value otherwise.

Setting the value attribute

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

Omitting the value attribute

If you don’t specify a value , you get a button with the default label (typically «Reset,» but this will vary depending on the user agent):

Using reset buttons

buttons are used to reset forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use , or better still, a element.

A simple reset button

We’ll begin by creating a simple reset button:

form> div> label for="example">Type in some sample textlabel> input id="example" type="text" /> div> div> input type="reset" value="Reset the form" /> div> form> 

Try entering some text into the text field, and then pressing the reset button.

Adding a reset keyboard shortcut

To add a keyboard shortcut to a reset button — just as you would with any for which it makes sense — you use the accesskey global attribute.

In this example, r is specified as the access key (you’ll need to press r plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those).

form> div> label for="example">Type in some sample textlabel> input id="example" type="text" /> div> div> input type="reset" value="Reset the form" accesskey="r" /> div> form> 

The problem with the above example is that there’s no way for the user to know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn’t interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it’s not a complete solution for accessibility purposes.

Disabling and enabling a reset button

To disable a reset button, specify the disabled attribute on it, like so:

input type="reset" value="Disabled" disabled /> 

You can enable and disable buttons at run time by setting disabled to true or false ; in JavaScript this looks like btn.disabled = true or btn.disabled = false .

Validation

Buttons don’t participate in constraint validation; they have no real value to be constrained.

Examples

We’ve included simple examples above. There isn’t really anything more to say about reset buttons.

Technical summary

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 12, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник