CODEWITHSUNDEEP
javascriptjqueryhtml
Jimmy
Jimmy

Reputation: 12487

Dynamic adding of fields with jquery

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.

Upvotes: 0

Views: 1662

Answers (5)

Dhambha
Dhambha

Reputation: 82

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

Upvotes: 1

Graou13
Graou13

Reputation: 1375

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

Upvotes: 1

Kahosk
Kahosk

Reputation: 358

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>

Upvotes: 2

gmann1982
gmann1982

Reputation: 97

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

Upvotes: 1

Dave
Dave

Reputation: 4436

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

Upvotes: 1

Related Questions