illogicaljake illogicaljake - 3 months ago 9
Javascript Question

Checking array elements using "if $(element).is(...)"

Using jQuery, I'm trying to iterate over form elements on a page and break them down into arrays for each input type.

My code so far isn't meant to cover every possible type, but right now every element is pushed to the

buttons
list.

Here's my jQuery code:

function buildForm(elem) {
var formElements = [],
buttons = [],
radios = [],
checkboxes = [],
selects = [],
textareas = [],
texts = [];

formElements.push($(elem).find('input, textarea, select'));

$.each(formElements, function(index, el) {
if ($(el).is('input[type="submit"],input[type="clear"]')) {
buttons.push($(el));
} else if ($(el).is('input[type="radio"]')) {
radios.push($(el));
} else if ($(el).is('input[type="checkbox"]')) {
checkboxes.push($(el));
} else if ($(el).is('select')) {
selects.push($(el));
} else if ($(el).is('textarea')) {
textareas.push($(el));
} else if ($(el).is('input[type="text"]')) {
texts.push($(el));
}
});
}


EDIT: And a JSFiddle with HTML: https://jsfiddle.net/jakehamiltonaimia/mLd69mhc/

Any other tips to clean this up are welcomed, but not required. :)

Answer

I don't see the point in selecting all the elements just to loop through them and split them off

function buildForm(elem) {
    var element = $(elem),
        buttons = element.find('button[type="submit"],button[type="clear"]'),
        radios = element.find('input[type="radio"]'),
        checkboxes = element.find('input[type="checkbox"]'),
        selects = element.find('select'),
        textareas = element.find('textarea'),
        texts = element.find('input[type="text"]'),
        allItems = [];
  
  // if you need all items in one array then you can merge them
  $.merge(allItems, buttons);  
  $.merge(allItems, radios);
  $.merge(allItems, checkboxes);
  $.merge(allItems, selects);
  $.merge(allItems, textareas);
  $.merge(allItems, texts);
}

buildForm('.bootstrap-iso');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
    <form method="post">
     <div class="form-group ">
      <label class="control-label " for="name">
       Name
      </label>
      <input class="form-control" id="name" name="name" type="text"/>
     </div>
     <div class="form-group ">
      <label class="control-label requiredField" for="email">
       Email
       <span class="asteriskField">
        *
       </span>
      </label>
      <input class="form-control" id="email" name="email" type="text"/>
     </div>
     <div class="form-group ">
      <label class="control-label " for="subject">
       Subject
      </label>
      <input class="form-control" id="subject" name="subject" type="text"/>
     </div>
     <div class="form-group ">
      <label class="control-label " for="message">
       Message
      </label>
      <textarea class="form-control" cols="40" id="message" name="message" rows="10"></textarea>
     </div>
     <div class="form-group ">
      <label class="control-label ">
       Check all that apply
      </label>
      <div class=" ">
       <div class="checkbox">
        <label class="checkbox">
         <input name="checkbox" type="checkbox" value="First Choice"/>
         First Choice
        </label>
       </div>
       <div class="checkbox">
        <label class="checkbox">
         <input name="checkbox" type="checkbox" value="Second Choice"/>
         Second Choice
        </label>
       </div>
       <div class="checkbox">
        <label class="checkbox">
         <input name="checkbox" type="checkbox" value="Third Choice"/>
         Third Choice
        </label>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <label class="control-label ">
       Select a Choice
      </label>
      <div class="">
       <div class="radio">
        <label class="radio">
         <input name="radio" type="radio" value="First Choice"/>
         First Choice
        </label>
       </div>
       <div class="radio">
        <label class="radio">
         <input name="radio" type="radio" value="Second Choice"/>
         Second Choice
        </label>
       </div>
       <div class="radio">
        <label class="radio">
         <input name="radio" type="radio" value="Third Choice"/>
         Third Choice
        </label>
       </div>
      </div>
     </div>
     <div class="form-group ">
      <label class="control-label " for="select">
       Select a Choice
      </label>
      <select class="select form-control" id="select" name="select">
       <option value="First Choice">
        First Choice
       </option>
       <option value="Second Choice">
        Second Choice
       </option>
       <option value="Third Choice">
        Third Choice
       </option>
      </select>
     </div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary " name="submit" type="submit">
        Submit
       </button>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
</div>

Comments