StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
5912410
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2011-05-06T13:51:43.380
FavoriteCount
0
LastActivityDate
2011-05-09T13:09:32.357
LastEditDate
2011-05-09T13:09:32.357
LastEditorUserId
109026
OwnerUserId
109026
ParentId
5912217
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
<p>Each time your user clicks 'add' you want to take the values of your form inputs, build a new table row and show their selected values. This is easy enough, but you also need to add hidden inputs which represent what they chose in the select boxes above, so when the user clicks save, the whole form is posted and you can process the input. A simple example would be:</p> <pre><code><script> var count = 0; $('#add').click(function(event) { var code = $('#code').val(), component = $('#component').val() category = $('#category').val(), uom = $('#uom').val(); $('#table').append( '<tr>' + '<td>' + code + '<input type="hidden" name="record[' + count + '][code]"></td>' + '<td>' + component + '<input type="hidden" name="record[' + count + '][component]"></td>' + '<td>' + category + '<input type="hidden" name="record[' + count + '][category]"></td>' + '<td>' + uom + '<input type="hidden" name="record[' + count + '][uom]"></td>' + '</tr>' ); /* EDIT: I changed this to a DECREMENTOR so our keys don't overlap and override anything that is CURRENTLY in the database */ count --; }) </script> </code></pre> <p>This would attach a click handler to the add button. Each time it is clicked, we get the values of the inputs, store them in a variable, and build + append a new table row to your "preview table" below, which shows the values they selected and creates hidden inputs which can be processed later after the user clicks Save.</p> <p>Some notes about this: - it only gets the value of the selected inputs (so for the select boxes, the <code>value</code> of the <code>option</code> not the text. you'll have to do some extra work to replace that into your table row. - your entire table will have to be encapsulated in a <code><form></code> tag, which your <code>save</code> button must also be inside.</p> <p>Once you get the posted data to the server, do a <code>print_r($_POST)</code> to see what it looks like, you should be able to figure out how to process it fairly easily.</p> <p><strong>edit</strong> Okay, so you asked a lot of questions here, i'll try to address them as best I can, without writing a novel.</p> <ol> <li><p><em>What if someone mistakenly clicks on add and wants to cancel the addition (or changes their mind, whatever).</em><br> This actually isn't that hard. If this happens, just remove the appended table row from your table using <a href="http://docs.jquery.com/Manipulation/remove" rel="nofollow">$.remove</a>. Since all the hidden <code>input</code> elements are contained within the table row, they will also be removed from the form so when the user posts, the fields will not be present.</p></li> <li><p><em>How should you sanitize the data?</em><br> Sanitize the data when the user clicks <code>add</code>, as you populate the form, instead of afterwards, just before you post the form. It will be easier to deal with the input errors when the user clicks add than it will be to deal with them when they click save.</p></li> <li><p><em>How can you use this method if you want to modify existing records in the database?</em><br> There's a few different ways you can handle this. The easiest way is to pre-populate your form with table rows for each existing row in your database, and add an <code>id</code> (assuming you have an auto-increment primary key for each row) input value for that record on the table row. This way when you're processing the form, you'll be able to see if it's an existing record by checking for the existence of the <code>id</code> in the posted data and verifying that it exists in your database. If it doesn't have an <code>id</code> key you know that it is a new record and you need to do an <code>INSERT</code>, and if it does, you can do an <code>UPDATE</code> or leave the record be. For <code>DELETED</code> rows, you'll want to loop through your POSTed data before doing any <code>INSERT</code>s and gather the <code>id</code> values that have been posted and run a query something like <code>DELETE FROM table WHERE ID IN (<list of posted ids>)</code>. This will delete any rows that the user removed, then you can loop through the POSTed data again and insert the new rows.</p></li> </ol> <p>An example of pre-populating this table would look something like this:</p> <pre><code><?php $query = "SELECT * FROM bill_items WHERE bill_id = 123"; $result = mysql_query($query); $materials = array(); while ($row = mysql_fetch_assoc($query)) { $materials []= $row; } ?> <? foreach ($materials as $material): ?> <tr> <td> <?= $material['code']; ?> <input type="hidden" name="record[<?= $material['id']; ?>][code]" value="<?= $material['uom']; ?>"> </td> <td> <?= $material['component']; ?> <input type="hidden" name="record[<?= $material['id']; ?>][component]" value="<?= $material['uom']; ?>"> </td> <td> <?= $material['category']; <input type="hidden" name="record[<?= $material['id']; ?>][category]" value="<?= $material['uom']; ?>"> </td> <td> <?= $material['quantity']; ?> <input type="hidden" name="record[<?= $material['id']; ?>][quantity]" value="<?= $material['uom']; ?>"> </td> <td> <?= $material['uom']; ?> <input type="hidden" name="record[<?= $material['id']; ?>][uom]" value="<?= $material['uom']; ?>"> <input type="hidden" name="record[<?= material['id']; ?>][id]" value="<?= $material['id']; ?>"> </td> </tr> <? endforeach; ?> </code></pre> <p>Also, a note. I changed the javascript example code above. I changed <code>count++</code> to <code>count--</code> because when you pre-populate the form with data that is currently in the database you are going to use the <code>id</code> of the material in the input key. When a user adds new data, there is a possibility that the key generated with javascript (with <code>count++</code>) will collide with the existing table data. To rectify this, we change it to <code>count--</code>. This key (in javascript) really isn't important, it's just keeping our data grouped together, so a negative value here does not affect anything.</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POPHP Mysql & Jquery dynamically populating multiple records
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USJim Rubenstein
UserOwnerUserId
1. USJim Rubenstein
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. COThanks budy, Really appreciated..! we will work on the bases of **count**. What if someone by mistakly clicked on add and then he want to again cancel that then what will be the command? If after added all the system as u mentioned above when i click on final save, what should i write i means jquery code do i need to sterilized it? how can i put id wise. if what to modify same system at the same time etc. I know i am asking almost everything here but as i m new what to work on that project so search for right person or i can say instructor who can help me out. Thanks
  singulars
  PostPostId
  PO
  UserUserId
  USuser739346
2. COthere's a lot of questions here, i'll try to address them by editing my answer
  singulars
  PostPostId
  PO
  UserUserId
  USJim Rubenstein

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.