使用jquery生成的动态单选按钮不能使用唯一名称

时间:2015-03-07 11:08:47

标签: jquery dynamic controls

我创建了一组单选按钮。在按钮上单击我创建的控件集。但单选按钮的选择并不适用于每个动态创建的组。通过使用唯一名称ony,我们可以将所有动态行输入保存在单个列中,方法是将其视为单个值。

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.";
        }
    }
?>

2 个答案:

答案 0 :(得分:2)

我已经使用了您的代码。我想你必须用表体附加一组控件。

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请检查网址:

答案 1 :(得分:1)

检查链接: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++;
        })

    });