it.rss24h.com

Solving technology problems

Home » Internet

Add row using AJAX for CSS tableless PHP/MySQL form

July 24th, 2009 | xumi | 0 Comments »

Question:

I created a form using CSS instead of tables. Here’s what I need…I need to add rows dynamically (no reloading the page), keep track of the row number (which will be added to MySQL DB) and each row will contain text inputs to be added to MySQL DB. I can’t just unhide existing rows, as I don’t know how many rows will finally be for each section. Here’s what I have so far for the layout.

<div id=”prod_details”>
<fieldset>
<legend>Product Details</legend>
<div>
<b>Add additional Feature >></b> <input type=”button” value=”Add Row” onclick=”addRowToFeats();” /><br /><br />
<label for=”feat_text”>Feature Text</label>
<input type=”text” name=”feat_text” size=”25″ maxlength=”25″ /><br />
<hr />
<b>Add additional Accessory >></b> <input type=”button” value=”Add Row” onclick=”addRowToAcces();” /><br /><br />
<label for=”acces_text”>Feature Text</label>
<input type=”text” name=”acces_text” size=”25″ maxlength=”25″ /><br />
<hr />
<b>Add additional Specifications >></b> <input type=”button” value=”Add Row” onclick=”addRowToSpecs();” /><br /><br />
<label for=”spec_head”>Specification Head</label>
<input type=”text” name=”spec_head” size=”25″ maxlength=”25″ /><br />
<label for=”spec_text”>Specification Text</label>
<input type=”text” name=”spec_text” size=”25″ maxlength=”25″ /><br />
</div><!– inset eof //–>
</fieldset>
</div><!– prod_details eof //–>

I want the javascript buttons to add rows, but don’t know what to place in that code to make the addition. I’m sure there’s some kinda AJAX needed or something of the like.

Thanks!
~Aus2Srq

Solution:

<!doctype html public “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Add Rows</title>
<script type=’text/javascript’ src=’../objDisplay.js’></script>
<script type=’text/javascript’>
//——————————————————————-
// Name: BOL()
// Role: Locate the node following the preceeding ‘<br>’ node
//——————————————————————-
function BOL( node ) {
while ( node.previousSibling.nodeName != ‘BR’ ) {
node = node.previousSibling;
}
return node;
}

//——————————————————————-
// Name: EOL()
// Role: Locate the ‘<br>’ node following the specified node
//——————————————————————-
function EOL( node ) {
while ( node.nodeName != ‘BR’ ) {
node = node.nextSibling;
}
return node;
}

//——————————————————————-
// Name: duplicate()
// Role: Duplicate part of the DOM from start to fini after fini.
//——————————————————————-
function duplicate( start, fini ) {
var there = fini;
for ( var here = start; here != fini; here = here.nextSibling ) {
var clone = here.cloneNode( true );
there = insertAfter( clone, there );
}
insertAfter( document.createElement( ‘br’ ), there );
}

function insertAfter( node, afterHere ) {
return afterHere.parentNode.insertBefore( node, afterHere.nextSibling );
}

function addRowToFeats() {
var feats = document.getElementsByName( ‘feat_text’ );
var feat = feats[ feats.length - 1 ];
duplicate( BOL( feat ), EOL( feat ) );
}

function addRowToAcces() {
var texts = document.getElementsByName( ‘acces_text’ );
var text = texts[ texts.length - 1 ];
duplicate( BOL( text ), EOL( text ) );
}

function addRowToSpecs() {
var heads = document.getElementsByName( ’spec_head’ );
var head = heads[ heads.length - 1 ];
var tails = document.getElementsByName( ’spec_text’ );
var tail = tails[ tails.length - 1 ];
duplicate( BOL( head ), EOL( tail ) );
}
</script>
</head>
<body>
<div id=”prod_details”>
<fieldset>
<legend>Product Details</legend>
<div>
<b>Add additional Feature >></b> <input type=”button” value=”Add Row” onclick=”addRowToFeats();” /><br /><br />
<label for=”feat_text”>Feature Text</label>
<input type=”text” name=”feat_text” size=”25″ maxlength=”25″ /><br />
<hr />
<b>Add additional Accessory >></b> <input type=”button” value=”Add Row” onclick=”addRowToAcces();” /><br /><br />
<label for=”acces_text”>Accessory Text</label>
<input type=”text” name=”acces_text” size=”25″ maxlength=”25″ /><br />
<hr />
<b>Add additional Specifications >></b> <input type=”button” value=”Add Row” onclick=”addRowToSpecs();” /><br /><br />
<label for=”spec_head”>Specification Head</label>
<input type=”text” name=”spec_head” size=”25″ maxlength=”25″ /><br />
<label for=”spec_text”>Specification Text</label>
<input type=”text” name=”spec_text” size=”25″ maxlength=”25″ /><br />
</div><!– inset eof //–>
</fieldset>
</div>
</body>
</html>