Databases
StackOverflow2013
Postsdbo
POHow to reference dynamic form elements and keep the previous elements working?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to reference dynamic form elements and keep the previous elements working?
    primarykey
    data
    text
    <p>I've done a lot of searching on this, so please forgive me if I've missed it, but this seems to be pretty unique.</p> <p>I've got a table in a form that I need rows (and fields) to be dynamically added, and then I need jQuery to manipulate some of those fields, and then they must be passed off to PHP to be dumped into a MySQL database.</p> <p>I've got everything working except the part where jQuery manipulates the fields. Basically what should happen is field 'unitprice' gets multiplied by field 'qty' and inserts the total in 'totalprice' field. Problem is, as I have to have these fields have different names so they'll all pass to PHP, jQuery will only operate on the first field (when I remove the + count in the math code), or the most recently added (when the + count is there).</p> <p>Here is my jQuery code to add rows (note to make it look right on the page and have one row available to begin with, I had to have two blocks, one to append immediately, and one on click of the link:</p> <pre><code> $(function(){ $('#itemstablejquery').append( '&lt;div class="jquery_items"&gt;&lt;table id="jquery_items" width="100%" border="1" cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td width="10%"&gt;' + '&lt;input size="8" id="itemnum_' + count + '" name="itemnum[]' + '" type="text" /&gt;&lt;/td&gt;' + '&lt;td&gt;&lt;input size="' + descwidth + '" id="description_' + count + '" name="description[]' + '" type="text" /&gt;&lt;/td&gt;' + '&lt;td width="5%"&gt;&lt;input size="2" id="qty_' + count + '" name="qty[]' + '" type="text" /&gt;&lt;/td&gt;' + '&lt;td width="10%"&gt;&lt;input size="' + unitpricewidth + '" id="unitprice_' + count + '" name="unitprice[]' + '" type="text" /&gt;&lt;/td&gt;' + '&lt;td width="11%"&gt;&lt;input size="'+ totalpricewidth + '" id="totalprice_' + count + '" name="totalprice[]' + '" type="text" /&gt;&lt;/td&gt;' + '&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;' ); }); var count = 0; $(function(){ $('p#add_field').click(function(){ count += 1; $('#itemstablejquery').append( '&lt;table id="jquery_items" width="100%" border="1" cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td width="10%"&gt;' + '&lt;input size="8" id="itemnum_' + count + '" name="itemnum[]' + '" type="text" /&gt;&lt;/td&gt;' + '&lt;td&gt;&lt;input size="' + descwidth + '" id="description_' + count + '" name="description[]' + '" type="text" /&gt;&lt;/td&gt;' + '&lt;td width="5%"&gt;&lt;input size="2" id="qty_' + count + '" name="qty[]' + '" type="text" /&gt;&lt;/td&gt;' + '&lt;td width="10%"&gt;&lt;input size="' + unitpricewidth + '" id="unitprice_' + count + '" name="unitprice[]' + '" type="text" /&gt;&lt;/td&gt;' + '&lt;td width="11%"&gt;&lt;input size="'+ totalpricewidth + '" id="totalprice_' + count + '" name="totalprice[]' + '" type="text" /&gt;&lt;/td&gt;' + '&lt;/tr&gt;&lt;/table&gt;' ); }); }); </code></pre> <p>Here is the math jQuery:</p> <pre><code>$("table#jquery_items").live("click", function(){ $('#totalprice_' + count).css('color', 'red') $('input').blur(function() { var price = $('#unitprice_' + count).val() var quantity = $('#qty_' + count).val() var total = price * quantity; if (!isNaN(total)) { $('#totalprice_' + count).attr('value', total) } else { alert('Ops Error! Please only numbers') } }) }); </code></pre> <p>And my HTML:</p> <pre><code>&lt;div id="itemstablejquery"&gt;&lt;a name="items" id="items"&gt;&lt;/a&gt; &lt;/div&gt; &lt;p id="add_field"&gt;&lt;a href="#items"&gt;&lt;span&gt;&amp;raquo; Add another item...&lt;/span&gt;&lt;/a&gt;&lt;/p&gt; </code></pre> <p>Thanks</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USCameron Conner
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI know how to fix this but the incentive to write out an answer is just not there. This is a big question.
      singulars
      1. POHow to reference dynamic form elements and keep the previous elements working?
      1. USChaosPandion
    2. COCameron, some effort on cleaning up the formatting of your code would go a long way. If the code is easily readable, many will be more inclined to answer.
      singulars
      1. POHow to reference dynamic form elements and keep the previous elements working?
      1. USSampson
    3. COI haven't quite figured out how to place code blocks in here. I did the two newlines + four spaces on the first line thing, and it showed fine in my preview box but then on the post page it didn't display everything in a code box. (and I admit my formatting of the append stuff at the top is nasty to begin with)
      singulars
      1. POHow to reference dynamic form elements and keep the previous elements working?
      1. USCameron Conner
 

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.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload