CODEWITHSUNDEEP
javascriptjqueryformsinput
David
David

Reputation: 10758

dynamically add inputs via javascript

I have two divs and a link for each. I'm trying to write an onclick function that appends a new div inside one of the two divs. The new div will have two form inputs appended to them. The new div will have a timestamp unique id tag. I suck at javascript and can't figure out what i'm doing wrong though.

Heres a link to a jsfiddle i'm trying to work on it with http://jsfiddle.net/XLuHU/6/

<a href='javascript:void;' onclick='return add_item("xyz", "Candy", "45.99", "#item_box1")'>Add Item to Box 1</a>

<br>

<a href='javascript:void;' onclick='return add_item("123", "Soda", "1.99", "#item_box2")'>Add Item to Box 2</a><br><br>

<div id='item_box1'></div><br><br>
<div id='item_box2'></div>



function add_item(code, title, price, divbox){

    var idtag = "div_" + event.timeStamp;

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

       var item_price = $("<input/>", {
          type: 'text',
          name: "box1_item_price[]",
          value: price,
           });
       var new_item = item_title + " - " + item_price; 
    }
    else
    {
       var item_code = $("<input/>", {
          type: 'text',
          name: "box2_item_code[]",
          value: code,
           });

       var item_title = $("<input/>", {
          type: 'text',
          name: "box2_item_title[]",
          value: title,
           });
       var new_item = item_code + " - " + item_title; 

    }

    $(divbox).append("<div id='"+idtag+"' ></div>");

    $("#"+idtag).append(new_item);

};

Upvotes: 0

Views: 362

Answers (1)

b01
b01

Reputation: 4384

First off this line is incorrect, event is not defined in this context:

var idtag = "div_" + event.timeStamp;

This might work better:

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

Also this line will produce the wrong expected outcome, since your adding two objects together:

var new_item = item_title + " - " + item_price;

Also you have trailing commas in your object, which should have caused JS error, but didn't seem to in the latest version of Chrome and Firefox.

Here is the working fiddle, which is aslightly modified version of the code below, due to the fact that 'onclick="return add_item...' doesn't seem to work in JSFiddle. It just give "add_item" is undefined.

However, something like this should work in a normal HTML document:

<!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>

Upvotes: 3

Related Questions