I am working on an online ordering form and am looking for some advice about my jQuery. I am re-developing the code base for this ordering form and improving what was created by a web design group years ago. The existing form uses Javascript to dynamically generate a new line of item information when the starts typing in the form. Reviewing the existing code there is close to 100 lines of JS (many being DOM manipulations) to add the HTML elements and so forth. I could redo it in JS no problem, but I would like to reduce this amount of code and convert the solution to jQuery. It is already in use for other parts of the site so I may as well utilize it.
I've written a function to facilitate this that I am toying around with to get the functionality down.
function createNewRow() {
//createNewRow.rc = 1;
if(typeof createNewRow.rc == 'undefined') {
createNewRow.rc = 1;
}
//Select the existing parent div
var div = $('div#div');
//Create a child div (container to the form elements)
var cell = $('<div class="block itemRow"></div>');
//Create "cells" (really divs) and form elements
itemQty = $('<div class="itemQty"></div>');
itemQty.append('<p>Quantity<p>')
.append('<input type="text" size="5" class="inputbox" name="ooItem[' + createNewRow.rc + '][qty]" id="' + createNewRow.rc + '" />');
itemUnit = $('<div class="itemUnit"></div>');
itemUnit.append('<p>UOM</p>');
unitSlct = $('<select name="ooItem[' + createNewRow.rc + '][unit]"></select>');
unitSlct.append('<option value="pc">PCS</option>')
.append('<option value="sq">SQ</option>')
.append('<option value="lf">LF</option>')
.append('<option value="ea">EA</option>');
itemUnit.append(unitSlct);
itemDesc = $('<div class="itemDescription"></div>');
itemDesc.append('<p>Description</p>')
.append('<input type="text" class="inputbox" name="ooItem[' + createNewRow.rc +'][description]" />');
itemColor = $('<div class="itemColor"></div>');
itemColor.append('<p>Color</p>')
.append('<input type="text" class="inputbox" name="ooItem[' + createNewRow.rc +'][color]" />');
itemText = $('<div class="itemTexture">');
itemText.append('<p>Texture</p>');
textSlct = $('<select class="inputbox" name="ooItem[' + createNewRow.rc +'][texture]"></select>');
textSlct.append('<option value="rough">Rough</option>')
.append('<option value="smooth">Smooth</option>');
itemText.append(textSlct);
cell.append(itemQty)
.append(itemUnit)
.append(itemDesc)
.append(itemColor)
.append(itemText);
//Append child div to the parent div
div.append(cell);
//Increase the row count
createNewRow.rc++;
}
JSFiddle is here: http://jsfiddle.net/McFRV/3/
From a functionality standoint this works fine. HTML rows are created as I like (minus the presentation layer of course) and the form information passes to the webserver correctly with all the information in the right places. What is bugging me a bit is how "dirty" this code appears to me. It seems as if using jQuery to make all that HTML in a bunch of strings is uncanny. Is there a better way to create chunks of HTML other than how I am going about it, or am I simply stressing about nothing?