Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted on Dec 03, 2009 23:33
open dhtmlx forum
onclick event of checkbox

Hello,

In my code i want the value of checkbox when i checked the checkbox and checkbox is in select box . i am doing some changes in dhtmlxcombo_extra.js file . and also fired onclick function but its give me "undefined" when i chekced the check the checkbox please give me solutions so i will find the value of the chexckbox onclick event. also i am fired click event on input type text and also copmbo list box but it give me "undefined". please give me solutions so i when i checked the checkob then it gives me all thevalue of checkbox. i am sending u my code also js file .



<script>



window.dhx_globalImgPath = "http://localhost/seema/combo_test/codebase/imgs/combo_select.gif";



</script>

<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxcombo.css">

<script src="codebase/dhtmlxcommon.js"></script>

<script src="codebase/dhtmlxcombo.js"></script>

<script src="codebase/ext/dhtmlxcombo_extra.js"></script>






html file




<h3>Checkbox Select</h3>

<div id="combo_zone2" style="width:200px; height:30px;" onclick="add();"></div>

<h3>Checkbox Select</h3>

<div id="combo_zone3" style="width:200px; height:30px;"></div>

<script>



var z = new dhtmlXCombo("combo_zone2", "alfa2", 200, 'checkbox');

z.loadXML("common/test.php");

var z = new dhtmlXCombo("combo_zone3", "alfa3", 200, 'checkbox');

z.addOption([[1, 1111], [2, 2222], [3, 3333], [4, 4444], [5, 5555]]);



</script>



<script language="javascript">

function add()

{

    alert("seema");

    var chk=document.getElementById('testchk[]').checked;

    var chk1 = chk.length;

    alert(chk1);

    

    

}

</script>




php files

<?php

    header("Content-type:text/xml");

    ini_set('max_execution_time', 7000);

    require_once('config.php');



    print("<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>");

?>

<?php

    $link = mysql_pconnect($mysql_host, $mysql_user, $mysql_pasw);

    $db = mysql_select_db ($mysql_db);



    if (!isset($_GET["pos"])) $_GET["pos"]=0;



    



    //print one level of the tree, based on parent_id

    //function getDataFromDB($mask){

        $sql = "SELECT DISTINCT item_nm FROM countries";

//    echo "ppp".    $sql.= " Order By item_nm LIMIT ". $_GET["pos"].",100";



        

            print("<complete>");

            $res = mysql_query ($sql);

        if($res){

            while($row=mysql_fetch_array($res)){

                print("<option value=\"".$row["item_nm"]."\">");

                print($row["item_nm"]);

                print("</option>");

            }

        }else{

            echo mysql_errno().": ".mysql_error()." at ".__LINE__." line in ".__FILE__." file<br>";

        }

        print("</complete>");

    //}

?>





dhtmlxcombo_extra.js

//v.2.5 build 91111



/*

Copyright DHTMLX LTD. http://www.dhtmlx.com

You allowed to use this component or parts of it under GPL terms

To use it on other terms or get Professional edition of the component please contact us at sales@dhtmlx.com

*/



dhtmlXCombo_imageOption = function(){this.init()};dhtmlXCombo_imageOption.prototype = new dhtmlXCombo_defaultOption;dhtmlXCombo_imageOption.prototype.setValue = function(attr){this.value = attr.value||"";this.text = attr.text||"";this.css = attr.css||"";this.img_src = attr.img_src||this.getDefImage()};dhtmlXCombo_imageOption.prototype.render = function(){if (!this.content){this.content=document.createElement("DIV");this.content._self = this;this.content.style.cssText='width:100%;overflow:hidden;'+this.css;var html = '';if (this.img_src != '')html += '<img style="float:left;" src="'+this.img_src+'" />';html += '<div style="float:left">'+this.text+'</div>';this.content.innerHTML=html};return this.content};dhtmlXCombo_imageOption.prototype.data = function(){return [this.value,this.text,this.img_src]};dhtmlXCombo_imageOption.prototype.DrawHeader = function(self, name, width)

{var z=document.createElement("DIV");z.style.width = width+"px";z.className = 'dhx_combo_box';z._self = self;self.DOMelem = z;this._DrawHeaderImage(self, name, width);this._DrawHeaderInput(self, name, width-23);this._DrawHeaderButton(self, name, width);self.DOMParent.appendChild(self.DOMelem)};dhtmlXCombo_imageOption.prototype._DrawHeaderImage = function(self, name, width)

