Reset Particular Input Element in a HTML Form

Reset Particular Input Element in a HTML Form

defaultValue:

<input type="text" value="initial" id="field">
<button id="reset">reset</button>
<script type="text/javascript">
    document.getElementById('reset').onclick= function() {
        var field= document.getElementById('field');
        field.value= field.defaultValue;
    };
</script>

Available on text, password and textarea, plus defaultChecked on checkbox/radio and defaultSelected on option. Curiously, not available on hidden (except in IE, where it's considered a bug).

Clear a single form field in HTML

As far as I can tell, the previous answers to not cover the full extent of the question. The original question requests a function to be called to clear the field. However, I'm going to address this in several different ways.

This can be achieved with no JavaScript at all, but simply setting the value attribute as below:

<input type="text" placeholder="Username" name="userId" id="userId" value="" />
<input type="password" placeholder="Password" name="passwd" id="passwd" value="" />

The above will ensure that the fields are clear when the page is loaded, but using only HTML. To do this via JavaScript, multiple things have to be taken into consideration. First, a function should be defined, which needs to be called when the page is loaded.

function clearValue(id) {
    document.getElementById(id).value = "";
}

This will simply set the value to blank. However, this gets us back to the original issue. Setting onload for each element does not work, instead we must use window.onload.

window.onload = function() {
    clearValue("userID");
    clearValue("passwd");
}

This will clear each value one-by-one. However, there is an even better way to do this. JavaScript has built-in functions that make it easy to clear the entire form, or access the elements of the form by their name, even if they are the child of another element within the form. However, keep in mind that only valid input (includes textarea, etc...) fields can be accessed in this way.

So, assuming that the form's ID is myform, this would clear the entire form, no matter how many fields:

document.getElementById("myform").reset();

It's that simple. Using the form element, you can also access the fields by name, as mentioned above.

var f = document.getElementById("myform").elements;
f["userId"].value = "";
f["passwd"].value = "";

Using the above code makes it much quicker, especially if you have more fields.

Putting the JS together, it might look like this:

window.onload = function() {
    // using function
    clearValue("userID");
    clearValue("passwd");

    // or, reset entire form
    document.getElementById("myform").reset();

    // or, clear each field one-by-one
    var f = document.getElementById("myform").elements;
    f["userId"].value = "";
    f["passwd"].value = "";
}

Clear form fields with jQuery

$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

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

<input class="button" type="button" id="B2" name="B2" value="Zurcksetzen">

Then assign a click event on the button as follows

$(document).ready(function(){
    $("#B2").click(function(){
        $('#my-form').find('input:checkbox').prop('checked', false);
    });
});

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/

Clear only specific fields in HTML form when submitting

A best approach for me would be to close the form completely so I
don't have to erase the fields in the form which are going to get new
data when I try to open it again.

$("#item-form").remove();

If the hidden fields are populated from server, you can reset the form, so all form fields will be reset to value which were there during page reload.

 $('#item-form')[0].reset();

The plain JS way of doing it

document.getElementById("item-form").reset();

Updated after discussion with OP

<a href="javascript:resetForm()">Cancel</a>

function resetForm() { 
   $('#item-form')[0].reset(); 
   $(this).closest('[data-role=popup]').popup(‌​'close'); 
}

Clear and reset form input fields

The answer here depends on whether or not your inputs are controlled or uncontrolled. If you are unsure or need more info on this, check out what the official docs say about controlled components and uncontrolled components. Thanks @Dan-Esparza for providing the links.

Also, please note that using string literals in ref is deprecated. Use the standard callback method instead.

---

Clearing a form with uncontrolled fields

You can clear the entire form rather than each form field individually.

cancelCourse = () => { 
  document.getElementById("create-course-form").reset();
}

render() {
  return (
    <form id="create-course-form">
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

If your form didn't have an id attribute you could use a ref as well:

cancelCourse = () => { 
  this.myFormRef.reset();
}

render() {
  return (
    <form ref={(el) => this.myFormRef = el;}>
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

---

Clearing a form with controlled fields

If you are using controlled form fields, you may have to explicitly reset each component inside your form, depending on how your values are stored in the state.

If they are declared individually, you need to reset each one explicitly:

cancelCourse = () => { 
  this.setState({
    inputVal_1: "",
    inputVal_2: "",
    ...
    inputVal_n: "",
  });
}

render() {
  return (
    <input value={this.state.inputVal_1} onChange={this.handleInput1Change}>
    <input value={this.state.inputVal_2} onChange={this.handleInput2Change}>
    ...
    <input value={this.state.inputVal_n} onChange={this.handleInputnChange}>
  );
}

Demo below:

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      inputVal_1: "",
      inputVal_2: "",
      inputVal_3: "",
      inputVal_4: "",
      inputVal_5: "",
      inputVal_6: "",
      inputVal_7: "",
      inputVal_8: "",
      inputVal_9: "",
      inputVal_10: ""
    };
  }
  
  handleInput1Change = (e) => {
    this.setState({inputVal_1: e.target.value});
  }
  
  handleInput2Change = (e) => {
    this.setState({inputVal_2: e.target.value});
  }
  
  handleInput3Change = (e) => {
    this.setState({inputVal_3: e.target.value});
  }
  
  handleInput4Change = (e) => {
    this.setState({inputVal_4: e.target.value});
  }
  
  handleInput5Change = (e) => {
    this.setState({inputVal_5: e.target.value});
  }
  
  handleInput6Change = (e) => {
    this.setState({inputVal_6: e.target.value});
  }
  
  handleInput7Change = (e) => {
    this.setState({inputVal_7: e.target.value});
  }
  
  handleInput8Change = (e) => {
    this.setState({inputVal_8: e.target.value});
  }
  
  handleInput9Change = (e) => {
    this.setState({inputVal_9: e.target.value});
  }
  
  handleInput10Change = (e) => {
    this.setState({inputVal_10: e.target.value});
  }
  
  cancelCourse = () => { 
    this.setState({
      inputVal_1: "",
      inputVal_2: "",
      inputVal_3: "",
      inputVal_4: "",
      inputVal_5: "",
      inputVal_6: "",
      inputVal_7: "",
      inputVal_8: "",
      inputVal_9: "",
      inputVal_10: ""
    });
  }
  
  render() {
    return (
      <form>
        <input value={this.state.inputVal_1} onChange={this.handleInput1Change} />
        <input value={this.state.inputVal_2} onChange={this.handleInput2Change} />
        <input value={this.state.inputVal_3} onChange={this.handleInput3Change} />
        <input value={this.state.inputVal_4} onChange={this.handleInput4Change} />
        <input value={this.state.inputVal_5} onChange={this.handleInput5Change} />
        <input value={this.state.inputVal_6} onChange={this.handleInput6Change} />
        <input value={this.state.inputVal_7} onChange={this.handleInput7Change} />
        <input value={this.state.inputVal_8} onChange={this.handleInput8Change} />
        <input value={this.state.inputVal_9} onChange={this.handleInput9Change} />
        <input value={this.state.inputVal_10} onChange={this.handleInput10Change} />
        <input type="submit" name="saveCourse" value="Create" />
        <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} />
      </form>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

How do i make my reset function work on my input element?

Before getting to your code: If you want to reset the fields of a form to their initial values, you don't need to write any code at all. Just use an input type="reset" in the form:

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

<form><div class="container">
        <div class="cell-1" id="centerElement">            <div id="cell-1-nest-l"></div>            <div id="cell-2-nest-l"></div>            <div id="cell-3-nest-l"></div>            <div id="cell-4-nest-l"><h3>your name</h3></div>            <div id="cell-5-nest-l"></div>            <div id="cell-6-nest-l"><input type="text" class="nameStyle1 reset" id="nameInput1"></div>             </div>
        <div class="cell-2" id="centerElement" ><img onclick="getSum();" src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt="Sample Image"></div>
        <div class="cell-3" id="centerElement" >                <div id="cell-1-nest"></div>                <div id="cell-2-nest"></div>                <div id="cell-3-nest"><h3>their name</h3></div>                <div id="cell-4-nest"></div>                <div id="cell-5-nest"><input type="text" class="nameStyle1" id="nameInput2"></div>                <div id="cell-6-nest"></div>                                            </div>
        <div class="cell-4" id="result1">            <input type="date" class="dateStyle1" id="dateInput1">                </div>                        <div class="cell-5"><input type="reset" value="Reset""></div>                            <div class="cell-6" id="result2">             <input type="date" class="dateStyle2" id="dateInput2" placeholder="Their Bday">                </div>        <div class="cell-7"></div>
        <div class="cell-8"></div>
        <div class="cell-9"></div>            
</div></form>

---

Related Topics