Create new Element in a loop

Question

I am having a major issue that i want to add some data to a table row on specific td by adding multiple input elements with the help of ajax. I'm also able to do that but my issue is when i have multiple rows on table and i add the element it add on the first row of table but i want to add to that row only here what im trying to do. enter image description here

the code i'm using for it

<script type="text/javascript" src="assets/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
var counter = 1;
function dep()
{
    if(counter>9){
        alert("Only 10 textboxes allow");
        return false;
    }   
    var newTextBoxDiv = jQuery(document.createElement('div'))
        .attr("id", 'dependent' + counter);
    newTextBoxDiv.after().html( '<input type="text" class="form-control" name="checklistname[]' + counter +  '"  placeholder="Add Checklist" required>');
    newTextBoxDiv.appendTo("#dependent");
    counter++;
}
function depdel()
{
    if(counter==1){
       alert("No more textbox to remove");
        return false;
    }  
    counter--;
    jQuery("#dependent" + counter).remove();
}
</script>
<table>
    <thead>
        <tr class="myrows">
            <th>Project </th>
            <th>Action</th>
        </tr>
    </thead>
    <tr>
        <?php for($i=0;$i<=2;$i++) { ?>
            <td>my project<?php echo $i;?></td>
            <td> <form action="" method="post" id="form">
                <div id="dependent" class="newclass">
                </div>
                <input type="submit" id="mybutton" value="Save"  title="Save">
                <a href="#" class="action" title="Add" onClick="dep();"> Add </a>
                <a href="#" class="action" title="Delete" onClick="depdel();">delete </a>
            </td>
        <?php }?>
    </tr>
</table>

kindly check the screenshot and the html is to show what i'm trying to do. thanks

Vijay · Accepted Answer · 2015-01-23 12:23:38Z

1

in HTML :

<a href="#" class="action" title="Add" onClick="dep(this);"> Add </a>

in javaScript:

var counter = 1;
function dep(obj)
{
   var myDependent= $(obj).closest('tr').find("#dependent");
if(counter>9){
alert("Only 10 textboxes allow");
return false;
}   
var newTextBoxDiv = jQuery(document.createElement('div'))
.attr("id", 'dependent' + counter);
newTextBoxDiv.html( '<input type="text" class="form-control" name="checklistname[]' + counter +  '"  placeholder="Add Checklist" required>');
newTextBoxDiv.appendTo(myDependent);
counter++;
}

answered Jan 23, 2015 at 12:23

Vijay

3,0231 gold badge18 silver badges24 bronze badges

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

Comments

B-boom · Accepted Answer · 2015-01-23 12:55:41Z

The problem in your code is that you can only have one of an ID on a page. When you have more than one JavaScript takes always the first one.

When you use the jQuery listner you can use the parent function to get the td you want to add a input in. You don't even need a counter variable because when you use the jQuery selector you can get the number of that item directly from jQuery.

You can use something like the code below.

In HTML use

<a href="#" class="action add" title="Add"> Add </a>
<a href="#" class="action depdel" title="Delete" >delete </a>

In Javascript use

jQuery(document).ready(function() {
    jQuery('.add').click(function() {
        if (jQuery('.dependent', $(this).parent()).length > 9) {
            alert("Only 10 textboxes allow");
            return false;
        }
        jQuery('#dependent', $(this).parent()).append('<div class="dependent"><input type="text" class="form-control" name="checklistname[]"  placeholder="Add Checklist" required></div>');

    })
    jQuery('.depdel').click(function() {

        if (jQuery('.dependent', $(this).parent()).length == 0) {
            alert("No more textbox to remove");
            return false;
        }
        jQuery(" .dependent", $(this).parent()).last().remove();
    })
})

Collectives™ on Stack Overflow

Create new Element in a loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related