CODEWITHSUNDEEP
javascriptformsdom
Todd Brannon
Todd Brannon

Reputation: 182

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

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.

Upvotes: 1

Views: 349

Answers (3)

Todd Brannon
Todd Brannon

Reputation: 182

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) {...};
    }    
  }

Upvotes: 1

schu34
schu34

Reputation: 985

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);
      }
   }

Upvotes: 1

PhoenixXKN
PhoenixXKN

Reputation: 92

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

Upvotes: 1

Related Questions