{var z= document.createElement('img');z.className = (self.rtl)? 'dhx_combo_option_img_rtl':'dhx_combo_option_img';z.style.visibility = 'hidden';self.DOMelem.appendChild(z);self.DOMelem_image=z};dhtmlXCombo_imageOption.prototype.RedrawHeader = function(self)

{self.DOMelem_image.style.visibility = 'visible';self.DOMelem_image.src = this.img_src};dhtmlXCombo_imageOption.prototype.getDefImage = function(self){return ""};dhtmlXCombo.prototype.setDefaultImage=function(url){dhtmlXCombo_imageOption.prototype.getDefImage=function(){return url}};dhtmlXCombo_optionTypes['image'] = dhtmlXCombo_imageOption;dhtmlXCombo_checkboxOption = function(){this.init()};dhtmlXCombo_checkboxOption.prototype = new dhtmlXCombo_defaultOption;dhtmlXCombo_checkboxOption.prototype.setValue = function(attr){this.value = attr.value||"";this.text = attr.text||"";this.css = attr.css||"";this.checked = attr.checked||0};dhtmlXCombo_checkboxOption.prototype.render = function(){if (!this.content){this.content=document.createElement("DIV");this.content._self = this;this.content.style.cssText='width:100%;overflow:hidden;'+this.css;this.content.setAttribute("onClick","add()");var html = '';if(this.checked)html += '<input style="float:left;" type="checkbox" name="testchk" value="'+this.text+'" id="testchk[]" onClick="add()"/>';else html += '<input style="float:left;" type="checkbox" name="testchk[]" value="'+this.text+'" id="testchk[]" onClick="add()"/>';html += '<div style="float:left">'+this.text+'</div>';this.content.innerHTML=html;this.content.firstChild.onclick = function(e) {this.parentNode.parentNode.combo.DOMelem_input.focus();(e||event).cancelBubble=true;if(!this.parentNode.parentNode.combo.callEvent("onCheck",[this.parentNode._self.value,this.checked])){this.checked=!this.checked;return false}}};return this.content};dhtmlXCombo_checkboxOption.prototype.data = function(){return [this.value,this.text,this.render().firstChild.checked]};dhtmlXCombo_checkboxOption.prototype.DrawHeader = function(self, name, width)

{self.DOMelem = document.createElement("DIV");self.DOMelem.style.width = width+"px";self.DOMelem.className = 'dhx_combo_box';self.DOMelem._self = self;this._DrawHeaderCheckbox(self, name, width);this._DrawHeaderInput(self, name, width-18);this._DrawHeaderButton(self, name, width);self.DOMParent.appendChild(self.DOMelem)};dhtmlXCombo_checkboxOption.prototype._DrawHeaderCheckbox = function(self, name, width)

{var z= document.createElement('input');z.type='checkbox';z.className = (self.rtl)? 'dhx_combo_option_img_rtl':'dhx_combo_option_img';z.style.visibility = 'hidden';z.onclick = function(e) {(e||event).cancelBubble=true};self.DOMelem.appendChild(z);self.DOMelem_checkbox = z};dhtmlXCombo_checkboxOption.prototype.RedrawHeader = function(self)

{self.DOMelem_checkbox.style.visibility = '';self.DOMelem_checkbox.checked = this.content.firstChild.checked};dhtmlXCombo_optionTypes['checkbox'] = dhtmlXCombo_checkboxOption;dhtmlXCombo.prototype.getChecked=function(){var res=[];for(var i=0;i<this.optionsArr.length;i++)if(this.optionsArr[i].data()[2])

res.push(this.optionsArr[i].value)

return res};dhtmlXCombo.prototype.setChecked=function(index,mode){this.optionsArr[index].content.firstChild.checked=(!(mode===false))};dhtmlXCombo.prototype.setCheckedByValue=function(value,mode){return this.setChecked(this.getIndexByValue(value),mode)};

//v.2.5 build 91111



/*

Copyright DHTMLX LTD. http://www.dhtmlx.com

You allowed to use this component or parts of it under GPL terms

To use it on other terms or get Professional edition of the component please contact us at sales@dhtmlx.com

*/

i have done some changes in this file please chekc it and giv eme proper solution of my problem.
Answer posted by Alex (support) on Dec 04, 2009 02:12

Hello,

combo provides onCheck event. It occurs when option checkbox is clicked:

combo.attachEvent("onCheck",function(value,state){

    /*your code here*/

    return true

})