Attach Form to Tabbar

Suite and Optimus Suite 5
#1

Hi Guys,

I’m trying to use the new DHTMLXform, but following the instructions I cannot get the form to attach to a tab bar. I am using V25 Pro 91111 and have downloaded the new form package.

my code is simply

vouchersTab = new dhtmlXTabBar(“voucherstab”, “top”);
vouchersTab.setSkin(‘dhx_skyblue’);
vouchersTab.setImagePath(“codebase/imgs/”);
vouchersTab.setHrefMode(“ajax-html”);
vouchersTab.addTab(“addVouch”, “Add Voucher”, “160px”);

//add vouchers form
var vouchForm = vouchersTab.cells(“addVouch”).attachForm();

However, I get a javascript error
Error: vouchersTab.cells(“addVouch”).attachForm is not a function
Line: 97

Is there something else I need to download/include?

#2

Hi,

2.5 Suite doesn’t container dhxForm. Therefore, attachForm method is defined here.

If you use forms, you need to use the latest dhtmlxcontainer.js (you may find it in the tabbar, layout, accordion or windows 2.6).

Not sure that the latest container is compatible with tabbar 2.5. You may try. If error occur, you will need update the tabbar too.

#3

Thanks Alexandra, that worked. Another quick question, presume it simple but I cannot figure it out… I have attached a form the a tab bar, now and it sits right in the top left corner, how can I add padding to the left and top of the form? If I was just attaching a form to a div I’d have padding in the div but not sure how to achieve the same in a tab ?

thanks

#4

Another problem… I am now attaching the form to a layout panel. The form appears fine but I cannot click into any of the fields? If I click on the panel and then press tab, I can however tab through and enter data on the fields, but it will not respond to any mouse events? code snippet below. (I have a grid attached to another panel on the same grid and it works fine)

			var LeftPanel = 250;
			
			var vouchLayout = new dhtmlXLayoutObject("voucherspanel", "2U", "dhx_skyblue");
  		vouchLayout.cells("b").setText("Voucher List"); 	 	
   	 	vouchLayout.cells("a").setText("New Voucher");
   	 	vouchLayout.cells("a").setWidth(LeftPanel);
   	 	vouchLayout._collapse_old = vouchLayout._collapse;	//no collapse on these panels
			vouchLayout._collapse = function(pId, mode) { return;	}
						
			//add vouchers form		
			var formData = 
			[
				{type: "label", label: "Add New Voucher"},
				{type: "input", name: "vouchernum", value:"", label: "Voucher Number"},
				{type: "input", name: "voucherdate", value:"", label: "Voucher Date"},
       		{type: "input", name: "vouchername", value:"", label: "Voucher Amount"},
       		{type: "input", name: "vouchername", value:"", label: "Voucher Recipient"},
       		{type: "input", name: "vouchercomm", value:"", label: "Comments", rows: "5"},
       		{type: "button", name: "savevoucher", value:"Create New Voucher"}
			];
			
			var vouchForm = vouchLayout.cells("a").attachForm(formData);
			var myEvent = vouchForm.attachEvent("onButtonClick", function(){
                            alert("Submit Voucher")
			});
#5

Hi,

The form appears fine but I cannot click into any of the fields?

I’ve attached the working demo

how can I add padding to the left and top of the form? I

the left padding is set by default - 10 px. You may set teh top padding too:

.dhxlist_obj_dhx_skyblue div.dhxlist_base { margin: 10px 10px; }

sample.zip (69.8 KB)

#6

Thanks Alexandra, the problem was actually a misplaced div in my html :blush:

#7

Is it possible to attach a calender object to an input type on a form?

#8

Yes, it is.

You need to pass input object as the first parameter of the dhtmlxCalendarObject. Form elements don’t have ids. Therefore, you need to use document.getElementsByName(name)[0] instead of document.getElementsById(id)

For example:
calendar = new dhtmlxCalendarObject(document.getElementsByName(“user_name”)[0]);
calendar.draw();

#9

Thanks Alexandra. One more problem with form (you don’t seem to have a specific area for the form on the forum)!

I am trying to send the form data to the server now, but am getting the following javascript error:

Error: elem.object is undefined
Source File: localhost/shopnet/codebase/dhtmlxform.js
Line: 1096

I cannot see anything wrong with the code below, but perhaps I am not interpeting the send structure properly?

			var formData = 
			[
				{type: "label", name: "voucherlbl", label: "Add New Voucher"},
				{type: "input", name: "vouchernum", value:vouchNum, label: "Voucher Number"},
				{type: "select", name: "vouchstaff", label: "Staff Member", connector: "voucherdetail.php?action=stafflist", validate:"selectedOpt"},					
				{type: "select", name: "vouchertype", value:vouchNum, label: "Voucher Type" ,connector: "voucherdetail.php?action=vouchertypes", validate:"selectedOpt"},					
				{type: "input", name: "voucherdate", value: getTheDate(), label: "Voucher Date",  validate: "ValidDate"},
       		{type: "input", name: "voucheramt", value:"0.00", label: "Voucher Amount",  validate: "ValidCurrency"},
       		{type: "input", name: "voucherrecp", value:"", label: "Voucher Recipient", validate: "NotEmpty"},
       		{type: "input", name: "vouchercomm", value:"", label: "Comments", rows: "5"},
       		{type: "button", name: "savevoucher", value : "Add New Voucher"}
			];
			
			var vouchForm = vouchLayout.cells("a").attachForm(formData);
			vouchForm.attachEvent("onAfterValidate", function (id, result)
			{
 			});
 			
			var myEvent = vouchForm.attachEvent("onButtonClick", function()
			{
				if (vouchForm.validate())
        	{
        		alert("sending");
        		vouchForm.send("voucherdetail.php?action=addvoucher", "post", function(xml)
        		{
						alert("Voucher Added");
					});
        	}
        	else
        		alert("Invalid entry, please check highlighted fields have been entered correctly");
			});
#10

Hi,

we’ve created a separate topic for forms.

Please provide the complete demo as locally the problem hasn’t been recreated

#11

Hi Alex, the problem seems to be in relation to protoype, try including prototype.js in a sample and see if you can recreate, I was able to do so in the sample you attached earlier in this thread.

Also, I cannot see to find anywhere in the documentation any example server code, I am not sure how the server should respond to the ‘send’ i.e. I want to return to the client a ‘success/failure’ message after a send, could you provide an example?

thanks!

#12

Is there any way to attach a double calendar to a form?

#13

Here is the example with form submit:
dhtmlxForm/samples/01_init/04_submit.html

This one is with the DataProcessor and connector:
dhtmlxForm/samples/05_data/02_save.html

#14

Alexandra, please see issue reproduced attached. It appears to happen when you include prototype.js which I need to.

thanks
sample.zip (103 KB)