html append by jquery problem

Question

Hi I am appending columns to a row though jquery. I have a row which looks like this

<form action="certifications.php?action=addnew_save" method="post">
<tr id="add_new_<?php echo($v_id);?>" valign="top" bgcolor="#EEEEEE"></tr>
</form>

Now What I am doing, I am appending some <td> to this row. My javascript function looks like this

var sr=document.getElementById('hidden_'+vid).value;
var append='';
    append+='<td width="40" align="center">'+sr+'</td>';
    append+='<input type="hidden" value="'+vid+'">';
    append+='<td width="200" align="center"><input type="text" name="short_name" size="25" autocomplete="off" value="" /></td>';
    append+='<td width="200" align="center"><input type="text" name="full_name" size="25" autocomplete="off" value="" /></td>';
    append+='<td width="80" align="center"></td>';
    append+='<td width="80" align="center"><input type="checkbox" name="feature" /></td>';
    append+='<td width="80" align="center"><input type="text" name="order" size="2" value="" /></td>';
    append+='<td width="80" align="center"><input type="checkbox" name="hidden" /></td>';
    append+='<td width="80" align="center"></td>';
    append+='<td width="50" class="style3" align="center"></td>';
    append+='<td width="50" class="style3" align="center"><INPUT TYPE="submit"  VALUE="Submit" NAME="Submit"></td>';
    append+='<td width="50" class="style3" align="center"><a href="certifications.php?action=delete&id="onclick="if(confirm(\'Are you sure you want to Delete it ?\')){return true;}else{return false;}" >Delete</a></td>';
    append+='<td width="80" align="center"></td>';
    jQuery('#add_new_'+vid).append(append);

The columns are appended but the problem is of form tag. From my code I want the after appending the html should look like this

<form action="certifications.php?action=addnew_save" method="post">
<tr id="add_new_<?php echo($v_id);?>" valign="top" bgcolor="#EEEEEE">
 <td widht="40">Value</td>
 Other tds
  .
  .
  .
  .
</tr>
</form>

But I am getting the form tag above <tr> and it looks like this

   <form action="certifications.php?action=addnew_save" method="post">
   </form>
    <tr>
     my <td>
    </tr>

What is the problem in appending? Why form tag is always above

Jeremy B. · Accepted Answer · 2011-06-08 14:02:48Z

5

Change

jQuery('#add_new_'+vid).append(append);

to

jQuery('#add_new_'+vid).html(append);

You don't want to add your code after the element, but you are trying to insert it into the tr.

UPDATE: Technically you should not be wrapping a <tr> with a <form>, its invalid HTML. A tr must be a child of a table, or tbody, and tr elements must have td as children. You'll either need a form in each td, or you'll need your form to wrap the entire table.

edited Jun 8, 2011 at 14:02

answered Jun 8, 2011 at 13:50

Jeremy B.

9,2323 gold badges48 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

html append by jquery problem

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related