CODEWITHSUNDEEP
jquery
user1196567
user1196567

Reputation:

How to change a cloned radiobuttons name property dynamically?

I have a HTML table which is inside of a div element and I wanted to generate multiple clones of that table whenever user clicks on a button. Up to now, I can generate infinite clones of the table and I can change the table's id dynamically.

My problem is, when I cloned the table, I also cloned the radio buttons inside of it. And all the clonned radiobuttons have the same name attribute. I need to change the name attribute because, although as much as I generate clone table I can only choose one of them.

I searched on the internet but mostly I found non-working answers. This is my script's latest version. Can you help me about how to do it guys?

<html>
    <head>
        <title> clone table - 2 </title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {  }); // jQuery is queried for DOM

            function clonetable () {
                var aydi = $('input#gizli').val();
                $table = $('table#tbl0').clone().attr('id', '#table'+aydi).appendTo("#div1");
                aydi++;
                $('input#gizli').val(aydi);     
            }
        </script>
    </head>

    <body>
        <input type="button" id="button1" name="clonner" value="clone table" onClick="clonetable()" />
        <input type="hidden" id="gizli" name="gizli" value="0" /> <br/> <br/>
        <div id="div1">
            <table border="1" id="tbl0" name="tbl0">
                <tr>
                    <td colspan="5">Question text will be here</td>
                </tr>
                <tr>
                    <td><input type="radio" id="A" name="ans" />answer1 <br /></td>
                    <td><input type="radio" id="B" name="ans" />answer2 <br /></td>
                    <td><input type="radio" id="C" name="ans" />answer3 <br /></td>
                    <td><input type="radio" id="D" name="ans" />answer4 <br /></td>
                    <td><input type="radio" id="E" name="ans" />answer5 <br /></td>
                </tr>
            </table>
        </div>
    </body>
</html>

Upvotes: 2

Views: 1248

Answers (3)

Ravi Kant
Ravi Kant

Reputation: 4995

Here is what are you looking for:

clone table using jquery

Hope this helps to solve your requirement

Upvotes: 1

Oybek
Oybek

Reputation: 7243

Here is what are you looking for:

http://jsbin.com/avubog/edit#javascript,html

EDIT

$(function() {
  $("#Cloner").click(function() {
    var clone =$(".Target").first().clone();
    $("input", clone).attr("name", "AnotherName");
    $("body").append(clone);
  });
});

The above code uses the overload of jquery, where the second parameter is a context in which the selection occurs.

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

Try this:

function clonetable() {
    var aydi = $('input#gizli').val();
    $table = $('table#tbl0').clone().attr('id', '#table' + aydi).appendTo("#div1");
    $("input[type='radio']", $table).prop("name", "ans_" + aydi);
    aydi++;
    $('input#gizli').val(aydi);     
}

Example fiddle

Upvotes: 3

Related Questions