dynamically add inputs via javascript

Question

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);

};

@fudgey That will help him with some errors, but won't help him fix the logic bugs he has. — b01
– b01, Commented Oct 3, 2011 at 23:31
@b01 After the day I had today, that was as nice as I could get without sounding mean ;) — Mottie
– Mottie, Commented Oct 3, 2011 at 23:37

b01 · Accepted Answer · 2011-10-03 23:35:26Z

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>

awesome, thank you! I'm pretty new with javascript and don't know how to debug anything or the best tools to use to do so. I really appreciate it.

Collectives™ on Stack Overflow

dynamically add inputs via javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related