CODEWITHSUNDEEP
javascriptjqueryhtml
user1016403
user1016403

Reputation: 12621

Assingning unique id and names?

I have a html table with one prototype row. Prototype row has few tds and each td has input element. I am trying to clone the row and assign unique ids and names. But in Fire fox new ids and names are assigned properly. But in IE unique ids and names are not assigned. This logic works fine in FF. But in IE7 it does not work.

html Table:

<table class="myTable">
 <tr class="prototype">
    <td>
       <label for="myValue1">MY Value ONE:</label><br>
    <input class="required email" id="myValue1" type="text" value="" name="myValue1">
    </td>
     <td>
       <label for="myValue2">MY Value TWO:</label><br>
    <input class="required email" id="myValue2" type="text" value="" name="myValue2">
    </td>
     <td>
       <label for="myValue3">MY Value THREE:</label><br>
    <input class="required email" id="myValue3" type="text" value="" name="myValue3">
    </td>
    <td>
       <label for="myValue4">MY Value FOUR:</label><br>
    <input class="required email" id="myValue4" type="text" value="" name="myValue4">
    </td> 
 </tr>

</table>

JQuery code:

$("#new").click(function(e) {
        e.preventDefault();
               var d = new Date();
        var counter = d.getTime(); 
        var master = $("table.myTable");
        var prot = master.find("tr.prototype").clone();
        prot.removeClass('prototype');
        prot.addClass("contact");
        prot.find("#myValue1").attr('id',"myValue1"+counter);
        prot.find("#myValue2").attr('id',"myValue2"+counter);
        prot.find("#myValue3").attr('id',"myValue3"+counter);
        prot.find("#myValue4").attr('id',"myValue4"+counter);

        prot.find("#myValue1"+counter).attr('name',"myValue1"+counter);
        prot.find("#myValue2"+counter).attr('name',"myValue2"+counter);
        prot.find("#myValue3"+counter).attr('name',"myValue3"+counter);
        prot.find("#myValue4"+counter).attr('name',"myValue4"+counter);

            jQuery('table.myTable tr:last').before(prot);

    });

But with the above code unique ids and names are not assigned.am i doing anything wrong here?

Thanks!

Upvotes: 0

Views: 148

Answers (2)

developer82
developer82

Reputation: 13713

Sorry to tell you, but everything seems fine with what you did. I tried the example you gave on IE and it seems to work.

If you inspect it with Developer Tools you still see the old id? what version of IE?

here is the code I tried:

<html>
<head>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>


$(function() {
    $("#new").click(function(e) {

        e.preventDefault();
        var d = new Date();
        var counter = d.getTime(); 
        var master = $("table.myTable");
        var prot = master.find("tr.prototype").clone();
        prot.removeClass('prototype');
        prot.addClass("contact");

        //$(prot.find("input")[0])
        prot.find("#myValue1").attr('id',"myValue1"+counter);
        prot.find("#myValue2").attr('id',"myValue2"+counter);
        prot.find("#myValue3").attr('id',"myValue3"+counter);
        prot.find("#myValue4").attr('id',"myValue4"+counter);

        prot.find("#myValue1"+counter).attr('name',"myValue1"+counter);
        prot.find("#myValue2"+counter).attr('name',"myValue2"+counter);
        prot.find("#myValue3"+counter).attr('name',"myValue3"+counter);
        prot.find("#myValue4"+counter).attr('name',"myValue4"+counter);

            jQuery('table.myTable tr:last').before(prot);
        counter++;
    });
});

</script>
</head>
<body>

<table class="myTable">
 <tr class="prototype">
    <td>
       <label for="myValue1">MY Value ONE:</label><br>
    <input class="required email" id="myValue1" type="text" value="" name="myValue1">
    </td>
     <td>
       <label for="myValue2">MY Value TWO:</label><br>
    <input class="required email" id="myValue2" type="text" value="" name="myValue2">
    </td>
     <td>
       <label for="myValue3">MY Value THREE:</label><br>
    <input class="required email" id="myValue3" type="text" value="" name="myValue3">
    </td>
    <td>
       <label for="myValue4">MY Value FOUR:</label><br>
    <input class="required email" id="myValue4" type="text" value="" name="myValue4">
    </td> 
 </tr>

</table>

<input type="button" id="new" />

</body>
</html>

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

You don't needs IDs:

<label>MY Value ONE:<br /><input class="required email" type="text" name="myValue1[]" /></label>

Now you can clone this label as many times as needed, and it'll work.

On the server side, you can then access (for example in PHP) $_POST['myValue1'] as an array.

Upvotes: 2

Related Questions