Auto-generate variably...

transpar3nt · Jan 24, 2009

I am creating a small app for my business that creates sales
estimates. It will let the user enter the product information
(description, model, price, etc.) for as many products as they want
and then generates a printable estimate page using PHP.

When the user needs more than 1 item, they click "add item" and it
"creates" a new input table by changing it's style to not be hidden
anymore. It works great but requires me to have a pre-set number of
input boxes, therefor a limited number of products. I would like to
make it so javascript automatically generates each table as needed and
then posts the information that is entered, and nothing more (right
now, if someone enters info for 2 products, it still posts 20
fields... and it is limited to 20 products too).

I hope I was clear on this. I am sort of new to JavaScript, mostly
familiar with server-side like PHP.

Thanks for any help!

Elegie · Jan 24, 2009

transpar3nt wrote :

Hi,

When the user needs more than 1 item, they click "add item" and it
"creates" a new input table by changing it's style to not be hidden
anymore. It works great but requires me to have a pre-set number of
input boxes, therefor a limited number of products. I would like to
make it so javascript automatically generates each table as needed

<snip>

The following should provide you with an acceptable basis to build your
script; it illustrates how to use the "createElement", "appendChild" and
"innerHTML" methods, which are commonly employed to create new objects
(such as table rows/cells).

The code could have been made more elegant, substituting the "innerHTML"
approach with a "cloneNode" one; but it has to accommodate for IE
unfortunate shortcomings regarding form elements cloning (refusing to
update the name attribute of newly-created elements).

---
<head>
<style type="text/css">
th {
background-color:navy;
color:white;
}
..button {
background-color:white;
border-bottom:1px navy dotted;
color:navy;
font-weight:bold;
}
</style>
</head>

<body>
<table id="articles">
<thead>
<tr>
<th>Model</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="model1">
<option value="plane">Plane</option>
<option value="shuttle">Shuttle</option>
<option value="saucer">Flying Saucer</option>
</select>
</td>
<td>
<input type="text" name="quantity1">
</td>
<td>
<input type="text" name="price1">
</td>
</tr>
</tbody>
</table>

<script type="text/javascript">
// create the "add button" if the script is supported
if (
document.body &&
document.getElementsByTagName &&
document.getElementById &&
document.createElement &&
document.appendChild &&
typeof document.body.innerHTML!="undefined"
){
document.write(
"<span class='button' onclick='addLine()'>Add a line<\/span>"
) ;
}

// This function adds a new line
function addLine(){
// define form elements
// the "~~" token will be replaced by an updated counter
var formElements = [
"<select name='model~~'>"+
"<option value='plane'>Plane</option>"+
"<option value='shuttle'>Shuttle</option>"+
"<option value='saucer'>Flying Saucer</option>"+
"</select>",
"<input type='text' name='quantity~~'>",
"<input type='text' name='price~~'>"
] ;

// grab the table
var articles = document.getElementById("articles").tBodies[0] ;

// grab the counter from the last row
var counter = +(
/\d+$/.exec(
articles.rows[articles.rows.length-1].
getElementsByTagName("input")[0].name
)
)[0] + 1 ;

// create a new row
var newRow = document.createElement("tr") ;

// generate the cells, and append to the new row
var newCell ;
for (var ii=0; ii<formElements.length; ii++) {
newCell = document.createElement("td") ;
newCell.innerHTML = formElements[ii].replace(/~~/,counter) ;
newRow.appendChild(newCell) ;
}

// add the row to the table
articles.appendChild(newRow) ;
}
</script>
</body>

transpar3nt · Jan 24, 2009

OMG thank you so much. Yeah I had tried someone else's method using
the cloneNode idea but I ran into that IE issue so threw it out months
ago. If it helps clarify, I am dealing with a proprietary internal
network that forcefully uses IE 5.5 so it's been a little bit of a
pain. At least my AJAX works.

I'll try this tonight and follow up with you!

Only one table shows up with the information	2	Mar 29, 2023
Checking dynamically populated data using ajax with user entered value	5	Apr 11, 2020
Login form no longer working	2	Feb 18, 2023
Woocommerce Product Add-ons - Auto-select first option	1	Apr 15, 2016
Rock, Paper, Scissor game. Im getting TypeError, unsupported operand type(s) for -=: 'NoneType' and 'int'	2	Aug 29, 2023
Bash scripts for web apps	1	Jan 16, 2023
SOLVE THIS IF YOU CAN PYTHON MASTER	7	Jan 30, 2023
Why is this WordPress comments form not submitting?	1	Jan 12, 2020

Auto-generate variably...

transpar3nt

Elegie

transpar3nt

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads