Dynamic adding of fields with jquery

Question

I have this existing code which I had some help on: http://jsfiddle.net/975VQ/11/

The issue with this code is I also want to allow them to remove the original field. I cannot remove the original text field and still add another.

Could someone please show me how I could approach this problem instead? I would assume it would be by using javascript to add the first entry, and then using javascript to add in the markup each time rather than cloning it.

var MaxInputs       = 8; //maximum input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#addfield"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e)  //on add input button click
{
        if(x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><button class="removeclass">Delete</button></div>');
            x++; //text box increment
        }
return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
        if( x > 1 ) {
                $(this).parent('div').remove(); //remove text box
                x--; //decrement textbox
        }
return false;
})

Any help or input on this would be appreicated.

jsfiddle.net/975VQ/15 check if this is what u need.

Dave
– Dave

2014-04-25 10:29:23 +00:00
Commented Apr 25, 2014 at 10:29 — Dave
– Dave, Commented Apr 25, 2014 at 10:29

Kahosk · Accepted Answer · 2014-04-25 10:47:52Z

2

You are deleting the field with the id=InputsWrapper on the original field, that is the div where you are ataching the news fields.

You need to put the original field in other div.

<div id="InputsWrapper">
    <div>
         <input value="Why do you want this">
         <select>
             <option value="single">Single line reply</option>
             <option value="multi">Paragraph reply</option>
         </select>
         <button class="removeclass">Delete</button>
    </div>
</div>

edited Apr 25, 2014 at 10:47

answered Apr 25, 2014 at 10:42

Kahosk

3583 silver badges7 bronze badges

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

2 Comments

Jimmy Over a year ago

Then I get this, which seems to need one remaining: jsfiddle.net/spadez/975VQ/29

Kahosk Over a year ago

If you don't need one remaining delete the if sentence "if( x >= 1 )"

gmann1982 · Accepted Answer · 2014-04-25 10:41:43Z

1

try this fiddle, this is what you need

http://jsfiddle.net/975VQ/20/

HTML:

<h1>Questions</h1>
<p>Add additional questions. You can select how long you would like the reply to be.</p>
<div>
<input value="Why do you want this">
<select>
    <option value="single">Single line reply</option>
    <option value="multi">Paragraph reply</option>
</select>

<button class="removeclass">Delete</button>
</div>
    <div id="InputsWrapper"></div>
<br />
<button id="addfield">Add question</button>
<br />

JS:

var MaxInputs       = 8; //maximum input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#addfield"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e)  //on add input button click
{
        if(x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><button class="removeclass">Delete</button></div>').insertBefore(InputsWrapper);
            x++; //text box increment
        }
return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
    console.log(x);
        if( x > 1 ) {
            console.log(x);
                $(this).parent('div').remove(); //remove text box
                x--; //decrement textbox
        }
return false;
})

answered Apr 25, 2014 at 10:41

gmann1982

971 silver badge9 bronze badges

4 Comments

Jimmy Over a year ago

You cant delete the first entry, it is the same problem as my posted code

gmann1982 Over a year ago

are you wanting to be able to delete the first question so there are none left? or not allow the first one to be deleted?

Jimmy Over a year ago

I want to be able to have no questions, but by default start with one

gmann1982 Over a year ago

if thats the case you need to take the if(x>1) statement out of the click function

Dave · Accepted Answer · 2014-04-25 10:32:00Z

1

check this jsfiddle

 <h1>Questions</h1>
 <p>Add additional questions. You can select how long you would like the reply to be.</p>
 <div id="InputsWrapper">
 <input value="Why do you want this">
 <select>
   <option value="single">Single line reply</option>
   <option value="multi">Paragraph reply</option>
 </select>
 <button class="removeclass">Delete</button>
 </div>
 <br />
 <button id="addfield">Add question</button>
 <br />

javascript

  var MaxInputs       = 8; //maximum input boxes allowed
  var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
  var AddButton       = $("#addfield"); //Add button ID

  var x = InputsWrapper.length; //initlal text box count
  var FieldCount=1; //to keep track of text box added

  $(AddButton).click(function (e)  //on add input button click
  {
    if(x <= MaxInputs) //max input box allowed
    {
        FieldCount++; //text box added increment
        //add input box
        $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><button class="removeclass">Delete</button></div>');
        x++; //text box increment
    }
     return false;
    });

    $("body").on("click",".removeclass", function(e){ //user click on remove text
     if( x >= 1  ) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
     }
     return false;
    })

answered Apr 25, 2014 at 10:32

Dave

4,4363 gold badges27 silver badges38 bronze badges

3 Comments

Jimmy Over a year ago

Hi, that is great, and closer, but when you delete all of them it stops you being able to add a new one

Dave Over a year ago

here is updated fiddle jsfiddle.net/975VQ/24 .. check if this solves your problem

Jimmy Over a year ago

Now when you hit delete it deletes all the fields

Graou13 · Accepted Answer · 2014-04-25 10:52:00Z

this jsfiddle should be what you want if I understood well,

HTML:

<h1>Questions</h1>
<p>Add additional questions. You can select how long you would like the reply to be.</p>
<div id="InputsWrapper">
<div>
<input value="Why do you want this">
<select>
<option value="single">Single line reply</option>
<option value="multi">Paragraph reply</option>
</select>
<button class="removeclass">Delete</button>
</div>
</div>
<br />
<button id="addfield">Add question</button>
<br />

Javascript:

var MaxInputs       = 8; //maximum input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#addfield"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e)  //on add input button click
{
    if(x <= MaxInputs) //max input box allowed
    {
        FieldCount++; //text box added increment
        //add input box
        $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><button class="removeclass">Delete</button></div>');
        x++; //text box increment
    }
    if(FieldCount == 2 && x > 1)
    {
        $("#InputsWrapper div").first().remove();
    }
return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
    if( x >= 1 ) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
    }
return false;
})

Again this simply doesnt work, you cant delete the first entry by hitting delete

Dhambha · Accepted Answer · 2014-04-25 10:53:08Z

1

Try This

HTML

        <h1>Questions</h1>
    <p>Add additional questions. You can select how long you would like the reply to be.</p>
    <div class="que">
    <div class="InputsWrapper">
    <input value="Why do you want this">
    <select>
        <option value="single">Single line reply</option>
        <option value="multi">Paragraph reply</option>
    </select>
    <button class="removeclass">Delete</button>
        </div>
        </div>
    <br />
    <button id="addfield">Add question</button>
    <br />

Javascript

    var MaxInputs       = 8; //maximum input boxes allowed
var AddButton       = $("#addfield"); //Add button ID

var x = $(".InputsWrapper").length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e)  //on add input button click
{
        if(x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(".que").append('<div class="InputsWrapper"><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><button class="removeclass">Delete</button></div>');
            x++; //text box increment
        }
return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text   

                $(this).parent('div').remove(); //remove text box
                x--; //decrement textbox
return false;
})

DEMO

edited Apr 25, 2014 at 10:53

answered Apr 25, 2014 at 10:40

Dhambha

821 silver badge8 bronze badges

2 Comments

Jimmy Over a year ago

It doesnt seem to work any different from the first one, still cant delete the first input

Dhambha Over a year ago

it cantnot delete if only one row exixst. if you want to all row then simply remove condition "if($(".InputsWrapper").length > 1){" and its work. check it out

Collectives™ on Stack Overflow

Dynamic adding of fields with jquery

5 Answers 5

2 Comments

4 Comments

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related