Adding inputs on the fly jquery

Question

I was wondering if I could get some help with jquery. This is the html I have now:

<form name="input">
<input id="current" type="text" name="content" placeholder="content">
<input type="submit" value="Add" id="add">
</form>

What I want to do is when the user clicks "add" and as long as the input field isnt empty, I want to do the following:

Change that input field id to "accepted" and remove the add button next to it and replace it with a remove button
Add an input field below the original one with the id to "current" with an add button next to it

I want this process to happen every time the add button is clicked so more and more input boxes can spawn under each other. As far as I got was trying to spawn input boxes but even that doesn't work.

function addField(){
$('#add').append('<input type="text" name="myinput" />');
return false;
}

Can anyone please show me how this should be achieved.

You are appending to the wrong element, an input can't contain another element — George
– George, Commented Jun 19, 2013 at 11:36
If you try to change the id to accepted for every input type , you will face problems.Ids should be unique — Harsha Venkataramu
– Harsha Venkataramu, Commented Jun 19, 2013 at 11:36
You need to append to the form, not the submit button for starters — BLSully
– BLSully, Commented Jun 19, 2013 at 11:36
You are going to end up with confusing code to maintain if controls are changing id. If you need to mark a control with a certain property you should add a class or property - not change the id — El Ronnoco
– El Ronnoco, Commented Jun 19, 2013 at 11:37

skip405 · Accepted Answer · 2013-06-19 12:20:59Z

3

I think it isn't a good solution to clone existing elements every time. Instead I would suggest cloning ... well... clones )) The original input and button remain the same, only visually shifted.

Is this behavior needed? - http://jsfiddle.net/skip405/9sX6X/6/

edited Jun 19, 2013 at 12:20

answered Jun 19, 2013 at 11:54

skip405

6,3293 gold badges27 silver badges28 bronze badges

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

Comments

Fabrizio Calderan · Accepted Answer · 2013-06-19 11:38:56Z

1

Use before()

$('#add').before('<input type="text" name="myinput" />');

since you need to append the new input just before your submit button (and not into it, which is not possible here, since it's an input element)

answered Jun 19, 2013 at 11:38

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

1 Comment

Fabrizio Calderan Over a year ago

you're not calling the addField function. Right now when you click the button you're just sending the form: try this: jsfiddle.net/MnAGZ/1

Steely Wing · Accepted Answer · 2013-06-19 12:09:26Z

0

A working example http://jsfiddle.net/steelywing/9sX6X/12/

$('form').on('click', '.add', function () {
    var row = $(this).closest('div'),
        new_row = row.clone();

    row.find('input:text').addClass('accepted');

    row.find('.add')
        .removeClass('add')
        .addClass('remove')
        .val('Remove');

    new_row.find('input:text').val('');

    row.after(new_row);
}).on('click', '.remove', function () {
    $(this).closest('div').remove();
});

edited Jun 19, 2013 at 12:09

answered Jun 19, 2013 at 11:56

Steely Wing

17.9k10 gold badges63 silver badges55 bronze badges

1 Comment

skip405 Over a year ago

I would suggest removing the ids because they are cloned in your version

Collectives™ on Stack Overflow

Adding inputs on the fly jquery

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related