CODEWITHSUNDEEP
jquerydynamiccontrols
Rama Priya
Rama Priya

Reputation: 2507

Dynamic radio button generated using jquery is not working with unique name

I have created a set of radio buttons. On a button click i have created, the set of controls. But radio button selection is not working seperately for each individual dynamically created set. By using unique name ony we can save all dynamic row input in a single column by considering as single value.

HTML

<div id="InputsWrapper">
<table>
<tbody>
<button id="sitebutton" class="button big float-left blue-gradient margin-top-5x">Click Me</button>
<tr>
<td><input type="radio" name="site[]" />first<br/><input type="radio" name="site[]" />second<br/></td>
<td><input type="text" name="sign[]" /></td>
</tr>
</tbody>
</table>
</div>

Jquery

$(document).ready(function() {
    var MaxInputs = 100; //Maximum input boxes allowed

    var FieldCount = 0;

    var InputsWrapper = $("#InputsWrapper"); //Input box wrapper ID

    var x = InputsWrapper.length; //Initial field count

    var sitefield = $("#sitebutton"); 

    $(InputsWrapper).sortable();

    $(sitefield).click(function()       
                {

    if (x <= MaxInputs)         
                    {
                        FieldCount++;           

                        $(InputsWrapper).append( '<tr id="InputsWrapper_0' + FieldCount + '">'+
                '<td><input type="radio" "id="one_' + FieldCount + '" name="site[]" />first<br/><input type="radio" "id="two_' + FieldCount + '" name="site[]" />second<br/></td>'+
                '<td><input type="text" "id="sign_' + FieldCount + '" name="sign[]" /></td>'+
            '</tr>');
                        x++;
                        }
                        return false;
                });


});

PHP

<?php
    if(!empty($_POST["save"])) {
        $conn = mysql_connect("localhost","root","");
        mysql_select_db("sample",$conn);
        $itemCount = count($_POST["site"]);
        $itemValues=0;
        $query = "INSERT INTO mytable (site,sign) VALUES ";
        $queryValue = "";
        for($i=0;$i<$itemCount;$i++) {
            if(!empty($_POST["site"][$i]) || !empty($_POST["sign"][$i])) {
                $itemValues++;
                if($queryValue!="") {
                    $queryValue .= ",";
                }
                $queryValue .= "('" . $_POST["site"][$i] . "', '" . $_POST["sign"][$i] . "')";
            }
        }
        $sql = $query.$queryValue;
        if($itemValues!=0) {
            $result = mysql_query($sql);
            if(!empty($result)) $message = "Added Successfully.";
        }
    }
?>

Upvotes: 0

Views: 916

Answers (2)

mahesh kalantre
mahesh kalantre

Reputation: 51

check link:https://jsfiddle.net/rymgxfvh/

p

lease put following code on Your js file:
    $(document).ready(function() {
    var FieldCount = 0;       
        $('#sitebutton').click(function(){
            $(InputsWrapper).append( '<tr id="InputsWrapper_0' + FieldCount + '">'+
                    '<td><input type="radio" "id="one_' + FieldCount + '" name="site' + FieldCount + '[]" />first<br/><input type="radio" "id="two_' + FieldCount + '" name="site' + FieldCount + '[]" />second<br/></td>'+
                    '<td><input type="text" "id="sign_' + FieldCount + '" name="sign' + FieldCount + '[]" /></td>'+
                '</tr>');
            FieldCount++;
        })

    });

Upvotes: 1

Vivek Aasaithambi
Vivek Aasaithambi

Reputation: 929

I've worked with your code. I think You have to append the set of controls with table body.

InputsWrapper.find("tbody").append( '<tr id="InputsWrapper_0' + FieldCount + '"><td><input type="radio" id="one_' + FieldCount + '" name="site[]" />first<br/><input type="radio" id="two_' + FieldCount + '" name="site[]" />second<br/></td><td><input type="text" id="sign_' + FieldCount + '" name="sign[]" /></td></tr>');

Fiddle Kindly Check the URL:

Upvotes: 2

Related Questions