Add button to add fields

Question

Add button to add fields

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I'm trying to implement a button to add extra fields, in which case I'm creating an activity report where it contains 5 fields. When the button is clicked it adds another 5 of those same field.

I currently have:

JavaScript

$(function () {
     var scntDiv = $('#dynamicDiv');
     $(document).on('click', '#addInput', function () {
          $('<p>'+
            '<input type="text" id="inputeste" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
            '</a>'+
            '</p>').appendTo(scntDiv);
                        return false;
      });
      $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});

HTML

<div id="dynamicDiv"></div>

As I return several days, and every day there may be N tasks, when I click add fields, only the first day is added, being that every day I have a button.

EDIT 1:

In my case, I have dynamically generated days, and every day I have a button to add, when to on day 21 for example and I click add, it is added normally because it is my first field, day 22 and click to add it adds the fields in the panel of the 21st.

How do I know which day to add?

javascript html jquery

asked by anonymous 16.10.2017 / 21:00

3 answers

1

I edited your script to make the button work. When you click add +5 , it adds 5 inputs.

$(function () {
     var scntDiv = $('#dynamicDiv');
     $(document).on('click', '#addInput', function () {
          for (var i = 0; i < 5; i++){
            $('<p>'+
            '<input type="text" id="inputeste" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
            '</a>'+
            '</p>').appendTo(scntDiv);
           }
                        return false;
      });
      $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttontype="button" id="addInput">add +5</button>
<div id="dynamicDiv"></div>

16.10.2017 / 21:07

1

I think you have to add name="inputeste[]" to the inputs in order to recover them in an application!

Library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Script

$(function(){varscntDiv=$('#dynamicDiv');$(document).on('click','#addInput',function(){for(vari=0;i<5;i++){$('<p>'+'<inputtype="text" id="inputeste" name="inputeste[]" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true">remover</span> '+
            '</a>'+
            '</p>').appendTo(scntDiv);
           }
                        return false;
      });
      $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});

Example getting form data with PHP

The form

<form action="" method="post">
<button type="button" id="addInput">add +5</button>
<div id="dynamicDiv"></div>
<input type="submit">
</form>

PHP

if (isset($_POST['inputeste'])){

 $inputeste= $_POST['inputeste'];

   if (!empty($inputeste)) {                
       $qtd = count($inputeste);
       for ($i = 0; $i < $qtd; $i++) {
         if ($inputeste[$i]!=""){
            echo $inputeste[$i];
            echo "<br>";
         }

       }
   }
}

If you do not use the remove link use only the part of the required code

$(function () {
     var scntDiv = $('#dynamicDiv');
     $(document).on('click', '#addInput', function () {
          for (var i = 0; i < 5; i++){
            $('<p>'+
            '<input type="text" id="inputeste" name="inputeste[]" size="20" value="" placeholder="" /> '+
            '</p>').appendTo(scntDiv);
           }
                        return false;
      });
});

16.10.2017 / 22:40

How do I open a window, type windows explorer, from a website Problems with JSON + PHP

score 0 · Accepted Answer

The solution was to make my% dynamic%.

HTML

<div id="dynamicDiv<?php echo $_Indice ?>"></div>

JavaScript

$(function () {
     var dynamicDiv = ('#dynamicDiv');
     $(document).on('click', '.addInput', function () {
          var dynamicId = $(this).attr("id");
          $('<p>'+
            '<input type="text" name"inputteste[]" id="inputeste" size="20" value="" placeholder="" /> '+
            '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
            '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
            '</a>'+
            '</p>').appendTo(dynamicDiv + dynamicId);
            return false;
       });
       $(document).on('click', '#remInput', function () {
            $(this).parents('p').remove();
            return false;
       });
});