I have fancy looking jQuery Multiple checkbox/selectbox list script.
Look HERE for demo.
This is domain availability lookup form.
Issue is I am getting value of <input type="text" name="domain" size="20"/> in search
results for unchecked checkbox.
It should be NO RESULTS FOR UNCHECKED CHECKBOX.
Here is script :
(function(jQuery) {
jQuery.fn.custSelectBox = function(options){
//css names
var classselectbox = "selectbox";
var selectbox = "." + classselectbox;
var selectboxoptions_wrap = ".selectboxoptions_wrap";
var hideitem = "hideitem";
var classselected = "selected";
var classselectboxopen = "selectboxopen";
var classselectboxfoot ="selectboxfoot";
var selectboxfoot = "." +classselectboxfoot;
var elmValue = ".elmValue";
var defaults = {
isscrolling: true, //scrolls long lists
scrollminitems: 15, //items before scrolling
scrollheight: 150, //height of scrolling window
preopenselect: true, //opens prechecked select boxes
hoverstyle: "hover", //css hover style name
openspeed: "normal", //selectbox open speed "slow","normal","fast" or numbers 1000
alldisabled: false, //disables the selectbox
selectwidth: "auto", //set width of selectbox
wrappername: ".select_wrap"
};
//override defaults
var opts = jQuery.extend(defaults, options);
return this.each(function() {
/** FUNCTIONS **/
jQuery.fn.disable = function(thisElm){
//loop through items
for(var i=0;i<jQuery(thisElm).find("ul").find("li").length;i++)
{
if(jQuery(jQuery(thisElm).find("ul").find("li").get(i)).hasClass(classselected))
{
jQuery(jQuery(thisElm).find("ul").find("li").get(i)).addClass("selected_disable");
}
jQuery(jQuery(thisElm).find("ul").find("li").get(i)).unbind();
jQuery(jQuery(thisElm).find("ul").get(i)).find("input").attr("enabled","enabled");
}
};
//adds form elements to the selectbox
jQuery.fn.addformelms = function(thisElm){
var currElm = jQuery(thisElm);
var boxtype = jQuery(thisElm).find(selectboxoptions_wrap+ " ul").attr("class");
if(boxtype.indexOf("selectboxoptions_radio") >-1)
{
var radioVal = jQuery(currElm).find("."+classselected+" span").text();
jQuery(currElm).find(selectboxoptions_wrap).append("<input type=\"text\" id=\""+jQuery(main_currElm).attr("id")+"\" name=\""+jQuery(main_currElm).attr("name")+"\" value=\""+radioVal+"\">");
}
else
{
for(var i=0;i<jQuery(currElm).find(selectboxoptions_wrap + " li").length;i++)
{
var currInnerElm = jQuery(currElm).find(selectboxoptions_wrap + " li").get(i);
jQuery(currInnerElm).append("<input type=\"hidden\" id=\""+jQuery(main_currElm).attr("id") +"_"+ i+"\" name=\""+jQuery(main_currElm).attr("name") +"_"+ i+"\" value=\"\">");
if(jQuery(currInnerElm).hasClass(classselected))
{
var checkVal = jQuery(currInnerElm).find("span").text();
jQuery(jQuery(currElm).find(selectboxoptions_wrap + " li").get(i)).find("input").val(checkVal);
}
}
}
};
//opens selectboxs if they have pre selected options
jQuery.fn.openSelectBoxsThatArePrePopulated = function(currElm)
{
var boxtype = jQuery(currElm).find(selectboxoptions_wrap+ " ul").attr("class");
if(jQuery(selectbox).parent().find("." +boxtype).find("li").hasClass(classselected))
{
jQuery(selectbox).addClass(classselectboxopen);
jQuery(selectbox).parent().find(selectboxoptions_wrap).slideDown("normal");
jQuery(selectbox).parent().find("." +boxtype).find("li").addClass(hideitem);
}
};
jQuery.fn.scrolling = function (theElm, isOpen)
{
if(isOpen)
{
if(jQuery(theElm).parent().find(selectboxoptions_wrap+ " ul li").length >= opts.scrollminitems){
jQuery(theElm).parent().find(selectboxoptions_wrap+ " ul").css("height",opts.scrollheight).addClass("setScroll");
}
}
else{
jQuery(theElm).parent().find(selectboxoptions_wrap+ " ul").css("height","auto").removeClass("setScroll");
}
};
/** FUNCTIONS **/
//BUILD HTML TO CREATE CUSTOM SELECT BOX
var main_currElm = jQuery(this);
var wrapperElm = jQuery(main_currElm).parent();
var name = "";
var select_options = jQuery(main_currElm).find("option");
var opts_str="";
var isDisabled = jQuery(main_currElm).attr("disabled");
var isMulti = jQuery(main_currElm).attr("multiple");
var boxtype = "selectboxoptions_radio";
var disabled = "";
if(isMulti){boxtype = "selectboxoptions_check";}
if(isDisabled){disabled="disabled";}
//loop through options
for(var i=0;i<select_options.length;i++)
{
var checked="";
var currOption = jQuery(select_options).get(i);
if(i===0){
name =jQuery(currOption).text();
}
else
{
if(jQuery(currOption).attr("selected")){checked ="selected";}
opts_str = opts_str + "<li class=\""+checked +" "+disabled+"\"><span class=\"elmValue\">"+jQuery(currOption).val()+"</span>"+jQuery(currOption).text()+"</li>";
}
}
jQuery(wrapperElm).empty().html("<div class=\"selectbox\"><ul><li>"+name+"</li></ul></div><div class=\"selectboxoptions_wrap\"><ul class=\""+boxtype+"\">"+opts_str+"</ul></div>");
jQuery(wrapperElm).find(selectboxoptions_wrap +" ul").after("<div class=\""+classselectboxfoot+"\"><div></div></div>"); //add footer
if("auto" != opts.selectwidth){
jQuery(wrapperElm).find(selectbox + " ul").css({width:opts.selectwidth});
jQuery(wrapperElm).find(selectboxoptions_wrap + " ul").attr("class",boxtype).css({width:(opts.selectwidth+57) + "px"});
jQuery(wrapperElm).find(selectboxfoot + " div").css({width:opts.selectwidth + "px"});
}else{
jQuery(wrapperElm).find(selectboxoptions_wrap + " ul").attr("class",boxtype).css({width:(jQuery(wrapperElm).find(selectbox + " ul").width()+57) + "px"});
jQuery(wrapperElm).find(selectboxfoot + " div").css({width:jQuery(wrapperElm).find(selectbox + " ul").width() + "px"});
}
if(isDisabled){jQuery.fn.disable(jQuery(wrapperElm).find(selectboxoptions_wrap));}
var thisElement = jQuery(opts.wrappername);
//bind item clicks
jQuery(selectboxoptions_wrap+ " ul li").unbind().click( function() {
if(jQuery(this).attr("class").indexOf("disabled") < 0)
{
var id;
var boxtype = jQuery(this).parent().attr("class");
if(boxtype.indexOf("selectboxoptions_radio") >-1)
{
if(!jQuery(this).hasClass(classselected))
{
id = jQuery(this).find(elmValue).text();
jQuery(this).parent().find("." + classselected).removeClass(classselected);
jQuery(this).addClass(classselected);
jQuery(this).parent().parent().find("input").val(jQuery(this).find(elmValue).text());
}
else
{
jQuery(this).parent().find("." + classselected).removeClass(classselected);
jQuery(this).parent().parent().find("input").val("");
}
}
else //checkbox
{
if(jQuery(this).hasClass(classselected))
{
//turn off the checkbox
jQuery(this).removeClass(classselected);
//blank out the value
jQuery(this).find("input").val("");
id = jQuery(this).find(elmValue).text();
}
else
{
//gets the value of the element
id = jQuery(this).find(elmValue).text();
jQuery(this).addClass(classselected);
jQuery(this).find("input").val(id);
}
}
}
}).hover(function(){
jQuery(this).addClass(opts.hoverstyle);
},function(){
jQuery(this).removeClass(opts.hoverstyle);
});
//bind sliding open
jQuery(thisElement).find(selectbox).unbind().toggle(
function() {
if(opts.isscrolling){jQuery.fn.scrolling(jQuery(this),true);}
//unhide li
jQuery(this).parent().find(selectboxoptions_wrap+ " ul li").removeClass(hideitem);
//makes the arrow go up or down
jQuery(this).removeClass(classselectbox).addClass(classselectboxopen);
//slides the options down
jQuery(this).parent().find(selectboxoptions_wrap).slideDown(opts.openspeed);
},
function() {
var boxtype = jQuery(this).parent().find(selectboxoptions_wrap+ " ul").attr("class");
if(jQuery(this).parent().find(selectboxoptions_wrap+ " ul li").hasClass(classselected))
{
jQuery(this).parent().find(selectboxoptions_wrap+ " ul li").addClass(hideitem);
}
else
{
//makes the arrows go up or down
jQuery(this).removeClass(classselectboxopen).addClass(classselectbox);
//slides the options up
jQuery(this).parent().find(selectboxoptions_wrap).slideUp("normal");
}
if(opts.isscrolling){jQuery.fn.scrolling(jQuery(this),false);}
});
jQuery.fn.addformelms(jQuery(wrapperElm));
if(opts.preopenselect){ jQuery.fn.openSelectBoxsThatArePrePopulated(jQuery(wrapperElm));}
if(opts.alldisabled){jQuery.fn.disable(jQuery(thisElement));}
});
};
})(jQuery);
What Is wrong ? why it is passing inputbox value for unchecked domain ?
Thanx.
I have just tested this (Firefox 3.6.6).
As a test, I entered “google” as the domain and checked “.net” and “.us” in the special selectbox.
Firebug shows that the POST action, performed when I submitted the form, had the following variables:
I then submitted the form, with a domain of “google” and no extensions selected. FireBug then showed the following parameters being POSTed:
The response which was seen in the browser, in each case, did show “Issue is I am getting value of INPUTBOX in search results for unchecked checkbox. It should be NO RESULTS FOR UNCHECKED CHECKBOX.“
If you are generating that message, it may help to just have a simple PHP page containing:
It may be that your form handler is not looking for the parameters in the correct fashion – this should show exactly what the form handler is getting.