PDA

View Full Version : innerHTML



sysout
02-13-2009, 07:03 AM
I wanna make a form like This :
- Insert Category / SubCategory
- Insert Quantity

Then There's a new table, which loop its row as many as qty (without submit, just use onChange)

Anybody can help me?

This is the crop of the code :

<div class="table"> <img src="img/bg-th-left.gif" width="8" height="7" alt="" class="left" /> <img src="img/bg-th-right.gif" width="7" height="7" alt="" class="right" />
<form>
<table width="533" cellpadding="0" cellspacing="0" class="listing">
<tr>
<th colspan="4" class="first">Add New</th>
</tr>
<tr>
<td colspan="2" class="first style1">Menu</td>
<td colspan="2">
<div align="left">
<select name="cat" id="cat">
<option value="0" selected="selected">-- Choose --</option>
<option value="1">Category</option>
<option value="2">Sub Category</option>
</select>

<select name="qty" id="qty" onchange="listMenu()">
<option value="0" selected="selected">-- Choose --</option>
<?php
for($i=1; $i<=30; $i++){
echo'<option value="'.$i.'">'.$i.'</option>';
}
?>
</select>
</div></td>
</tr>
</table>
</form>
</div>
<div class="table"> <img src="img/bg-th-left.gif" width="8" height="7" alt="" class="left" /> <img src="img/bg-th-right.gif" width="7" height="7" alt="" class="right" />
<form action="process/add-cat.php" method="post">
<table width="407" cellpadding="0" cellspacing="0" class="listing">
<tr>
<th width="29" class="first"><div align="center">No</div></th>
<th width="219"><div align="center">SubCategory</div></th>
<th width="157"><div align="center">Category</div></th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</div>

Falkon303
02-16-2009, 07:40 AM
I recommend using a dynamic ajax request, method=post, and sending the value of the option selected as your data.

there are some great examples of dynamic ajax requests on the net.

http://www.google.com/search?hl=en&q=ajax+post+example -

I recommend the scriptaculous pack - http://script.aculo.us/
your request function will resemble something like this -

function maketablething(value)
{
new Ajax.Request('ajreq.php', { method: 'post', parameters: { data: value}, onSuccess: function(s) {
$('subtable').update(s.responseText); }});
}.

this just calls a php file, and php handles the rest dynamically. Before you get too pumped about it though, be sure to read up on ajax exploits and the prevention thereof. I noticed you had php in there, so this should be a cinch for you to tackle.

the $('subtable'). part of that function is how ajax communicates to what element it wants to dump the innnerHTML into. So there is an element with the id "subtable" on the page, or the update fails.