How to add extra fields by JavaScript

Question

I Have 2 radio button where I can choose what kind of inputs I like to use text field, text-area, etc. now I want to add Add & Remove buttons in order to add extra fields or remove them.

Here are my codes

HTML

<div class="form-group">
  <div id="moreless"></div> //show buttons
  <div class="fields" id="fields"></div> //show fields
</div>

JavaScript

<script>
  $( document ).ready( function() {

    $(".fieldtype").on('change', function() {
      var date_al = $(".fieldtype:checked").val();
      if(date_al == 'textfield') {
        $('#fields').empty();
        $('#moreless').empty();
        $('#fields').append('<input class="form-control" type="text" name="" id="">');
        $('#moreless').append('<button type="button" class="btn btn-success btn-xs">Add</button> <button type="button" class="btn btn-danger btn-xs">Remove</button>');
      }else{
        $('#fields').empty();
        $('#moreless').empty();
        $('#fields').append('<textarea class="form-control" name="" id="" cols="50" rows="4"></textarea>');
        $('#moreless').append('<button type="button" class="btn btn-success btn-xs">Add</button> <button type="button" class="btn btn-danger btn-xs">Remove</button>');
      }
  });
</script>

Screenshot

Question

What should I do to get my Add & Remove buttons to work?

Farooq Hanif · Accepted Answer · 2018-07-21 05:47:35Z

2

Your javascript should look something like the following:

var textFieldsCount = 0;

function addTextField(){
textFieldsCount++;
$('#fields').append('<div id="textField-' + textFieldsCount + '"><input class="form-control" type="text" name="" id="'+ textFieldsCount.toString() +'"><button type="button" class="btn btn-danger btn-xs" onclick="removeTextField(\'textField-' + textFieldsCount.toString() + '\')">Remove</button></div></div>');
}

function removeTextField(elementId){
    var selector = "#" + elementId;
    console.log(selector);
    $(selector).remove();
    textFieldsCount--;
}

$(document).ready(function() {

  $(".fieldtype").on('change', function() {
    var date_al = $(".fieldtype:checked").val();
    if (date_al == 'textfield') {
      textFieldsCount++;
      $('#fields').empty();
      $('#moreless').empty();
      $('#fields').append('<div id="textField-' + textFieldsCount + '"><input class="form-control" type="text" name="" id="'+ textFieldsCount.toString() +'"><button type="button" class="btn btn-danger btn-xs" onclick="removeTextField(\'textField-' + textFieldsCount.toString() + '\')">Remove</button></div></div>');
      $('#moreless').append('<button type="button" class="btn btn-success btn-xs" onclick="addTextField();">Add</button>');
    } else {
      $('#fields').empty();
      $('#moreless').empty();
      $('#fields').append('<textarea class="form-control" name="" id="" cols="50" rows="4"></textarea>');
      $('#moreless').append('<button type="button" class="btn btn-success btn-xs">Add</button> <button type="button" class="btn btn-danger btn-xs">Remove</button>');
    }
  });
});

Also, I suggest that you have a remove button in front of each text box instead of one remove button.

Similar logic can be used for textareas.

edited Jul 21, 2018 at 5:47

answered Jul 21, 2018 at 5:30

Farooq Hanif

1,9192 gold badges16 silver badges25 bronze badges

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

3 Comments

mafortis Over a year ago

This is not working, now when i click on radio buttons nothing shows

mafortis Over a year ago

sorry it was extra }); in my code, but there is small issue, when i click on remove button it removes all of them except removing fields one by one from last one to first one.

Farooq Hanif Over a year ago

My pleasure buddy

Waqas · Accepted Answer · 2018-07-21 05:43:39Z

0

I would suggest use Document.createElement function of JS.

It is a better and a faster approach to use JavaScript's API to create and add element. This link provides a good explanation (with metrics) on why it is better to use Document.createElement to create elements.

You can get more reference here on how to use it: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

This is how you can add new fields when clicked on add button:

$(document).on('click', '#add-btn', function() {
  var date_al = $(".fieldtype:checked").val();
  var element;
  if(date_al === 'textfield') {
      element = document.createElement("input");
      element.type = "text";
      element.className = "form-control";
  }else{
      element = document.createElement("textarea");
      element.className = "form-control";
  }

  if(element) {
      var fieldsContainer = document.getElementById('fields');
      fieldsContainer.appendChild(element);
  }

});

edited Jul 21, 2018 at 5:43

answered Jul 21, 2018 at 5:22

Waqas

1512 silver badges6 bronze badges

2 Comments

mafortis Over a year ago

Hi, This is to show text when page loads, i need to make it happen by clicking on buttons add & remove

Waqas Over a year ago

@mafortis, updated the answer with an example and an explanation of a better way to handle your situation.

Morteza Fathnia · Accepted Answer · 2018-07-21 06:05:04Z

0

<div class="form-group">
  //show buttons
    <div class="fields" id="fields">
      <lable for='text'>text</lable>
      <input type='radio' id='text' name='element' checked>
      <lable for='textarea'>textarea</lable>
      <input type='radio' id='textarea' name='element'>
    </div> //show fields
    <div id="moreless">
      <button onclick="change('input')">
    add
    </button>
    </div>
</div>
<script>

answered Jul 21, 2018 at 6:05

Morteza Fathnia

4353 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to add extra fields by JavaScript

Here are my codes

Question

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here are my codes

Question

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related