'determining input vs textarea in jQuery

I wish to iterate through a form, adding each element to an area. The problem is that some of these elements are select, input, and textboxes. I know that I can use :input to solve the problem here (though, I don't really need to). The issue is that I'm having trouble determining how I could see whether or not the element is a textarea, input, select, etc. I need to do this properly because, as far as I know, jQuery("input#someinput").val() works great for inputs, but for a textarea I may need jQuery("textarea#sometexarea").text(). I'm not sure if this exists...

Anyway, here's my function so far:

function getAllFormElements(id) {

    var elements = new Array();

    jQuery(id).children().map(function(){

        for (var index = 0; index < children.length; index++) {

            elements[i] = jQuery(children[i]).val();

        }

    })

        return elements;
}
jqueryforms


Solution 1:[1]

val() works equally well with <input>, <select> and <textarea> elements.

If you still want to determine the actual type of elements matched by the :input selector, you can use is() with element selectors:

$(":input").each(function() {
    var $this = $(this);
    if ($this.is("input")) {
        // <input> element.
    } else if ($this.is("select")) {
        // <select> element.
    } else if ($this.is("textarea")) {
        // <textarea> element.
    }
});

Solution 2:[2]

You should be able to use jQuery's .is() function - just pass a selector to .is() and it will return true if the element matches the selector. So, to see if you had a textarea, you would just check:

if($(this).is("textarea")) { doStuff(); }

http://api.jquery.com/is/

Solution 3:[3]

Look at the nodeName property.

jQuery(id).children().map(function(){
    console.log( children[i].nodeName.toLowerCase() );
});

You can but don't have to use the is method from jQuery (overhead here).

Solution 4:[4]

$.val() works for both inputs and text areas. You only need $.text() for things like divs that don't have a "value" per se.

Solution 5:[5]

Are you maybe looking for the $(children[i]).attr("tagName"); , which returns the tag of the element, either being select, input, or textarea?

Solution 6:[6]

Looking at the documentation for jQuery, you can easily get all the form inputs using $(:input) : http://api.jquery.com/input-selector/

Description: Selects all input, textarea, select and button elements. The :input selector basically selects all form controls.

.val() also works with text areas, but there is a caveat ... see the docs for reference: http://api.jquery.com/val/

Frederic posted his answer as I was writing this, and his solution of using is() certainly proves out.

Solution 7:[7]

If you are also interested in the type of "input" (input, checkboxes or radio). You need to dig a bit deeper:

function test(){
  $(":input").each(function() {
    var $this = $(this);
    if ($this.is("input")) {
      type=$this.attr('type');
        $(document.body).append(type+" <br />");
    } else if ($this.is("select")) {
        $(document.body).append("select <br />");
    } else if ($this.is("textarea")) {
        $(document.body).append("textarea <br />");
    }
  });
} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="test()">get types</button><br />
  <input type="text" value="text input"><br />
  <input type="number" value="12345"><br />
  <textarea>text area</textarea><br />
  <select>
    <option>option 1</option>
    <option>option 2</option>
  </select><br />
  <input type="checkbox" checked> checkbox<br />
  <input type="radio"> radio button<br />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 bfink
Solution 3
Solution 4 arb
Solution 5 Jose Vega
Solution 6 lhagemann
Solution 7

Related Questions