How we can compere or check input filed type of html element with jquery

Question

Hi I am working on jquery and I am trying alert for check div's child field type . I mean check that is input field and having which type . please see my small code :

if($('#'+Gid).find("input[type=radio]"))
    alert("radio");
if($('#'+Gid).find("input[type=checkbox]"))
    alert("radio");
if($('#'+Gid).find("select"))
    alert("select");

If any field is present in div that can alert for that . Right now that is going in every condition . Please anyone help me for that . Thanks

`jQuery` object is always evaluated as `true`. Check `.length` property.. — Rayon, Jul 04 '16 at 12:00
What relevant HTML do you have that you can share with us, so that we can show you a practical answer that directly applies to a valid, relevant example. — David Thomas, Jul 04 '16 at 12:01
Hi Thanks to all guys for quick response , I will try that all :) — vibog, Jul 04 '16 at 12:03
@Rayon : I use this but that is not working if($('#'+Gid).find("input[type=text]").length()) alert("text"); — vibog, Jul 04 '16 at 12:05
@vibog – `length` is a property not a `method`, so `.length`, not `.length()` — Rayon, Jul 04 '16 at 12:06
Possible duplicate of [Is there an "exists" function for jQuery?](http://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery) — T J, Jul 04 '16 at 12:48

score 0 · Answer 1 · answered Jul 04 '16 at 12:04

You can check the field type by following

<script>
        function findInputType(formObject) {
          for (i=0; i<formObject.childNodes.length; i++) {
             if (formObject.childNodes[i].tagName == "INPUT") {
                    if (formObject.childNodes[i].type == "checkbox") {
                   alert("This is CheckBox type.")
                }
                if (formObject.childNodes[i].type == "radio") {
                   alert("This is Radio type")
                }
             }   
             if (formObject.childNodes[i].tagName == "SELECT") {
                   alert("This is Select field")
             }
          }
    </script>     

    <script>
        // method to find the input type
        findInputType(document.myform)

    </script>

I accept your answer but can we do it with more optimization that is some lengthy . Please anyone give any solution . — vibog, Jul 04 '16 at 12:13

score 0 · Accepted Answer · answered Jul 04 '16 at 12:10

Please check

var Gid = "container";

if($('#'+Gid + " > input[type=radio]").length > 0)
    console.log("Radio");
if($('#'+Gid + " > input[type=checkbox]").length > 0)
    console.log("Checkbox");
if($('#'+Gid + " > select").length > 0)
    console.log("Select");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<input type="radio" />  
  <input type="checkbox" />  
 <select></select>
</div>

Himanshu Tyagi · Answer 3 · 2016-07-04T12:29:40.660

If you are looking to find all the types of input elements including select in a div, you can do something like this :

$(function() {
  var elems = new Set(); //for collecting unique elements
  $("#myDiv input").each(function() {
    elems.add($(this).attr("type"));
  });
  if ($("#myDiv select").length > 0) elems.add("select");
  for (let item of elems) console.log(item);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv">
  <input type="radio" name="rad" />Radio
  <br/>
  <input type="checkbox" name="rad" />Checkbox
  <br/>
  <input type="text" />
  <br/>
  <select>
    <option>Select</option>
  </select>
</div>

Or change your current code to something like this :

$(function() {
  var Gid = "myDiv";
  if ($('#' + Gid + " input[type=radio]").length != 0)
    alert("radio");
  if ($('#' + Gid + " input[type=checkbox]").length != 0)
    alert("checkbox");
  if ($('#' + Gid + " select").length != 0)
    alert("select");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv">
  <input type="radio" name="rad" />Radio
  <br/>
  <input type="checkbox" name="rad" />Checkbox
  <br/>
  <select>
    <option>Select</option>
  </select>
</div>

David Thomas · Answer 4 · 2016-07-04T12:35:41.573

One approach, which should cover most use-cases, is the following:

var Gid = "container";

// here we look inside the '#container' element to find all
// elements matching the jQuery ':input' selector expression,
// which includes <select>, <input>, <textarea>,
// and then we iterate over each of the found elements (if
// any):    
$('#' + Gid).find(':input').each(function(){

  // caching the current element for repeated use:
  var el = this,

      // localName is the same as tagName, but in lowerCase,
      // for example 'INPUT' is 'input':
      tag = el.localName,

      // here we see if the current element has a 'type' property,
      // which it does if the tag is equal to 'input'; if it does
      // have a 'type' property we assign a string to tell the
      // user what that 'type' is; otherwise we return an empty
      // string instead (so that the later concatenation will
      // still work):
      hasType = tag === 'input' ? ', of type="' + el.type + '"' : '',

      // a naive check to see if we should say 'an input...' or
      // 'a select...':
      determiner = ['a','e','i','o','u'].indexOf(tag.charAt(0)) > -1 ? 'an' : 'a';
  console.log('This is ' + determiner + ': ' + tag + ' element' + hasType);
});

var Gid = "container";

$('#' + Gid).find(':input').each(function() {
  var el = this,
    tag = el.localName,
    hasType = tag === 'input' ? ', of type="' + el.type + '"' : '',
    determiner = ['a', 'e', 'i', 'o', 'u'].indexOf(tag.charAt(0)) > -1 ? 'an' : 'a';
  console.log('This is ' + determiner + ': ' + tag + ' element' + hasType);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <input type="radio" />
  <input type="checkbox" />
  <select></select>
</div>

JS Fiddle demo.

References:

JavaScript:
jQuery:
- each().
- :input selector.

How we can compere or check input filed type of html element with jquery

4 Answers4