clear all input text elements and move focus to the first one

Question

This Meteor client code tries to clear all textarea and input elements as sell as moves the focus to the first of those elements on the page.
Sometimes it fails to work if no "textarea" on the page. Any idea how to fix it?

$('textarea, input').val('');
$('textarea, input').first().focus();

<div id="main">
  <form>
    <button class="open" style="visibility:hidden">Open</button>
    <form id="pener"></form>
    <p class="whole">Enter number</p>
    <input class="required whole uppercase" placeholder="Number" name="Num" type="text">
    <select class="half" data-id="df4tBwQ8EBu8ak7ms" name="rand">
        <option class="whole" value="">Select rand...</option>
        <option value="">Tl</option>
        <option value="">Ve</option>
      </select>
    <br><br>
    <div class="progress" style="display: none;">
      <div id="animate" class="progress-bar" style="width:0"></div>
    </div>
  </form>

</div>

Are these fields in a form? – Tom Hanson Sep 18 '17 at 05:34 — Tom Hanson, Sep 18 '17 at 05:34
Can you show us the html code ? – Gaëtan Rouziès Sep 18 '17 at 07:38 — Gaëtan Rouziès, Sep 18 '17 at 07:38

zer00ne · Accepted Answer · 2017-09-19T05:46:56.927

There's a difference between clearing a <form> and resetting a <form>. In the demo, Form C and D demonstrate that difference. I thought the second half of question involving .focus() would be easy, but it actually has an unexpected requirement. The element that we want to focus on needs to have tabindex attribute specified.

Details are commented in demo

Demo

input {
  font: inherit;
  width: 12ch;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title></title>
  <style></style>
</head>

<body>
  <header> </header>
  <section>
    <form id='formA'>
      <label>Form A</label>
      <textarea>Form control field values that are written 
    within the source HTML are default values</textarea>
      <input value='Default'>
      <input value=''>
      <input value='Default'>
      <textarea>Default</textarea>
      <p>With textareas...</p>
    </form>
    <hr>
    <form id='formB'>
      <label>Form B</label>
      <input value='Default'>
      <input value='Default'>
      <input value=''>
      <p>...without textareas</p>
    </form>
    <hr>
    <form id='formC'>
      <label>Form C</label>
      <input value=''>
      <input value='Default'>
      <input value='Default'>
      <ol>
        <li>Type anything in the first input of Form C</li>
        <li>Purpose: Determine what clearing a form does.</li>
        <li>Results: All fields are emptied (cleared)</li>
      </ol>
    </form>
    <hr>
    <form id='formD'>
      <label>Form D</label>
      <input value=''>
      <input value='Default'>
      <input value='Default'>
      <ol>
        <li>Type anything in the first input of Form D</li>
        <li>Purpose: Determine what reseting a form does.</li>
        <li>Results: The text typed in the first input is cleared, but the remaining inputs with default values remain.</li>
      </ol>
    </form>
    <hr>
    <hr>
    <fieldset id='btnGrp'>
      <input type='button' value='CLEAR A' data-id='1'>
      <input type='button' value='CLEAR B' data-id='2'>
      <input type='button' value='CLEAR C' data-id='3'>
      <input type='button' value='RESET D' data-id='4'>
    </fieldset>
  </section>
  <footer>&nbsp;</footer>
  <script>
    function clearFields(x) {

      /* Use HTMLFormControlsCollection to gather all forms
 || and their form controls (<input>, <textarea>, etc.)
 || Array.from() is then used to make the HFCC into a
 || real array.
  || An integer is passed to determine which <form> 
 || will be processed by it's index.
 */
      const F = Array.from(document.forms[x].elements);

      /* Run each FC (Form Control) through a loop
      || that calls an anonymous function...
      */
      F.forEach(function(field, index) {

        // Clear FC value
        field.value = '';

        // If this is the first FC in the array...
        if (index === 0) {

          /* SET TABINDEX TO A VALUE OF -1 OR MORE 
          || Without tabindex, the FC cannot gain focus
          || programmatically.
          */
          field.setAttribute('tabindex', '0');

          // Focus on said FC
          field.focus();
        }
      });
    }

    // Register the click event on fieldset#btnGrp...
    document.getElementById('btnGrp').addEventListener('click', function(e) {

      // Reference the clicked id
      var tgt = e.target;

      // Get the data-id of the button that was clicked (e.target)
      var ID = Number(e.target.getAttribute('data-id'));

      // if clicked button (e.target) is the forth one...
      if (ID === 4) {

        /* Using HFCC to reference button and call the reset()
        || method on the fourth <form> 
        || Form C and D demonstrates the difference between
        || clear and reset
        */
        document.forms[3].reset();
        tgt.setAttribute('tabindex', '0')
        tgt.focus();
      } else {
        clearFields(ID - 1);
      }
    });
  </script>
</body>

</html>

score 0 · Answer 2 · answered Sep 18 '17 at 05:44

0

You can reset all the form fields using this line

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

Then just focus first element as you have

answered Sep 18 '17 at 05:44

Tom Hanson

873
10
39

score 0 · Answer 3 · answered Sep 18 '17 at 08:55

0

Assign id to your form , e.g. <form id="myForm">

$("#myForm")[0].reset();

This will reset entire form irrespective of whatever it contains.

answered Sep 18 '17 at 08:55

Ankur Soni

5,725
5
50
81

clear all input text elements and move focus to the first one

3 Answers3

Demo