I'm working on an invoice system and I've come to the part of line items.
For this, I have a table, that will eventually have a button to add another line item dynamically to the DOM.
Until that point, I am trying to work the kinks out of a single line item. In my case, it is the notes section.
For the input of notes, I have a P tag with some text and onclick of that element replaces it with a textarea.
<h2>line items</h2><hr>
<table id='lineitems'>
<tr>
<th>Order #</th>
<th>Style #</th>
<th>Item Name/Description</th>
<th>Quantity</th>
<th>Cost</th>
</tr>
<tr>
<td><input type='text' name='ladingnum' /></td>
<td><input type='text' name='invoicenum' /></td>
<td><input type='text' name='invoicenum' style='width:300px;'/></td>
<td><input type='text' name='invoicenum' /></td>
<td><input type='text' name='invoicenum' /></td>
</tr><tr><td colspan=4>
<div id='thenotes'>
<input type='hidden' class='comments' name='notes'/>
<textarea class='comments'></textarea>
<p class='edit'>[ click here to add notes ]</p>
</div>
</td></tr>
</table>
This is the jQuery I am using.
$(document).on('click', '.edit', function() {
var odata = $(this).closest("input:hidden").val();
if( odata == undefined ) odata = '';
$(this).closest("textarea.comments").val(odata).focus();
});
$(document).on('focusout', '.liveedit', function () {
var idata = $(this).val();
if( idata == '' ) idata = "[ click here to add notes ]";
$(this).prevAll("input:hidden").val(idata);
$(this).replaceWith("<p class='edit'>"+idata+"</p>");
});
Using that, I get this effect.
Page loads... the P tag has default content of click here to add notes. On click it turns into a textarea that contains whatever is in the hidden field. It is also supposed to focus on this newly created textarea....it is not focusing!
On top of that. I can't seem to get the value of the textarea to go into the hidden input field... What am I doing wrong?