How to reset ONLY a single input tag in a formfield with just html5

Question

i tried the following example and my aim is to achieve that if i press the reset button, only the field in the current line will be reseted, is this possible with only html5 and no jquery/ javascript ? any ideas are welcome :)

<form action="fieldset_legend.htm">
  <fieldset>
    <legend>Absender</legend>

        <label for="vor">Ihr Vorname:</label>
        <input id="vor" size="40" maxlength="40" name="Vorname" type="text">
        <input type="reset" for="vor" value="reset">

        <label for="nach">Ihr Zuname:</label>
        <input  id="nach" size="40" maxlength="40" name="Zuname" type="text">
        <input type="reset" for="nach" value="reset">

  </fieldset>
</form>

score 1 · Answer 1 · answered Jun 22 '14 at 13:37

1

Use javascript...

function resetInput(id) {
   document.getElementById(id+"input").value="";
}

HTML:

    <label for="vor">Ihr Vorname:</label>
    <input id="vorInput" size="40" maxlength="40" name="Vorname" type="text">
    <input type="button" id="vor" onclick="resetInput(this.id) "value="reset">

    <label for="nach">Ihr Zuname:</label>
    <input  id="nachInput" size="40" maxlength="40" name="Zuname" type="text">
    <input type="button" id="nach" onclick="resetInput(this.id) value="reset">

answered Jun 22 '14 at 13:37

roee

41
8

2

you don't have a choice – roee Jun 22 '14 at 13:54
Your code only sets the field value to empty string, that is not the same like reseting the field to its previos default values – Radon8472 Feb 28 '23 at 17:04

score 0 · Answer 2 · answered Jun 22 '14 at 13:32

0

I don't believe there is a way to avoid JavaScript in this case as the input 'reset' will reset for all the elements in the form.

reset: A button that resets the contents of the form to default values.

Input elements

answered Jun 22 '14 at 13:32

Doron Sinai

1,166
3
12
28

i thought it might be somehow possible by structuring/nesting with tags, but i am running out of ideas – Dominik Zinser Jun 22 '14 at 13:36

score 0 · Answer 3 · edited Aug 11 '23 at 13:15

I found a workaround what works for me.

You need to put your fields into nested forms e.g. like this:

<form action="fieldset_legend.htm">
  <fieldset>
    <legend>Absender</legend>
      <form id="line1">
        <label for="vor">Ihr Vorname:</label>
        <input id="vor" size="40" maxlength="40" name="Vorname" type="text">
        <input type="reset" for="vor" value="reset">
      </form>

      <form id="line2">
        <label for="nach">Ihr Zuname:</label>
        <input  id="nach" size="40" maxlength="40" name="Zuname" type="text">
        <input type="reset" for="nach" value="reset">
      </form>

  </fieldset>
</form>

The reset button will only reset the "closest" form it finds, in this case it will reset only the "line1" form for the first button and the line2 form the other button.

EDIT:

I found articles where people are calling nested forms a "hack" (like this one ), because it seems not to be part of the browser standards.

So keep in mind, that this nested forms solution, could cause unexpected behavior in some browsers, because this is currently not part of the standards (even if this works since decades of years)

to be noted as this could impact layout/styling: the 1st `
` (here `id="line1"`) will not be rendered in the dom when doing so, the children of the form will be directly put at its place. — y_nk, Aug 17 '23 at 03:48

How to reset ONLY a single input tag in a formfield with just html5

3 Answers3

Linked

Related