Menu
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?
519
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')
194
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
