I need to create more forms on-the-fly. This example creates two forms dynamically, it works, but not in the events section.
<div id="form_container" style="width:280px;height:250px;"></div>
<script>
var array_form = array_grid = new Array();
formStructure_modBase = [
{type: "block", blockOffset: 0, list: [
{type:"input",label:"",name:"id_base"},
{type:"container",name:"grid_base",label:"",inputWidth:400,inputHeight:150},
{type:"button",name:"button_base",value:"SAVE"},
]},
];
for(var ii=0;ii<=1;ii++)
{
//create array form
array_form[ii] = new dhtmlXForm("form_container",formStructure_modBase);
array_form[ii].setItemValue("id_base",ii);
//events (DOESN'T WORK!)
array_form[ii].attachEvent("onButtonClick", function(id){
if(id=="button_base") alert("Save Form "+ii);
});
//create grid
array_grid[ii] = new dhtmlXGridObject(array_form[ii].getContainer("grid_base"));
array_grid[ii].setImagePath("../../codebase/imgs/");
array_grid[ii].setHeader("Num,Des");
array_grid[ii].setInitWidthsP("50,50");
array_grid[ii].setColAlign("center,left");
array_grid[ii].setColTypes("ro,ed");
array_grid[ii].setSkin("dhx_web");
array_grid[ii].init();
}
</script>
This code works properly, but the number of forms is not known at design time.
array_form[0].attachEvent("onButtonClick", function(id){
if(id=="button_base") alert("Save Form 0");
});
array_form[1].attachEvent("onButtonClick", function(id){
if(id=="button_base") alert("Save Form 1");
});
How can I handle events correctly? Thanks.
UPDATE This seems to work properly:
..
..
//create array form
array_form[ii] = new dhtmlXForm("form_container",formStructure_modBase);
array_form[ii].setItemValue("id_base",ii);
//events (WORKS)
addEvent(ii);
//create grid
array_grid[ii] = new dhtmlXGridObject(array_form[ii].getContainer("grid_base"));
..
..
function addEvent(form_num)
{
array_form[form_num].attachEvent("onButtonClick", function(id){
if(id=="button_base") alert("Save Form "+form_num);
});
}