Why second input with value attribute not being reset when I call the form's reset() method? And what is the best way to clean a form which has inputs with value attributes?
<form id="myform">
<input type="text" />
<input type="text" value="1" />
<button id="reset" name="reset" onclick="document.getElementById('myform').reset()">reset</button>
</form>You don't need JavaScript here. Just set the type attribute of the button to reset.
<form>
<input type="text" />
<input type="text" value="1" />
<button id="reset" name="reset" type="reset">reset</button>
</form>By default, a button element within a form will submit the form.
input with "1", click the reset button, and it's back to "1"...
value attribute sets the "default value" of the input for HTML's purposes. If you want it cleared completely, you will need to use JavaScript and explicitly set the value to the empty string. There is no shortcut.Using JQuery
$("#reset").on("click" , function() {
$("input[type=text]").val("");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" />
<input type="text" value="1" />
<button id="reset" name="reset" type="button">reset</button>
</form>Reset button reset form to initial values, not empty values. If you want to reset form completely, you should use empty form and then set values manually after form is placed to document. For example, apply ids to field you want to preset and then use something like
const filedValues = [{
id: 'name',
value: '1'
},
{
id: 'text',
value: 'test text'
}
];
filedValues.forEach(fieldItem => {
const {
id,
value
} = fieldItem;
document.getElementById(id).value = value;
})<form>
<input type="text" id="name" name="name" />
<input type="text" name="text" id="text" />
<button id="reset" name="reset" type="reset">reset</button>
</form>Only one line code:
this.form.querySelectorAll('input[type=text]').forEach(function(input,i){input.value='';})
See:
<form>
<input type="text" value="0"/>
<input type="text" value="1" />
<button id="reset" name="reset" onclick="this.form.querySelectorAll('input[type=text]').forEach(function(input,i){input.value='';})">reset</button>
</form>Note: no need to add type=reset to button
myformas ID in the above code?