Below is the HTML code for a Telerik Tree View Control used in a ASP.NET MVC application. I need to get the value (input tags values are in GUID format) of the ChildNode when a child node checkbox is selected.
Illlustrated below:
*Main Region*
**North VAncouver
testlocation2
Testlocation123**
*Africa*
**Tanzania
Headquarters**
*India*
**Items Gobetter
Mash
YouThinkSo**
*Canada*
**WestVancouver**
AS given above I was wondering if you could give me the Jquery code to iterate through the HTML markup and select checked child node values given in GUID's.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title></title>
</head>
<body>
<ul>
<li>
<span id="spnloc">Locations</span>
<div style=
"position: absolute; padding-top: 5px; background-color: rgb(234, 234, 234); color: rgb(63, 138, 196); z-index: 2000; display: none;"
id="TreeView1" class="t-widget t-treeview t-reset">
<ul class="t-group t-treeview-lines">
<li class="t-item t-first">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[0].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Main Region" name=
"TreeView1_checkedNodes[0].Text" class="t-input" /><input type="hidden"
value="Main Region" name="TreeView1_checkedNodes[0].Value" class=
"t-input" /></span><span class="t-in">Main Region</span><input type=
"hidden" value="Main Region" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="0:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[0:0].Checked" class=
"t-input" /></span><span class="t-in">North
Vancouver</span><input type="hidden" value=
"5761a893-9ef0-48d3-847a-2638ec081f5f" name="itemValue" class=
"t-input" />
</div>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="0:1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[0:1].Checked" class=
"t-input" /></span><span class="t-in">testLocation2</span><input type=
"hidden" value="d63d6ff6-07dc-4021-a4bb-7b1b7c781119" name="itemValue"
class="t-input" />
</div>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="0:2" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[0:2].Checked" class=
"t-input" /></span><span class=
"t-in">TestLocations123</span><input type="hidden" value=
"eadfd0f5-9181-4094-b01a-9d7ee383b7f2" name="itemValue" class=
"t-input" />
</div>
</li>
</ul>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[1].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Africa" name=
"TreeView1_checkedNodes[1].Text" class="t-input" /><input type="hidden"
value="Africa" name="TreeView1_checkedNodes[1].Value" class=
"t-input" /></span><span class="t-in">Africa</span><input type="hidden"
value="Africa" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="1:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[1:0].Checked" class=
"t-input" /></span><span class="t-in">Tanzania</span><input type="hidden"
value="5c2389eb-365e-42bb-9b1a-8db36f87b4af" name="itemValue" class=
"t-input" />
</div>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="1:1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[1:1].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Headquarters" name=
"TreeView1_checkedNodes[1:1].Text" class="t-input" /><input type=
"hidden" value="ac171662-3eca-411f-a623-a3cb1a69238e" name=
"TreeView1_checkedNodes[1:1].Value" class=
"t-input" /></span><span class="t-in">Headquarters</span><input type=
"hidden" value="ac171662-3eca-411f-a623-a3cb1a69238e" name="itemValue"
class="t-input" />
</div>
</li>
</ul>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="2" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[2].Checked" class="t-input"
checked="checked" /><input type="hidden" value="India" name=
"TreeView1_checkedNodes[2].Text" class="t-input" /><input type="hidden"
value="India" name="TreeView1_checkedNodes[2].Value" class=
"t-input" /></span><span class="t-in">India</span><input type="hidden"
value="India" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item">
<div class="t-top">
<span class="t-checkbox"><input type="hidden" value="2:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[2:0].Checked" class=
"t-input" /></span><span class="t-in">Item's Go Here</span><input type=
"hidden" value="d8266db4-e846-4338-906f-e0b84fd9044a" name="itemValue"
class="t-input" />
</div>
</li>
<li class="t-item">
<div class="t-mid">
<span class="t-checkbox"><input type="hidden" value="2:1" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[2:1].Checked" class=
"t-input" /></span><span class="t-in">MASH</span><input type=
"hidden" value="869c083a-a17b-4a7a-a2a9-ef88f972de1b" name="itemValue"
class="t-input" />
</div>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="2:2" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[2:2].Checked" class=
"t-input" /></span><span class="t-in">YouThinkSo</span><input type=
"hidden" value="4e33e582-8a54-450a-ad73-70698a578162" name="itemValue"
class="t-input" />
</div>
</li>
</ul>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-checkbox"><input type="hidden" value="3" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="True" name="TreeView1_checkedNodes[3].Checked" class="t-input"
checked="checked" /><input type="hidden" value="Canada" name=
"TreeView1_checkedNodes[3].Text" class="t-input" /><input type="hidden"
value="Canada" name="TreeView1_checkedNodes[3].Value" class=
"t-input" /></span><span class="t-in">Canada</span><input type="hidden"
value="Canada" name="itemValue" class="t-input" />
</div>
<ul class="t-group">
<li class="t-item t-last">
<div class="t-top t-bot">
<span class="t-checkbox"><input type="hidden" value="3:0" name=
"TreeView1_checkedNodes.Index" class="t-input" /><input type="checkbox"
value="False" name="TreeView1_checkedNodes[3:0].Checked" class=
"t-input" /></span><span class="t-in">West Vancouver</span><input type=
"hidden" value="b8fd4a6f-bfc7-4c8a-b2ff-cb3c278c7434" name="itemValue"
class="t-input" />
</div>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
In italics are the Regions (Parent nodes) and in Bold are the child nodes. Both Region and child nodes(which are locations) are Checkboxes.
The values of the Child Nodes are in GUID (Unique Indentiifer) value.
ON selecting the the parent and child nodes I need to be able to only get the value of the child nodes after I select the nodes and maybe click a button to run the JQuery code. Can you help me with the Jquery code that will be able to give me the selected values of the checkboxes(child nodes only) ignoring the parent checkboxes even if they are selected. The HML markup for the TreeView is given ABOVE.
Not sure if this is what you want
Demo: http://jsfiddle.net/qHJYJ/
by clicking the button will return GUID of all children nodes that have
Parent Node selected
Children Node itself selected
$('input[type="checkbox"]').on('change', function() {
var e = $(this);
if (e.parents('li:eq(2)').length) {
console.log('sub-checkbox found, value: ' + e.val());
} else {
console.log('parent checkbox has been changed, ignoring...');
}
console.log(e.attr('name'));
});
jsFiddle example code here
Related
I have recently rebuild a module DLL for an Orchard CMS project and one of the pages is not longer rendering form actions using BeginFormAntiForgeryPost.
The .cshtml file is:
#using System;
#using Orchard.Mvc.Html;
#{
var eventId = (int) Model.EventId;
string price = (string)Model.Price;
Orchard.ContentManagement.ContentItem contentItem = Model.Item;
string currencies = (string)Model.Currencies;
var pricesArray = price.Split(new Char[]{';'});
var currenciesArray = currencies.Split(new Char[]{';'});
bool allowCurrencyChange = true;
if(pricesArray.Length!=currenciesArray.Length){
allowCurrencyChange = false;
}
price = pricesArray[0];
string currency = currenciesArray[0];
}
<div class="prices-container">
<div class="more-info-link">
<a class="btn" href="#Url.Content("~"+Url.ItemDisplayUrl(contentItem))">
More Information
</a>
</div>
<div class="prices-box">
#if(Convert.ToDecimal(price)>0){
<p class="price">#currency #String.Format("{0:0,0.00}",price) <br /><span style="font-size:13px;">+ VAT</span></p>
}
else{
<p class="price" style="text-indent:-99999px;">#currency #String.Format("{0:0,0.00}",price)</p>
}
#using (Html.BeginFormAntiForgeryPost(Url.Action("Add", "ShoppingCart", new { id = eventId, area = "Events" }))) {
if(Convert.ToDecimal(price)>0){
<input type="hidden" name="currency" value="#currency" />
<input type="hidden" name="price" value="#price" />
if(allowCurrencyChange){
for(int i=0; i<pricesArray.Length;i++){
<input type="hidden" name="#(currenciesArray[i])_price" value="#(pricesArray[i])" />
}
}
<button class="btn btn-success" type="submit">#T("register")</button>
}
else{
<a href="/oforms/Contact-Us" class="btn btn-success" >#T("enquire")</a>
}
}
</div>
</div>
The output before the rebuild was:
<div class="prices-container" shape-id="13">
<div class="more-info-link" shape-id="13">
<a class="btn" href="/identify-the-right-talent" shape-id="13">
More Information
</a>
</div>
<div class="prices-box" shape-id="13">
<p class="price" shape-id="13">GBP 1197.50 <br shape-id="13"><span style="font-size:13px;" shape-id="13">+ VAT</span></p>
<form action="/Events/ShoppingCart/Add/13817" method="post" shape-id="13"> <input type="hidden" name="currency" value="GBP" shape-id="13">
<input type="hidden" name="price" value="1197.50" shape-id="13">
<input type="hidden" name="GBP_price" value="1197.50" shape-id="13">
<button class="btn btn-success" type="submit" shape-id="13">register</button>
<input name="__RequestVerificationToken" type="hidden" value="w10QfGWfU3Y2UNIWRVXtsqUxcSS/OX4GxWCAsdaWDMHV15LqkMpDcqQFYJ1lpbf7ZlNTP5ckVrWFtatRh2poJBTE9NxlXQRua8CNuXgVGtGnSr3lpWpt2KeAwNNhsvmZIiSSSZOuhwbXD08K7+H2fSkrFUAOKVX+eTarLBWdjg8jySGV+Q82oA37NMEBZrQXOWkq4TjEusC5ILqptA1fLZOR8qu0xuPlWrMf4Dli2kw=" shape-id="13">
</form>
</div>
</div>
And after rebuilding the module the FORM ACTION is no longer output:
<div class="prices-container" shape-id="13">
<div class="more-info-link" shape-id="13">
<a class="btn" href="/identify-the-right-talent" shape-id="13">
More Information
</a>
</div>
<div class="prices-box" shape-id="13">
<p class="price" shape-id="13">GBP 1197.50 <br shape-id="13"><span style="font-size:13px;" shape-id="13">+ VAT</span></p>
<form action="" method="post" shape-id="13">
<input type="hidden" name="currency" value="GBP" shape-id="13">
<input type="hidden" name="price" value="1197.50" shape-id="13">
<input type="hidden" name="GBP_price" value="1197.50" shape-id="13">
<button class="btn btn-success" type="submit" shape-id="13">register</button>
<input name="__RequestVerificationToken" type="hidden" value="LcZyoXchQ7IjEJJvxoFQzAYNVOk1ybC7KB/GzXkYdlE5n1zIy6fg3Dod8twQDLxA/cYvBwYfXYDWbNSq81dsq4UTSxevK1vXJxWGAWKOlt0dmt3si5RKYJbIXEplIScSoEBtr5Jaq95YsCe4jpdMe3QroYF5NGj9P8BhPKWbucHJiLyBJULc6ktYuRL0BFQk+oE9AaaYUUv6hyh20T/XTlPjl9uxalvJMTCIiDtSlZQ=" shape-id="13">
</form>
</div>
</div>
Why would the BeginFormAntiForgeryPost and/or Url.Action no longer output the action URL?
I would like to align 2 control group with jQuery Mobile. I use the the version 1.4.2.
This is what I have : http://i.stack.imgur.com/qEAav.png
And this is what I would like to do : http://i.stack.imgur.com/NA9YR.png
My currently code is :
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie" align="center">
Fermer la liste
</br>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');">
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');">
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');">
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');">
<label for="loadEPT">ETP</label>
</fieldset>
</form>
</div>
</h3>
If there are pro jQuery Mobile I'll glad to solve my problem.
Thanks in advance.
See if this works for you:
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie">
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');" />
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');" />
<label for="loadEPT">ETP</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');" />
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');" />
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid3">
Fermer la liste
</fieldset>
</div>
</h3>
CSS to line things up and add spacing:
#btnPaie {
text-align: center;
}
#btnPaie form, #btnPaie fieldset {
display: inline;
}
#btnPaie fieldset {
margin: 1em;
}
DEMO
my form looks like this :
<form class="form-validate" id="booking-form" name="form-booking" method="post" action="/component/booking/?view=booknig">
<div class="width-60 fltlft">
<fieldset class="form-booking">
<legend></legend>
<ul>
<li><input type="text" readonly="readonly" class="readonly" value="0" id="jform_id" name="jform[id]"></li>
<li><input type="hidden" value="2013-06-17 10:15" name="jform[date_from]"></li>
<li><input type="hidden" value="1" name="jform[service_id]"></li>
<li><label class="" for="jform_phone" id="jform_phone-lbl">Telefon</label><input type="text" class="inputbox" value="" id="jform_phone" name="jform[phone]"></li>
<li><label class="" for="jform_email" id="jform_email-lbl">Email</label><input type="text" class="inputbox" value="" id="jform_email" name="jform[email]"></li>
<li><input type="hidden" value="" id="jform_checked_out" name="jform[checked_out]"></li>
<li><input type="hidden" value="" id="jform_checked_out_time" name="jform[checked_out_time]"></li>
</ul>
</fieldset>
</div>
<input type="hidden" value="booking.save" name="task">
<input type="submit" class="button-submit" value="Send" name="Send">
<input type="hidden" value="1" name="e391ee49d5291fa9d566236f5c0a435e"> <div class="clr"></div>
</form>
and to retrieve POST data i'm using :
$jinput = JFactory::getApplication()->input;
$form_values = $jinput->post->get('jform');
but when i'm tring to print_r $form_values i get only Array
where i'm making mistake
I want to group certain checkboxes and make them collapsible as well as select/unselect all.
HTML
<div style="padding-left: 5px; padding-right: 5px">
<fieldset data-role="controlgroup">
<input autocomplete="off" type="checkbox" name="layers" id="land" class="layers" checked="checked"/>
<label for="land">Land Parcels</label>
<input autocomplete="off" type="checkbox" name="layers" id="road" class="layers" checked="checked"/>
<label for="road">Roads</label>
<input autocomplete="off" type="checkbox" name="layers" id="rail" class="layers" checked="checked"/>
<label for="rail">Railroads</label>
input autocomplete="off" type="checkbox" name="layers" id="lake" class="layers" checked="checked"/>
<label for="lake">Lakes</label>
<input autocomplete="off" type="checkbox" name="layers" id="points" class="layers"/>
<label for="points">AMIS Points</label>
<input autocomplete="off" type="checkbox" name="education" id="education" class="layers"/>
<label for="education">Education</label>
<input autocomplete="off" type="checkbox" data-mini="true" name="education" id="childcare" class="layers"/>
<label for="childcare">Child Care</label>
<input autocomplete="off" type="checkbox" data-mini="true" name="education" id="highschool" class="layers"/>
<label for="highschool">High School</label>
<input autocomplete="off" type="checkbox" name="layers" id="stormpipes" class="layers"/>
<label for="stormpipes">Storm Pipes</label>
</fieldset>
</div>
JQuery
$(document).ready(function () {
fixContentHeight();
$('.layers').click(changeLayers);
});
function changeLayers () {
var checked = [];
$('.layers').each(function () {
if ($(this).attr('checked')) {
checked.push($(this).attr('value'));
}
});
mainLayer.params.LAYERS = checked.join(",");
mainLayer.redraw();
}
$('#education').click(function() {
$("INPUT[type='checkbox']").attr('checked', $('#education').is(':checked'));
});
Trying to make child care and high school collapisble within the education checkbox.
You could use an unordered list with data-role="listview", add data-role="collapsible" to the li elements, and nest another unordered list with each checkbox inside the inner list's li
<ul data-role="listview">
<li data-role="collapsible">
<h3>Title of collapsible row</h3>
<ul data-role="listview">
<li>
<input autocomplete="off" type="checkbox" name="layers" id="land" class="layers" checked="checked"/>
<label for="land">Land Parcels</label>
</li>
<li>
<input autocomplete="off" type="checkbox" name="layers" id="road" class="layers" checked="checked"/>
<label for="road">Roads</label>
</li>
</ul>
</li>
</ul>
The margins and paddings will look a bit weird, but you can just tweak the css to fix that
I have a problem with jQuery Mobile 1.1.0 accordion ( http://jquerymobile.com/test/docs/content/content-collapsible.html )
I have a page with more accordion, and when I press to open / close the section brings me back to the top of the page.
I have already set:
ajaxEnabled: false;
hashListeningEnabled: false;
linkBindingEnabled: false;
this is my code:
<!-- anagrafica -->
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="c">
<h3>Scheda cliente</h3>
<!-- Dati azienda -->
<div data-role="collapsible" data-collapsed="true" data-content-theme="c" class="grid-scheda">
<h3>Anagrafica</h3>
<form id="dati-azienda">
<div data-role="fieldcontain">
<label for="ragionesociale">Ragione Sociale:</label>
<input type="text" name="ragionesociale" id="ragionesociale" class="required fullsize" />
</div>
<div data-role="fieldcontain">
<label for="indirizzo">Indirizzo:</label>
<input type="text" name="indirizzo" id="indirizzo" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="localita">Località:</label>
<input type="text" name="localita" id="localita" class="large" />
<input type="text" name="cap" id="cap" class="small" placeholder="CAP" />
</div>
<div data-role="fieldcontain">
<label for="pi">Partita IVA:</label>
<input type="number" name="pi" id="pi" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="fisso">Fisso:</label>
<input type="number" name="fisso" id="fisso" class="medium" />
<input type="number" name="fax" id="fax" class="medium" placeholder="Fax" />
</div>
<div data-role="fieldcontain">
<label for="mobile">Mobile:</label>
<input type="number" name="mobile" id="mobile" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="mail">Mail:</label>
<input type="text" name="mail" id="mail" class="fullsize" />
</div>
<!--
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Altre sedi:</legend>
<input type="checkbox" name="checkbox-0" style="margin-top:0px;" id="checkbox-mini-0" data-mini="true" />
<label for="checkbox-mini-0">Si</label>
</fieldset>
</div>
-->
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="dati-azienda" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /Dati Azienda -->
<!-- Dati Referente -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Dati Referente</h3>
<form id="dati-referente">
<div data-role="fieldcontain">
<label for="cognome">Referente:</label>
<input type="text" name="cognome" id="cognome" class="small2" placeholder="Cognome" />
<input type="text" name="nome" id="nome" class="small2" placeholder="Nome"/>
<input type="text" name="dt_nascita" id="dt_nascita" class="small2" placeholder="Data nascita"/>
</div>
<div data-role="fieldcontain">
<label for="posizione">Posizione:</label>
<input type="text" name="posizione" id="posizione" class="medium" />
<input type="text" name="reperibilita" id="reperibilita" class="medium" placeholder="Reperibilità" />
</div>
<div data-role="fieldcontain">
<label for="mobile">Mobile:</label>
<input type="number" name="mobile" id="mobile" class="medium" />
<input type="number" name="fisso" id="fisso" class="medium" placeholder="Fisso" />
</div>
<div data-role="fieldcontain">
<label for="mail">Mail:</label>
<input type="text" name="mail" id="mail" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="referente2">Referente alternativo:</label>
<input type="text" name="referente2" id="referente2" class="fullsize" />
</div>
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="dati-referente" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /Dati referente -->
<!-- caratteristiche -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Caratteristiche</h3>
<div data-role="fieldcontain">
<label for="x">Consistenza attiva:</label>
<input type="text" name="x" id="x" class="small" />
</div>
</div><!-- /caratteristiche -->
<!-- registrazione -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Registrazione 190</h3>
<form id="registrazione">
<div data-role="fieldcontain">
<label for="userid">User ID:</label>
<input type="text" name="userid" id="userid" class="small2" />
<input type="text" name="passw" id="passw" class="small2" placeholder="Password" />
<input type="date" name="dt_registrazione" id="dt_registrazione" class="small2" />
</div>
<?php for($i=1;$i<=2;$i++) { ?>
<div data-role="fieldcontain">
<label for="analisi_ft_num">Analisi Fattura:</label>
<input type="text" name="analisi_ft_num[]" id="analisi_ft_num" class="medium" placeholder="Nr. Fattura" />
<input type="date" name="dt_doc[]" class="medium" />
</div>
<?php } ?>
<div data-role="fieldcontain">
<label for="codice_cliente">Codice Cliente:</label>
<input type="text" name="codice_cliente" id="codice_cliente" class="medium" />
<input type="text" name="ciclo_fatturazione" id="ciclo_fatturazione" class="medium" placeholder="Ciclo Fatturazione" />
</div>
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="registrazione" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /registrazione -->
</div>
<!-- /anagrafica -->
Thanks in advice
It is not very clear as to what exactly the interface is supposed to look like. However, please look at the documentation: http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible-set.html
The link you pasted is for a test demo, but the syntax seem to have changed since then.