How do I control input behavior over many input elements with different name attributes?

Question

My JavaScript skills are a bit green, but I am trying to improve the following:

I am currently using a script to effect a single input element in a form by the input name attribute:

HTML:

<input type="number" class="form-control" 
     id="floatingInputGrid" 
     name="hoursstagingbudget" value="0" >
<label for="floatingInputGrid">Hours Staging Budget</label>

JavaScript:

var nameElement = document.forms.inputform.hoursstagingbudget

  function nameFocus(e) {
    var element = e.target || window.event.srcElement;
    if ( element.value == "0" )
      element.value = "";
  }

  function nameBlur(e) {
    var element = e.target || window.event.srcElement;
    if ( element.value === "" )
      element.value = "0";
  }
  
  if ( nameElement.addEventListener ) {
    nameElement.addEventListener("focus", nameFocus, false);
    nameElement.addEventListener("blur", nameBlur, false);
  } else if ( nameElement.attachEvent ) {
    nameElement.attachEvent("onfocus", nameFocus);
    nameElement.attachEvent("onblur", nameBlur);
  }

I want all the number type inputs to behave this way - I'm using document.form...is there a 'type' method or just the 'name' method to use this?

If not, I was thinking I would use an array of the input names, but I'm not having much luck applying that idea either.

Looking for the smartest way to approach this and expand beyond the one named input in the best DRY approach possible. Thanks in advance.

PhoenixXKN · Accepted Answer · 2021-09-25 14:32:37Z

1

I would use DOM (Document Object Model) to get all inputs and attach the event listener (using document.forms etc. isn't recommended) :

var inputs = document.getElementById("yourformidhere").getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
   var currentElement = inputs[i];
   if(currentElement.addEventListener) {...};
   else if (currentElement.attachEvent) {...};
}

Here's a tutorial on how to use DOM if you're interested

answered Sep 25, 2021 at 14:32

PhoenixXKN

928 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Todd Brannon Over a year ago

Thanks for this! Works like I needed. Broke me out of my tunnel vision!

schu34 · Accepted Answer · 2021-09-25 14:36:09Z

The best thing would probably be to use document.querySelectorAll (docs). This will return you a list (not an array) of all the elements that match the css selector you pass in. Assuming all your inputs have the class="form-control" this code should do what you described.

  const inputElements = document.querySelectorAll(".form-control");
  for(let i = 0; i < inputElements.length; i++){
      if ( nameElement.addEventListener ) {
          inputElements[i].addEventListener("focus", nameFocus, false);
          inputElements[i].addEventListener("blur", nameBlur, false);
      } else if ( nameElement.attachEvent ) {
          inputElements[i].attachEvent("onfocus", nameFocus);
          inputElements[i].attachEvent("onblur", nameBlur);
      }
   }

Todd Brannon · Accepted Answer · 2021-09-25 18:00:37Z

1

FWIW, in my case I needed this only for "number" type inputs and this is the eventual solution that worked (extending PhoenixXKN's answer a bit):

var inputs=document.getElementById("inputform").getElementsByTagName("input");

  for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'number') {
      var currentElement = inputs[i];
      if(currentElement.addEventListener) {...}
      else if (currentElement.attachEvent) {...};
    }    
  }

answered Sep 25, 2021 at 18:00

Todd Brannon

1823 silver badges17 bronze badges

Collectives™ on Stack Overflow

How do I control input behavior over many input elements with different name attributes?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related