two dhtmlxForms on one site

Suite and Optimus Suite 5
#1

Hi,
I have written the code for a Form and the form is printed out in my browser. Thats all okay but now my question how can I print out a second Form in the browser??

my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
      <link rel="stylesheet" type="text/css" href="dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css">
      <script src="dhtmlxForm/codebase/dhtmlxcommon.js"></script>
      <script src="dhtmlxForm/codebase/dhtmlxform.js"></script>
      <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
      <script src="dhtmlxForm/codebase/dhtmlx.js" type="text/javascript"></script>
</head>
 
<body onload="doOnLoad()">
<div id="form_container" style="width:280px;height:250px;"></div>
<script>
var myForm, formData;
function doOnLoad() {
formData = [
{type:"settings",position:"label-top"},
{type: "fieldset",name:"persI", label: "persönliche Infos", list:[
{type: "input", name: 'vname', label: 'Vorname'},
{type:"input", name:"nname", label:"Nachname", position:"label-top"},
{type:"input", name:"mail", label:"E-Mail", position:"label-top"},
{type:"newcolumn"},
{type:"button", name:"prüfen", width:50,offsetTop:120, value:"prüfen"}, 
]}
];
myForm = new dhtmlXForm("form_container", formData);
 
myForm.attachEvent("onButtonClick", function(id){ 
var res, v1, n2;
v1 = parseInt(myForm.getItemValue("vname"));
n2 = parseInt(myForm.getItemValue("nname"));
if (id=="prüfen")
{ res=v1+"."+n2+"@abc.de";}
myForm.setItemValue("mail",res);
})
}	
</script>
</body>
</html>

Is it possible that I have at the left side this form and next to it another Form??

thank you :slight_smile:

#2

Hi
Yes, you can have 2 forms on one page! You need to place them in different divs. But we recommend you the next some points:

  1. use unique IDs (item names) for each item in both forms
  2. use unique names for both forms
  3. you can place your forms easly in our 2U layout:
    dhtmlx.com/docs/products/dht … terns.html - you cn find here 2U layout structure
    dhtmlx.com/docs/products/dht … ayout.html - you can find here how to use form in layout
#3

thank you for your answer
unfortunatly it doesn’t work

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
          <link rel="stylesheet" type="text/css" href="dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css">
          <script src="dhtmlxForm/codebase/dhtmlxcommon.js"></script>
          <script src="dhtmlxForm/codebase/dhtmlxform.js"></script>
          <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlx.css">
          <script src="dhtmlxForm/codebase/dhtmlx.js" type="text/javascript"></script>
    </head>

    <body onload="doOnLoad()">
    <div id="form_container" style="width:280px;height:250px;"></div>
    <script>
    var myForm, formData;
    function doOnLoad() {
    formData = [
    {type:"settings",position:"label-top"},
    {type: "fieldset",name:"persI", label: "persönliche Infos", list:[
    {type: "input", name: 'vname', label: 'Vorname'},
    {type:"input", name:"nname", label:"Nachname", position:"label-top"},
    {type:"input", name:"mail", label:"E-Mail", position:"label-top"},
    {type:"newcolumn"},
    {type:"button", name:"prüfen", width:50,offsetTop:120, value:"prüfen"},
    ]}
    ];
    myForm = new dhtmlXForm("form_container", formData);

    myForm.attachEvent("onButtonClick", function(id){
    var res, v1, n2;
    v1 = parseInt(myForm.getItemValue("vname"));
    n2 = parseInt(myForm.getItemValue("nname"));
    if (id=="prüfen")
    { res=v1+"."+n2+"@abc.de";}
    myForm.setItemValue("mail",res);
    })
    }   
    </script>
	<div id="form_container1" style="width:280px;height:250px;"></div>
	<script>
	var myForm1, formData1;
    function doOnLoad1() {
    formData1 = [
    {type:"settings",position:"label-top"},
    {type: "fieldset",name:"persI", label: "persönliche Infos", list:[
    {type: "input", name: 'vname', label: 'Vorname'},
    {type:"input", name:"nname", label:"Nachname", position:"label-top"},
    {type:"input", name:"mail", label:"E-Mail", position:"label-top"},
    {type:"newcolumn"},
    {type:"button", name:"prüfen", width:50,offsetTop:120, value:"prüfen"},
    ]}
    ];
    myForm1 = new dhtmlXForm("form_container1", formData1);

    myForm1.attachEvent("onButtonClick", function(id){
    var res, v1, n2;
    v1 = parseInt(myForm1.getItemValue("vname"));
    n2 = parseInt(myForm1.getItemValue("nname"));
    if (id=="prüfen")
    { res=v1+"."+n2+"@abc.de";}
    myForm1.setItemValue("mail",res);
    })
    }   
	</script>
    </body>
    </html>

I hope I have done everthing as you said, but something is wrong :frowning:

#4

Here is your body:

[code]

[/code] You have define 2 doOnLoad() functions and only the first was started.
#5

yes it works :slight_smile: :slight_smile:

thank you very much :slight_smile:

#6

You are welcome!

#7

I am still not getting both will over lap each other

var comboData = [
{ type: “settings”, position: “label-left”},
{ type: “label”, label: “”},
{ type: “newcolumn”},
{ type: “select”, label: “REGION”, name: “reg”, offsetLeft:9, labelWidth:47,inputWidth:85, options:[{ text:“CANADA”,value:“can”},{ text:“INDIA”,value:“ind”,selected:true},{ text:“AUSTRALIA”,value:“aus”},{ text:“PAKISTAN”,value:“pak”}]},
{ type: “newcolumn”},
{ type: “select”, label: “DISTRICT”, name: “dis”, offsetLeft:13, labelWidth:57,inputWidth:90, options:[{ text:“DISTRICT1”,value:“d1”},{ text:“DISTRICT2”,value:“d2”},{ text:“DISTRICT3”,value:“d3”},{ text:“DISTRICT4”,value:“d4”}]},
{ type: “newcolumn”},
{ type: “select”, label: “STORE”, name: “store”, offsetLeft:13, labelWidth:42,inputWidth:85, options:[{ text:“1111”,value:“s1”},{ text:“2222”,value:“s2”},{ text:“3333”,value:“s3”},{ text:“4444”,value:“s4”}]},
{ type: “newcolumn”},
{ type: “input”, label: “SEARCH”, name: “sea”, value: “”, offsetLeft:13, labelWidth:50,
inputWidth: 180},
];
this above is one combobox created

var listData = [
{ type: “settings”, position: “label-left”},
{ type: “label”, label: “”},
{ type:“newcolumn”},
{ type:“radio”, name:“y”, value:“2012”, checked:true, label:“2012”},
{ type:“newcolumn”},
{ type:“radio”, name:“y”, value:“2013”, label:“2013”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“jan”, label:“JAN”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“feb”, label:“FEB”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“mar”, label:“MAR”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“apr”, label:“APR”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“may”, label:“MAY”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“jun”, label:“JUN”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“jul”, label:“JUL”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“aug”, label:“AUG”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“sep”, label:“SEP”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“oct”, label:“OCT”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“nov”, label:“NOV”},
{ type:“newcolumn”},
{ type:“radio”, name:“m”, value:“dec”, label:“DEC”},
{ type:“newcolumn”}
];
This aboove code listData is radio button i want this both to add it to one layout cell it is not possible how to do it …

main function i have declared as

#8

main function i have declared as

Try to use correct syntax to declare divs. I.e.