Drag a link to Create a Textbox Dynamically using Jquery

Question

Guys I've HTML file that Consists of 2 DIV tags and a Submit Button,Looks like as follows

<div id="menu">
    <a href="#">Textbox</a>
</div>

<div id="Container">
  <!-- this is Dynamic area -->     
</div>
<input type="Submit" name="submit">

What i want is, if i drag a link (Textbox) from menu DIV to Container DIV i need a Textbox to be Created in container DIV dynamically.. and Later i need to Get Textbox values from Submit button, Is there any idea or source about how to achive this using Jquery?

user106197 · Accepted Answer · 2011-10-28 08:11:15Z

2

This is what you need:

http://jsfiddle.net/zSUJF/18/

answered Oct 28, 2011 at 8:11

user106197

Sign up to request clarification or add additional context in comments.

1 Comment

Unknown Coder Over a year ago

Thanks Dude! I got almost what I want ;)

redrobot · Accepted Answer · 2011-10-28 08:12:07Z

I would say something like this. I didn't test the code though.

First make the link draggable/droppable using jquery ui. Add the classes draggable & droppable to the link. On drop trigger a function to create a textbox inside the container.

$(".draggable").draggable();

$(".droppable").droppable({
drop: function() { 
    $('#Container').append($('<input type="text" id="someid" />'));
    }
});

Depending on how and where you want the values from the textbox you could use this method which will store the textbox values in an array.

function getvalues(){
    var values = {};
    $("#Container :input").each(function (i, item) {
    if (item.id != "") {
        values[item.id] = item.value;
        }
    });
}

Your html would have to change to

<div id="menu">
    <a class="draggable" href="#">Textbox</a>
</div>

<div id="Container" class="droppable">
  <!-- this is Dynamic area -->     
</div>
<input type="Submit" name="submit" onclick="getvalues()">

Roman · Accepted Answer · 2011-10-28 08:22:22Z

1

something like this? http://jsbin.com/uhuvox/edit#source

notice that I changed your html by adding a "data-name" attribute to the link which specifies the name of input it creates

answered Oct 28, 2011 at 8:22

Roman

6,5581 gold badge32 silver badges51 bronze badges

Collectives™ on Stack Overflow

Drag a link to Create a Textbox Dynamically using Jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related