通过javascript动态添加输入_Javascript_Jquery_Forms_Input

通过javascript动态添加输入

javascript jquery forms input

通过javascript动态添加输入,javascript,jquery,forms,input,Javascript,Jquery,Forms,Input,我有两个div，每个div有一个链接。我试图编写一个onclick函数，在两个div中的一个内追加一个新div。新div将附加两个表单输入。新的div将有一个时间戳唯一id标记。我不擅长javascript，但我不知道自己做错了什么这里有一个指向我正在尝试使用的JSFIDLE的链接功能添加项（代码、标题、价格、divbox）{ var idtag=“div_216;”+event.timeStamp；如果（divbox==“#项目_box1”） { 变量项标题=$（“”{ 键入：“

我有两个div，每个div有一个链接。我试图编写一个onclick函数，在两个div中的一个内追加一个新div。新div将附加两个表单输入。新的div将有一个时间戳唯一id标记。我不擅长javascript，但我不知道自己做错了什么

这里有一个指向我正在尝试使用的JSFIDLE的链接










功能添加项（代码、标题、价格、divbox）{
var idtag=“div_216;”+event.timeStamp；
如果（divbox==“#项目_box1”）
{
变量项标题=$（“”{
键入：“文本”，
名称：“第1栏项目名称[]”，
价值：标题，
});
var项目价格=$（“”{
键入：“文本”，
名称：“第1箱商品价格[]”，
价值：价格，
});
var新项目=项目标题+“-”+项目价格；
}
其他的
{
变量项_代码=$（“”{
键入：“文本”，
名称：“box2_项目代码[]”，
值：代码，
});
变量项标题=$（“”{
键入：“文本”，
名称：“第2栏项目名称[]”，
价值：标题，
});
var新项目=项目代码+“-”+项目标题；
}
$（divbox）。追加（“”）；
$（“#”+idtag）.append（新#u项）；
};

首先，此行不正确，在此上下文中未定义事件：

var idtag = "div_" + event.timeStamp;

这可能会更好：

var idtag = "div_" + new Date().getTime();

此外，由于将两个对象添加到一起，此行将产生错误的预期结果：

var new_item = item_title + " - " + item_price;

此外，您的对象中有尾随的逗号，这应该会导致JS错误，但在最新版本的Chrome和Firefox中似乎没有

，这是下面代码的轻微修改版本，因为“onclick=“return add\u item…”在JSFIDLE中似乎不起作用。它只是给出了“add\u item”的未定义

但是，在普通HTML文档中应该可以使用类似的内容：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #item_box1{
                width: 300px;
                margin: 0 auto;
                height: 100px;
                border: 1px solid blue
            }

            #item_box2{
                width: 300px;
                margin: 0 auto;
                height: 100px;
                border: 1px solid red
            }
            .link-button {
                color: rgb(0, 0, 255);
                cursor: pointer
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.js"></script>
        <script type="text/javascript">
            function add_item( code, title, price, divbox )
            {
                var idtag, item_title, item_price, item_code;
                // Generate an id based on timestamp
                idtag = "div_" + new Date().getTime();
                // Generate a new div.
                $( divbox ).append( "<div id=\"" + idtag + "\"></div>" );

                if ( divbox == "#item_box1" )
                {
                    item_title = $("<input/>", {
                        type: 'text',
                        name: "box1_item_title[]",
                        value: title
                    });

                    item_price = $("<input/>", {
                        type: 'text',
                        name: "box1_item_price[]",
                        value: price
                    });
                    // Show in the document.
                    $( "#" + idtag ).append( item_title, item_price );
                }
                else
                {
                    item_code = $("<input/>", {
                        type: 'text',
                        name: "box2_item_code[]",
                        value: code
                    });

                    item_title = $("<input/>", {
                        type: 'text',
                        name: "box2_item_title[]",
                        value: title
                    });
                    // Show in the document.
                    $( "#" + idtag ).append( item_code, item_title );
                }
            }
        </script>
    </head>
    <body>
        <a class="link-button" onclick="return add_item('xyz', 'Candy', '45.99', '#item_box1');">Add Item to Box 1</a>
        <br>
        <a class="link-button" onclick="return add_item('123', 'Soda', '1.99', '#item_box2');">Add Item to Box 2</a>
        <br>
        <br>
        <div id='item_box1'></div>
        <div id='item_box2'></div>

    </body>
</html>


#第1栏项目{
宽度：300px；
保证金：0自动；
高度：100px；
边框：1px纯蓝
}
#项目2{
宽度：300px；
保证金：0自动；
高度：100px；
边框：1px纯红
}
.链接按钮{
颜色：rgb（0,0,255）；
光标：指针
}
功能添加项（代码、标题、价格、divbox）
{
变量idtag、项目标题、项目价格、项目代码；
//根据时间戳生成id
idtag=“div_216;”+新日期（）.getTime（）；
//生成一个新的div。
$（divbox）。追加（“”）；
如果（divbox==“#项目_box1”）
{
项目名称=$（“”{
键入：“文本”，
名称：“第1栏项目名称[]”，
价值：标题
});
项目价格=$（“”{
键入：“文本”，
名称：“第1箱商品价格[]”，
价值：价格
});
//在文档中显示。
$（“#”+idtag）。追加（项目标题、项目价格）；
}
其他的
{
项目代码=$（“”{
键入：“文本”，
名称：“box2_项目代码[]”，
值：代码
});
项目名称=$（“”{
键入：“文本”，
名称：“第2栏项目名称[]”，
价值：标题
});
//在文档中显示。
$（“#”+idtag）.append（项目代码，项目标题）；
}
}
将项目添加到框1中


