I have an ul/li list
<ul id="browser" class="filetree">
<li>
<input type="checkbox" checked />
<a>whatever link1</a>
</li>
<li>
<input type="checkbox" checked />
<a>whatever link3</a>
</li>
<li>
<input type="checkbox"/>
<a>whatever link2</a>
<ul>
<li>
<input type="checkbox" checked />
<a>whatever link4</a>
</li>
</ul>
</li>
</ul>
I'm looking to get the HTML representing the whole list, only when the checkbox are checked using javascript and/or jquery.
Would anyone by chance have an idea ?
Thanks.
Not sure I understand the question fully but here's an example. This only selects a list (so only whatever link2 will trigger it), however it can be changed to select the anchor if that's necessary.
const mainList = document.getElementById('browser');
mainList.addEventListener('click', (e) => {
if (e.target.type === 'checkbox') {
const list = [...document.querySelectorAll('li > input:checked ~ ul')];
const selectedMarkup = document.getElementById('selectedMarkup');
selectedMarkup.innerHTML = list.map(el => el.innerHTML).join('');
}
})
<ul id="browser" class="filetree">
<li>
<input type="checkbox" checked />
<a>whatever link1</a>
</li>
<li>
<input type="checkbox" checked />
<a>whatever link3</a>
</li>
<li>
<input type="checkbox"/>
<a>whatever link2</a>
<ul>
<li>
<input type="checkbox" checked />
<a>whatever link4</a>
</li>
</ul>
</li>
</ul>
Selected Markup
<div id='selectedMarkup'>
</div>
This assigns the html to s.
Not sure what you want to do with it after that.
$('input[type="checkbox"]').onclick (
if($(this).checked)
s=$(this).ancestor('#browser').html();
)
try to push class on tick of checkbox in li.
e.g onCheck => <li class='checked'>
Then get all element who are having class 'checked' using jquery
thanks for the help everyone, I solved it. Every answer helped :)
For reference, my question wasn't clear at all, here what I was trying to do:
var domString = "<ul>";
function run() {
var mainTree = document.getElementById('browser');
getDom(mainTree);
domString += "</ul>";
console.log(domString);
document.getElementById("result").innerHTML = domString;
domString = "<ul>";
}
function getDom(tree) {
var children = tree.children;
for (var i = 0; i < children.length; i++) {
if (children[i].className === "list") {
var liChildren = children[i].children;
if (liChildren[0].checked == true) {
domString += children[i].outerHTML;
}
} else {
var liChildren = children[i].children;
if (liChildren[0].checked == true) {
domString += "<li class=\"site\">";
domString += liChildren[0].outerHTML;
domString += liChildren[1].outerHTML;
domString += "<ul>";
getDom(liChildren[2]);
domString += "</ul>"
domString += "</li>"
}
}
}
}
<ul id="browser" class="filetree">
<li class="list">
<input class="check" type="checkbox" checked/>
<a>whatever link1</a>
</li>
<li class="list">
<input class="check" type="checkbox" />
<a>whatever link2</a>
</li>
<li class="site">
<input class="check" type="checkbox" checked/>
<a>whatever link3</a>
<ul>
<li class="list">
<input class="check" type="checkbox" checked />
<a>whatever link4</a>
</li>
<li class="list">
<input class="check" type="checkbox" />
<a>whatever link5</a>
</li>
</ul>
</li>
</ul>
<button onclick="run()">Click</button>
<p>--------------------</p>
<div id="result"></div>
It's not optimal at all (and ugly at best, syntax wise) but it'll do for now. I'd be interested in hearing others better solutions though.
Have a nice day.
Related
That's my situation:
I´ve got an HTML form, which is sperated in 4 sections, where the user can select some checkboxes and a drop down list.
When clicking on the button under this list, the selected elements will be thrown into an JS-Object.
Beneath that HTML form, I've got a result list, which is initially generated by a json file. When loading the page all objects in the json file are shown. Now the user can select some filters in the html form to filter this list.
Let me show you what I've got:
HTML form
<form class="filterThisResults">
<ul class="filter-list">
<button type="reset">delete filters</button>
<div class="search-filter-section">
<li>
<h2>Bereich</h2>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="Hochschule">
<label for="check1">Hochschule</label>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
<label for="check2">Angewandte Ingenierwissenschaften</label>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="Bauen & Gestalten">
<label for="check3">Bauen & Gestalten</label>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="BWL">
<label for="check4">BWL</label>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="Informatik">
<label for="check5">Informatik</label>
</li>
<li>
<input class="filterCheckbx" id="section" type="checkbox" name="section" value="Logistik">
<label for="check6">Logistik</label>
</li>
</div>
<div class="search-filter-group">
<li>
<h2>Gruppen</h2>
</li>
<li>
<input class="filterCheckbx" id="group" type="checkbox" name="group" value="Professoren">
<label for="check1">Professoren</label>
</li>
<li>
<input class="filterCheckbx" id="group" type="checkbox" name="group" value="Studenten">
<label for="check2">Studenten</label>
</li>
<li>
<input class="filterCheckbx" id="group" type="checkbox" name="group" value="Angestellte">
<label for="check3">Angestellte</label>
</li>
</div>
<div class="search-filter-location">
<li>
<h2>Standort</h2>
</li>
<li>
<input class="filterCheckbx" id="location" type="checkbox" name="location" value="Kaiserslautern">
<label for="check1">Kaiserslautern</label>
</li>
<li>
<input class="filterCheckbx" id="location" type="checkbox" name="location" value="Primasens">
<label for="check2">Primasens</label>
</li>
<li>
<input class="filterCheckbx" id="location" type="checkbox" name="location" value="Zweibrücken">
<label for="check3">Zweibrücken</label>
</li>
</div>
<div class="search-filter-topic">
<li>
<h2>Thema</h2>
</li>
<li>
<select class="filterCheckbx" id="topic" name="topic" size="3">
<option value="Lorem">Lorem</option>
<option value="Ipsum">Ipsum</option>
<option value="Dolor">Dolor</option>
</select>
</li>
</div>
<li>
<button class="submit-filter" type="submit">Ergebnisse anzeigen</button>
<li>
</ul>
JSON data
{
"searchtest" : [
{
"section": "Hochschule",
"group": "Professoren",
"location": "Kaiserslautern",
"date": "HS 2015/11",
"description" : "Lorem ipsum dolor sit amet",
"details" : "VZ",
"deadline" : "27.12.2015",
"topic" : "Lorem"
},
{
"section": "Angewandte Ingenierwissenschaften",
"group": "Studenten",
"location": "Kaiserslautern",
"date": "HS 2016/11",
"description" : "Consetetur sadipscing elitr",
"details" : "TZ",
"deadline" : "01.01.2016",
"topic" : "Ipsum"
},
(...)
]}
Push selected elements into an object
this.filterChkbx.on('click', function() {
checkedBox.push({
key: this.id,
value: this.value
});
console.log('Selected filter: ', checkedBox);
});
this.submitFilter.on('click', function () {
_this.filterList(checkedBox);
})
This works for me until here. Clicking on this.filterChkbx pushes the id and the value of the checked item to the object checkedBox. This works - I can log the selected elements of the html formular. Now I want to filter my result list. Here this.myObject references on the json array "searchtest". And thats where I am confused:
I iterate the json objects, and check if the key (of the filter object) matches el.section (which is the json object). When true, I have to check if the value of this key, is the same, as in that json object. And if that is true, show the item in the result.
filterList : function(filterArr){
var _this = this;
var result = [];
for(var i=0, i < this.myObject.length, i++) {
var el = this.myObject[i];
if (filterArr[i].key === el.section){
}
if (filterArr[i].key === el.group){
}
if (filterArr[i].key === el.location){
}
if (filterArr[i].key === el.topic){
}
}
}
I´d like to achieve this with pure JS/jQuery.
I hope you guys got what I want to achieve.
Kind regards, David
I made my own solution, I'd like to share with you:
filterList : function(filterObj){
var _this = this;
var result = [];
for (var i = 0; i < _this.myObject.length; i++) {
var el = this.myObject[i];
for (var j = 0; j < filterObj.length; j++){
if (filterObj[j].filterEl == el.section){
console.log('Filter section triggered on ', el.section);
} else if (filterObj[j].filterEl == el.group){
console.log('Filter group triggered on ', el.group);
} else if (filterObj[j].filterEl == el.location){
console.log('Filter location triggered on ', el.location);
} else if (filterObj[j].filterEl == el.topic){
console.log('Filter topic triggered on ', el.topic);
};
}
};
}
This does the comparsion, now just append the elements.
If I understood your problem well, your filter function might look like this:
filterList : function(filterArr){
var _this = this;
var result = [];
for(var i=0, i < this.myObject.length, i++) {
var el = this.myObject[i];
if (filterArr[i].key === 'section'){
}
if (filterArr[i].key === 'group'){
}
if (filterArr[i].key === 'location'){
}
if (filterArr[i].key === 'topic'){
}
}
}
Since key seems to be initialized with your object's property's name, then it is a string which value is the litteral property's name (ie: topic, deadline and so on).
el.section will actually give you the object's section's value but not the name of the property.
The idea is to filter divs by comparing dynamically generated classes for divs and dynamically generated id's for checkboxes, where only divs with classes matching id's of checked checkboxes would show.
First subnav filters everything fine. However, subnav2 dosen't do anything.
Simplified html of it
<div class="itemswrap">
<div class="inditem dynamic1 dynamic12"></div>
<div class="inditem dynamic2 dynamic22"></div>
<div class="inditem dynamic3 dynamic32"></div>
<div class="inditem dynamic2 dynamic42"></div>
</div>
<ul class="subnav">
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic1" />
<label for="dynamic1">whatever label</label>
</li>
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic2" />
<label for="dynamic1">whatever label</label>
</li>
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="dynamic3" />
<label for="dynamic1">whatever label</label>
</li>
</ul>
<ul class="subnav2">
<li class="lifilter2">
<input type="checkbox" class="filtercheck2" id="dynamic12" />
<label for="dynamic12">whatever label</label>
</li>
<li class="lifilter2">
<input type="checkbox" class="filtercheck2" id="dynamic22" />
<label for="dynamic12">whatever label</label>
</li>
<li class="lifilter2">
<input type="checkbox2" class="filtercheck2" id="dynamic32" />
<label for="dynamic12">whatever label</label>
</li>
</ul>
And the js i've got so far.
var $filters = $('.filtercheck').change(function() {
var $items = $('.inditem').hide();
var filters = $filters.filter(':checked').map(function() {
return '.' + this.id;
}).get();
if (filters.length) {
$items.filter(filters.join()).show();
} else {
$items.show();
}
});
var $filtersb = $('.filtercheck2').change(function() {
var $itemsb = $('.inditem').hide();
var filtersb = $filtersb.filter(':checked').map(function() {
return '.' + this.id;
}).get();
if (filtersb.length) {
$itemsb.filter(filters.join()).show();
} else {
$itemsb.show();
}
});
I see that you fixed it but I had created a jsfiddle for your problem, akin to one I had to face in another project. Basically, you create a string from the checked checkboxes IDs and use that to show only those items that match the elements you checked. If no elements are checked, all items are shown (i.e. no filters are applied).
$("input[type='checkbox']").change(function()
{
var list = "";
$("input[type='checkbox']").each(function()
{
if(this.checked)
{
list = list + '.' + $(this).attr('id');
}
});
if(list !=='')
{
$("div.inditem").hide();
$(list).show();
}
else {
$("div.inditem").show();
}
});
Hi I've got a form with nested Checkbox on three level
With Jquery I need to checked/uncheked all the children when I check a parent level... and of course uncheck the parent if at least one of the children is uncheck
I try but never success that's why I'm calling your help :)
Many thanks to all
My html code :
Demo here : http://jsfiddle.net/SENV8/86/
<fieldset class="floral">
<input type="checkbox" class="familybox cbox">
<label>Level 1</label>
<ul class="valuelist">
<li>
<input type="checkbox" class="cbox mainoption">
<label>Level 2</label>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" class="cbox mainoption">
<label>Level 2</label>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
<ul class="suboption">
<li>
<input type="checkbox" class="cbox">
<label>Level 3</label>
</li>
</ul>
</li>
</ul>
</fieldset>
EDIT :
I'm here with my script:
$('.familybox').change(function() {
var getparent = $(this).closest('fieldset').attr('class');
if($('.'+getparent+' .familybox').is(':checked')){
$('.'+getparent+' .valuelist input:checkbox').prop('checked', true);
} else if($('.'+getparent+' .familybox').not(':checked')) {
$('.'+getparent+' .valuelist input:checkbox').prop('checked', false);
}
});
See I have Implemented your requirement.
It is needed to make some changes in HTML which I have did in JSfiddle.
Total Jquery script is as follow:
<script type="text/javascript">
$(document).ready(function () {
$.extend($.expr[':'], {
unchecked: function (obj) {
return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
}
});
$(".floral input:checkbox").live('change', function () {
$(this).next('ul').find('input:checkbox').prop('checked', $(this).prop("checked"));
for (var i = $('.floral').find('ul').length - 1; i >= 0; i--) {
$('.floral').find('ul:eq(' + i + ')').prev('input:checkbox').prop('checked', function () {
return $(this).next('ul').find('input:unchecked').length === 0 ? true : false;
});
}
});
});
</script>
To see live demo:
JSFiddle
I have been looking for a 'complete' solution to nesting parent child checkboxes that change state correctly based on a hierarchy.
Most 'solutions' do not work or only work to one level. They also require you to name the checkboxes in a particular way.
This Stack Overflow discussion covers the main points but also provide a good solution discovered by Rory here.
I have tested it within my development project and it works perfectly standalone. However, I am using Bootstrap 2.x and for checkboxes
I have a JSFiddle which shows the working example code, then my version with a disabled parent checkbox and then the bootsrap code version which does not work.
<!DOCTYPE html>
<body>
<!-- Raw working example from site http://css-tricks.com/indeterminate-checkboxes/ -->
<b>Raw working example</b>
<p>
<ul>
<li>
<input type="checkbox" name="tall" id="tall">
<label for="tall">Tall Things</label>
<ul>
<li>
<input type="checkbox" name="tall-1" id="tall-1">
<label for="tall-1">Buildings</label>
</li>
<li>
<input type="checkbox" name="tall-2" id="tall-2">
<label for="tall-2">Giants</label>
<ul>
<li>
<input type="checkbox" name="tall-2-1" id="tall-2-1">
<label for="tall-2-1">Andre</label>
</li>
<li>
<input type="checkbox" name="tall-2-2" id="tall-2-2">
<label for="tall-2-2">Paul Bunyan</label>
<ul>
<li>
<input type="checkbox" name="tall-2-2-1" id="tall-2-2-1">
<label for="tall-2-2-1">Son</label>
</li>
<li>
<input type="checkbox" name="tall-2-2-2" id="tall-2-2-2">
<label for="tall-2-2-2">Daughter</label>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="tall-3" id="tall-3">
<label for="tall-3">Two sandwiches</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="short" id="short">
<label for="short">Short Things</label>
<ul>
<li>
<input type="checkbox" name="short-1" id="short-1">
<label for="short-1">Smurfs</label>
</li>
<li>
<input type="checkbox" name="short-2" id="short-2">
<label for="short-2">Mushrooms</label>
</li>
<li>
<input type="checkbox" name="short-3" id="short-3">
<label for="short-3">One Sandwich</label>
</li>
</ul>
</li>
</ul>
<hr>
<!-- Non Bootstrap Example -->
<b>My initial code example - Is Working</b>
<p>
<ul>
<li>
<input type="checkbox" name="" value="" disabled><strong>Ford</strong>
<ul>
<li>
<input type="checkbox" name="" value="">Fiesta</label>
</li>
<li>
<input type="checkbox" name="" value="">Focus</label>
</li>
<li>
<input type="checkbox" name="" value="">Mondeo</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="" value="" disabled><strong>Vauxhall</strong>
<ul>
<li>
<input type="checkbox" name="" value="">Corsa</label>
</li>
<li>
<input type="checkbox" name="" value="">Astra</label>
</li>
<li>
<input type="checkbox" name="" value="">Vectra</label>
</li>
</ul>
</li>
</ul>
<hr>
<!-- Bootstrap Example -->
<b>Bootstrap based code example - Not Working</b>
<p>
<ul>
<li>
<label class="checkbox">
<input type="checkbox" name="" value="" disabled><strong>Ford</strong>
</label>
<ul>
<li>
<label class="checkbox">
<input type="checkbox" name="" value="">Fiesta</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" name="" value="">Focus</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" name="" value="">Mondeo</label>
</li>
</ul>
</li>
<li>
<label class="checkbox">
<input type="checkbox" name="" value="" disabled><strong>Vauxhall</strong>
</label>
<ul>
<li>
<label class="checkbox">
<input type="checkbox" name="" value="">Corsa</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" name="" value="">Astra</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" name="" value="">Vectra</label>
</li>
</ul>
</li>
</ul>
$(function () {
// Apparently click is better chan change? Cuz IE?
$('input[type="checkbox"]').change(function (e) {
var checked = $(this).prop("checked"),
container = $(this).parent(),
siblings = container.siblings();
container.find('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
});
function checkSiblings(el) {
var parent = el.parent().parent(),
all = true;
el.siblings().each(function () {
return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
});
if (all && checked) {
parent.children('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
});
checkSiblings(parent);
} else if (all && !checked) {
parent.children('input[type="checkbox"]').prop("checked", checked);
parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
checkSiblings(parent);
} else {
el.parents("li").children('input[type="checkbox"]').prop({
indeterminate: true,
checked: false
});
}
}
checkSiblings(container);
});
});
My understanding is that the code needs to be changed somewhere to use parents or closest. Can someone who is a much better code please help identify where the change needs to happen to get the Bootstrap version working.
Take a look at the free JSTree user control. It is JavaScript-based, open source and allows to be configured for multiple styles of tree views, for example:
Since the checkboxes displayed here are just images, you can replace them by radio buttons easily, and via event handling you can disallow multiple selections so they behave like radio buttons if required.
This is achieved by specifying the "checkbox" plugin as follows (see the snippet I provided below for the complete working code):
$(function () {
$("#demo1")
.jstree({
"themes": {
"theme": "apple","dots": false,"icons": false
},
"plugins": ["themes", "html_data", "checkbox", "sort", "ui"]
});
});
The corresponding HTML structure looks like this, just include it in the body of your page:
<div id="demo1" class="demo" style="height:100px;">
<ul>
<li id="phtml_1"> Root node 1
<ul>
<li id="phtml_2"> Child node 1
</li>
<li id="phtml_3"> Child node 2
</li>
</ul>
</li>
<li id="phtml_4"> Root node 2
</li>
</ul>
</div>
To get the checked values, use this function (assuming you have created a div with id="listForDisplay" as I did in the JSFiddle example):
var $listForDisplay = $("#listForDisplay");
function displayList(data) { // see: https://www.jstree.com/docs/events/
var i, j, r = [];
for (i = 0, j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).text);
}
$listForDisplay.html('Selected: ' + r.join(', '));
}
This code can either be triggered in a click event or you can bind JSTree events like I did. Appending the following to the previous JavaScript snippet does the job:
$("#demo1")
.on('loaded.jstree', function (e, data) {
displayList(data);
})
.on('change_state.jstree', function (e, data) {
displayList(data);
});
Note: When a parent node is selected, the parent name is listed along with the childs. If only the childs are selected, the related parent(s) will not be listed.
You can find more about the options specifying the behaviour of this plugin here.
Runnable code snippet (complete code)
$(function() {
var $demo1 = $("#demo1");
var $listForDisplay = $("#listForDisplay");
function displayList(data) { // see: https://www.jstree.com/docs/events/
var i, j, r = [];
for (i = 0, j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).text);
}
$listForDisplay.html('Selected: ' + r.join(', '));
}
$demo1.jstree({
"themes": {
"theme": "apple",
"dots": false,
"icons": false
},
"plugins": ["themes", "html_data", "checkbox", "sort", "ui"]
});
$demo1.on('loaded.jstree', function(e, data) {
displayList(data);
});
$demo1.on('changed.jstree', function(e, data) {
displayList(data);
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</head>
<body>
<div id="demo1" class="demo" style="height:100px;">
<ul>
<li id="phtml_1"> Root node 1
<ul>
<li id="phtml_2"> Child node 1
</li>
<li id="phtml_3"> Child node 2
</li>
</ul>
</li>
<li id="phtml_4"> Root node 2
</li>
</ul>
</div>
<br/>
<div id="listForDisplay" />
</body>
you can try something like this
$(function () {
$('input[type="checkbox"]').change(function (e) {
var checked = $(this).prop("checked"),
container = $(this).closest("li"),//get closest li instead of parent
siblings = container.siblings();
container.find('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
});
function checkSiblings(el) {
var parent = el.parent().parent(),
all = true,
parentcheck=parent.children("label");//get the label that contains the disabled checkbox
el.siblings().each(function () {
return all = ($(this).find('input[type="checkbox"]').prop("checked") === checked);
});
//use parentcheck instead of parent to get the children checkbox
if (all && checked) {
parentcheck.children('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
});
checkSiblings(parent);
} else if (all && !checked) {
parentcheck.children('input[type="checkbox"]').prop("checked", checked);
parentcheck.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
checkSiblings(parent);
} else {
parentcheck.children('input[type="checkbox"]').prop({
indeterminate: true,
checked: false
});
}
}
checkSiblings(container);
});
});
http://jsfiddle.net/Mvs87/2/
I have following HTML:
<form action="/Config.aspx/SDKHome/SaveSections" id="SaveSections" method="post">
<input name="[0].SchemaName" type="hidden" value="contactSection" />
<ul creator="attrCreator" data-dojo-type="dojo.dnd.Source" class="section container dojoDndSource"
style="list-style-type: none;">
<li class="dojoDndItem">
<input name="[0].DefinedAttributes[0].SchemaName" type="hidden" value="firstname" />
</li>
<li class="dojoDndItem">
<input name="[0].DefinedAttributes[1].SchemaName" type="hidden" value="jobtitle" />
</li>
</ul>
</form>
I want to add this item to the list:
<li class="dojoDndItem">
<input name="[X].DefinedAttributes[Y].SchemaName" type="hidden" value="itemToAdd" />
</li>
How can I replace X and Y (and increment this values by all following items), to have following html as result:
<form action="/Config.aspx/SDKHome/SaveSections" id="SaveSections" method="post">
<input name="[0].SchemaName" type="hidden" value="contactSection" />
<ul creator="attrCreator" data-dojo-type="dojo.dnd.Source" class="section container dojoDndSource"
style="list-style-type: none;">
<li class="dojoDndItem">
<input name="[0].DefinedAttributes[0].SchemaName" type="hidden" value="firstname" />
</li>
<li class="dojoDndItem">
<input name="[0].DefinedAttributes[1].SchemaName" type="hidden" value="itemToAdd" />
</li>
<li class="dojoDndItem">
<input name="[0].DefinedAttributes[2].SchemaName" type="hidden" value="jobtitle" />
</li>
</ul>
</form>
Try this :
dojo.require("dojo.dnd.Source");
dojo.ready(function(){
var ul = dojo.query("ul.section").pop();
var lastLiInput = dojo.query("ul li:last-child>input").pop();
var lastLiInputName = dojo.attr(lastLiInput, "name");
var X = 1 + parseInt(lastLiInputName.replace(/.*DefinedAttributes\[(\d+)\].*/, '$1'));
var newLi = dojo.create("li", { class : "dojoDndItem" }, ul);
dojo.create("input", {
name : "[0].DefinedAttributes[" + X + "].SchemaName",
type : "hidden",
value : "otherValue"
}, newLi);
});
Not sure the selectors I used will work in all browsers, but you get the idea... regex to get each X and Y, increment, and place at the right position using dom selectors. Just adapt that to your dnd logic...
See demo here, with visible inputs rather than hidden : http://jsfiddle.net/psoares/FSCdW