Submitted by Nicola Rainiero on 2013-03-04 (last updated on 2013-03-05)

Recently I have restarted to program the first web-app: the conversion of my storm sewer software. I focalized my attention on the input interface and despite the easiness and versatility of jQuery, I have got bogged down in details. I have reached a “result” but is full of bugs and not optimal.

jQuery has many methods for managing elements and content on a page, from simply replacing HTML, to precisely positioning new HTML in relation to a selected item, to completely removing tags and content from the page.

Once you have defined the element (ID or CLASS or a simple tag), you can add or remove or append whatever you want! For example I have created two buttons: "+" and "-". After clicking on the first, it appears a row where you can add a new type of pipe: label, roughness, section type and commercial diameters. I called this function addPipe() and here is it:

function addPipe(){if (typeof pipe === 'undefined') {pipe=0};pipe=pipe+1;$('#box_pipe').before('<div id="pipe"><ul class="onRow"><li><input class="txtClass" name="labelPipe" type="text" id="labelPipe" defaultVal="default" size="10" /></li><li><input class="txtClass" name="roughnessPipe" type="text" id="roughnessPipe" defaultVal="90" size="10" /></li><li><select id="secType"><option class="lang_circular" value="0">circular</option><option class="lang_ovoid" value="1">ovoid</option><option class="lang_otherSec" value="3">other section...</option></select></li><ul id="prova"></ul><li id="ultimo"><input class="txtClass" name="diametro" type="text" id="diametro" defaultVal="00.00" size="5" /><input type="button" name="add" style="width:20px" value="+" onclick="addDiam()" /><input type="button" name="add" style="width:20px" value="-" onclick="removeDiam()" /><input type="button" name="add" style="width:20px" value="O" onclick="orderDiam()" /></li></ul><br clear="all"></div>'); } I agree with you, the code is terrible and not clear at all. Sure, I will improve it. Fortunately the function for removing this pipe is better: function removePipe(){$("#pipe").remove();}

Into every pipe definition, I put another 3 functions to add, remove or order1 the commercial diameters.

function addDiam(){diametro = $('#diametro').val();pipe_number="<li id='penultimo'>" + diametro + "</li>";$('#prova').append(pipe_number);}function removeDiam(){$('#penultimo').remove();//$('penultimo').remove();}function orderDiam(){var li = $('ul#prova li');li.sort(function(a, b) { if(parseInt($(a).text()) > parseInt($(b).text())) return 1; else return -1;});$('ul#prova').empty().html(li);}

They work "well" until you add a new pipe type: there the situation becomes chaotic and wrong. If you want to see these bugs, click here, while I put all files here: storm_sewer_content.zip. I hope to fix them as fast as possible, but as usual I accept with pleasure any help, hint, correction, and so on!!!

## Related Content:

### Nicola Rainiero

A civil geotechnical engineer with the ambition to facilitate own work with free software for a knowledge and collective sharing. Also, I deal with green energy and in particular shallow geothermal energy. I have always been involved in web design and 3D modelling.