将项目添加到框2中

首先，此行不正确，在此上下文中未定义事件：

var idtag = "div_" + event.timeStamp;

这可能会更好：

var idtag = "div_" + new Date().getTime();

此外，由于将两个对象添加到一起，此行将产生错误的预期结果：

var new_item = item_title + " - " + item_price;

此外，您的对象中有尾随的逗号，这应该会导致JS错误，但在最新版本的Chrome和Firefox中似乎没有

，这是下面代码的轻微修改版本，因为“onclick=“return add\u item…”在JSFIDLE中似乎不起作用。它只是给出了“add_item”是未定义的

但是，在普通HTML文档中应该可以使用类似的内容：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #item_box1{
                width: 300px;
                margin: 0 auto;
                height: 100px;
                border: 1px solid blue
            }

            #item_box2{
                width: 300px;
                margin: 0 auto;
                height: 100px;
                border: 1px solid red
            }
            .link-button {
                color: rgb(0, 0, 255);
                cursor: pointer
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.js"></script>
        <script type="text/javascript">
            function add_item( code, title, price, divbox )
            {
                var idtag, item_title, item_price, item_code;
                // Generate an id based on timestamp
                idtag = "div_" + new Date().getTime();
                // Generate a new div.
                $( divbox ).append( "<div id=\"" + idtag + "\"></div>" );

                if ( divbox == "#item_box1" )
                {
                    item_title = $("<input/>", {
                        type: 'text',
                        name: "box1_item_title[]",
                        value: title
                    });

                    item_price = $("<input/>", {
                        type: 'text',
                        name: "box1_item_price[]",
                        value: price
                    });
                    // Show in the document.
                    $( "#" + idtag ).append( item_title, item_price );
                }
                else
                {
                    item_code = $("<input/>", {
                        type: 'text',
                        name: "box2_item_code[]",
                        value: code
                    });

                    item_title = $("<input/>", {
                        type: 'text',
                        name: "box2_item_title[]",
                        value: title
                    });
                    // Show in the document.
                    $( "#" + idtag ).append( item_code, item_title );
                }
            }
        </script>
    </head>
    <body>
        <a class="link-button" onclick="return add_item('xyz', 'Candy', '45.99', '#item_box1');">Add Item to Box 1</a>
        <br>
        <a class="link-button" onclick="return add_item('123', 'Soda', '1.99', '#item_box2');">Add Item to Box 2</a>
        <br>
        <br>
        <div id='item_box1'></div>
        <div id='item_box2'></div>

    </body>
</html>


#第1栏项目{
宽度：300px；
保证金：0自动；
高度：100px；
边框：1px纯蓝
}
#项目2{
宽度：300px；
保证金：0自动；
高度：100px；
边框：1px纯红
}
.链接按钮{
颜色：rgb（0,0,255）；
光标：指针
}
功能添加项（代码、标题、价格、divbox）
{
变量idtag、项目标题、项目价格、项目代码；
//根据时间戳生成id
idtag=“div_216;”+新日期（）.getTime（）；
//生成一个新的div。
$（divbox）。追加（“”）；
如果（divbox==“#项目_box1”）
{
项目名称=$（“”{
键入：“文本”，
名称：“第1栏项目名称[]”，
价值：标题
});
项目价格=$（“”{
键入：“文本”，
名称：“第1箱商品价格[]”，
价值：价格
});
//在文档中显示。