Dynamic row insert after php javascript

Question

I have a dynamic row input when I click on a plus button. But my rows are added in the top of my page and I wish them to be added after my first row. Here is my code:

<?php
 ?>
<div style="width:90%;margin:auto;">
    <form method="post">
    <div id="itemRows">
    </div>
    </form>
</div>
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
    rowNum ++;
    var row = '<p id="rowNum'+rowNum+'"> <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
    jQuery('#itemRows').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
$( "name[]" ).insertAfter( "#add_name" );
}
function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
}
</script>

And here is my input:

<b>Dimanche</b> </br><?php echo $date1 ?>   
        </td>
        <!-- numéro de projet du dimanche -->
        <td>
            <span id="numpro" >
                <form method="post" action="" onsubmit="return false;">

                    <input onclick="addRow(this.form);" type="button" value="+" /> 
                    <input type="text" id="name" name="add_name"onkeypress="return handleEnter(event, this, 'task');"/>

                    <?php
                        if($result!=false && mysqli_num_rows($result)>0){
                            while($product = mysqli_fetch_array($result)):
                    ?>
                                <p id="oldRow<?=$product['id']?>">  <input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" /> <input type="checkbox" name="delete_ids[]" value="<?=$product['id']?>"> Mark to delete</p>
                            <?php
                            endwhile;

                            }
                            ?>
                </form>

user1696486 · Accepted Answer · 2014-03-31 13:55:25Z

2

Use JQuery's .append() method to add elements one after another within particular tag.

Change your code with below line:

$( "name[]" ).append( "#add_name" );

answered Mar 31, 2014 at 13:55

user1696486

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

1 Comment

TheBaconManWithouBacon Over a year ago

don't work they always add at the top of my page and this line of my code don't work too : $( "name[]" ).insertAfter( "#add_name" );

user3218338 · Accepted Answer · 2014-03-31 13:54:53Z

0

You can use the .after function in jQuery to append after a specific element https://api.jquery.com/after/

answered Mar 31, 2014 at 13:54

user3218338

6821 gold badge9 silver badges21 bronze badges

Comments

Mazzu · Accepted Answer · 2014-03-31 14:47:57Z

0

The append function / insertAfter will works.

But in your code you have used element property directly as

$( "name[]" ).insertAfter( "#add_name" ); or

$( "name[]" ).append( "#add_name" );

Instead, you need to use following :

Change the name value of textbox "name[]" to some other name say for example "name_test" and append it after "add_name"
Also you have used "add_name" as an id ( "#add_name" ) but it is a name attribute of input text box.
And you need to append the entire row created in row varaible after "add_name" You need to change code as

$("input[name=add_name]" ).after(row);

But, it still add on top of each element i.e. in stack fashion.

Hence, you need to go through "add_name" parent i.e form and append within that parent as

$( "input[name=add_name]" ).parent().append(row);

And It should work :)

Here is the DEMO Fiddle for above scenario.

answered Mar 31, 2014 at 14:47

Mazzu

2,84922 silver badges30 bronze badges

1 Comment

Mazzu Over a year ago

@TheBaconManWithouBacon, did you try this?

Collectives™ on Stack Overflow

Dynamic row insert after php javascript

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related