I have a couple of <SELECT> elements in a form flavored with jquery Chosen plugin
[URL unfurl="true"]http://jdramaix.github.io/gwtchosen/[/url]
I also have html5 placeholder shim specifically for IE9 compatibility
[link ] [/url]
The exact code for the placeholder is below.
//To call this plugin just add the following to your page
Both html5 placeholder shim and Jquery Chosen plugin work very well.
The issue is that we also have to use the below script to reset input textboxes as well as the those <SELECT> elements.
When you click the reset button, it resets the <SELECT> elemnents and returns them to their original states.
This is fine.
However, all input textboxes with placeholders are cleared and are blank.
Any idea what to change to return not just the <SELECT> elements but also the input boxes to their original states prior to the reset invocation?
Thanks much in advance
[URL unfurl="true"]http://jdramaix.github.io/gwtchosen/[/url]
I also have html5 placeholder shim specifically for IE9 compatibility
[link ] [/url]
The exact code for the placeholder is below.
Code:
(function($) {
$.fn.placeholder = function() {
if(typeof document.createElement("input").placeholder == 'undefined') {
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
}
})(jQuery);
//To call this plugin just add the following to your page
Code:
$.fn.placeholder();
Both html5 placeholder shim and Jquery Chosen plugin work very well.
The issue is that we also have to use the below script to reset input textboxes as well as the those <SELECT> elements.
Code:
<form...>
<div align="center"><input type="reset" value="Reset">
</form>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
$('select').chosen();
$("input[type='reset'], button[type='reset']").click(function(e){
setTimeout(function(){ $("select").trigger("chosen:updated"); }, 50);
});
});
});//]]>
</script>
When you click the reset button, it resets the <SELECT> elemnents and returns them to their original states.
This is fine.
However, all input textboxes with placeholders are cleared and are blank.
Any idea what to change to return not just the <SELECT> elements but also the input boxes to their original states prior to the reset invocation?
Thanks much in advance