JQuery 1.7 $(this).attr('type') for select gives undefined instead of "select-one" - Why?

jquery html forms

16,462

Solution 1

on the jquery site you find this information

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.

so use prop('type')

Solution 2

Well, technically the select has no type attribute (and if it had one, it'd be a HTML error), so it isn't a bug but a feature of jQuery 1.7. If you want to single out the select just use any of those:

$(this).is('select') === true
$(this).filter('select').length > 0

16,462

Author by

C.O.

Updated on June 20, 2022

Comments

C.O. almost 2 years

I have an example I made with JQuery 1.4

here is the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Formularseite</title>
    <link href="style3.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="js/jquery-1.7.js" ></script>
    <script type="text/javascript" src="js/meineScripts.js" ></script>
  </head>
  <body>
<?php
if (isset($_POST['senden']))
{

}
else { ?>
    <form action="formular.php" method="POST" enctype="Multipart/Formdata"> 
      <fieldset>
        <legend>Demo1 JQuery</legend>
        <label for="auswahl1">Auswahl treffen:</label>
        <input class="grouptrigger" type="checkbox" id="auswahl1" name="daten[0]" value="true"/>
        <br/>
        <div class="auswahl1 hide_on_start">
          <label for="eineZeile">Text:</label>
          <input type="text" id="eineZeile" name="daten[1]" value=""/>
        </div>
        <input class="grouptrigger" type="radio" id="auswahl2a" name="daten[2]" value="1" />
        <label for="auswahl2a">Option 1</label>
        <input class="grouptrigger" type="radio" id="auswahl2b" name="daten[2]" value="2" />
        <label for="auswahl2b">Option 2</label>
        <input class="grouptrigger" type="radio" id="auswahl2c" name="daten[2]" value="3" />
        <label for="auswahl2c">Option 3</label>
        <div class="hide_on_start auswahl2a">
          <label for="eineZeile2a">Text Opt1:</label>
          <input type="text" id="eineZeile2a" name="daten[3]" value=""/>
        </div>
        <div class="hide_on_start auswahl2b">
          <label for="eineZeile2b">Text Opt2:</label>
          <input type="text" id="eineZeile2b" name="daten[4]" value=""/>
        </div>
        <div class="hide_on_start auswahl2c">
          <label for="eineZeile2c">Text Opt3:</label>
          <input type="text" id="eineZeile2c" name="daten[5]" value=""/>
        </div>
        <br/>
        <label for="auswahl3">Auswahl treffen:</label>
        <select name="daten[6]" id="auswahl3" class="grouptrigger">
          <option value="0" >Bitte wählen:</option>
          <option value="1" id="auswahl3a" >Eintrag</option>
          <option value="2" id="auswahl3b" >anderer Eintrag</option>
          <option value="3" id="auswahl3c" >weiterer Eintrag</option>
        </select>
        <div class="hide_on_start auswahl3a">
          <label for="eineZeile3a">Text 1:</label>
          <input type="text" id="eineZeile3a" name="daten[7]" value=""/>
        </div>
        <div class="hide_on_start auswahl3b">
          <label for="eineZeile3b">Text 2:</label>
          <input type="text" id="eineZeile3b" name="daten[8]" value=""/>
        </div>
        <div class="hide_on_start auswahl3c">
          <label for="eineZeile3c">Text 3:</label>
          <input type="text" id="eineZeile3c" name=""/>
        </div>        
      </fieldset>
      <p class="font20px"><input type="submit" name="senden" value="Abschicken"></p>
    </form>
<?php } ?>
  </body></html>

here is the js:

// Add RegExp Filter
// From: http://james.padolsey.com/javascript/regex-selector-for-jquery/
$.expr[':'].regex = function(elem, index, match) {
  var matchParams = match[3].split(','),
    validLabels = /^(data|css):/,
    attr = {
      method: matchParams[0].match(validLabels) ? 
            matchParams[0].split(':')[0] : 'attr',
      property: matchParams.shift().replace(validLabels,'')
    },
    regexFlags = 'ig',
    regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
  return regex.test(jQuery(elem)[attr.method](attr.property));
}

$(document).ready(function() {
  $('body').addClass('js');

  // Toggeling groups
  $(".grouptrigger").change( function() 
  {
    var toCheck = ":not(:checked)";
    if ($(this).hasClass('inverse'))
      toCheck = ":checked";
    var hideGroup = "."+this.id;
    // for radio buttons
    alert (" "+$(this).attr('type')+' '+this.id);
    if ($(this).attr('type') == "radio")
    {
      var hideGroupParent=hideGroup.substr(0,hideGroup.length-1);
      try { $("div:regex(class, .*"+hideGroupParent+".*)").hide(0); } catch (err) {}
      if ($("#" + this.id).is(":checked")) 
        $(hideGroup).show(0);
    }
    // for select lists
    else if ($(this).attr('type') == "select-one")
    {
      var hideGroupParent=this.id;
      hideGroup = '.'+$('#' + this.id + ' :selected').attr('id');
      try { $("div:regex(class, .*"+hideGroupParent+".*)").hide(0); } catch (err) {}
      $(hideGroup).show(0);
    }
    else
    // for checkboxes
    {
      if ($("#" + this.id).is(toCheck)) 
        try { $(hideGroup).hide(100); } catch (err) {}
      else
        $(hideGroup).show(100);
    }
  });
  $(".grouptrigger").change();
});

The problem with JQuery 1.7 is that

alert (" "+$(this).attr('type')+' '+this.id);

yields 'undefined' for the select instead of 'select-one' as was the case with JQuery 1.4. Is that a bug or is there another way of detecting the select element?