Adding input elements dynamically to form

Question

I ve read many blogs and posts on dynamically adding fieldsets  but they all give a very complicated answer  What I require is not that complicated   My HTML Code    lt input type  text  name  member  value    gt Number of members   max  10  lt br   gt   lt a href     id  filldetails  gt Fill Details lt  a gt    So  a user will enter an integer value  I m checking the validation using javascript  in the input field  And on clicking the Fill Details link  corresponding number of input fields will appear for him to enter  I want to achieve this using javascript    I m not a pro in javascript  I was thinking how can I retrieve the integer filled in by the user in input field through the link and displaying corresponding number of input fields

User · Answer

Try this JQuery code to dynamically include form, field, and delete/remove behavior:

_x000D_

$(document).ready(function() {_x000D_
    var max_fields = 10;_x000D_
    var wrapper = $(".container1");_x000D_
    var add_button = $(".add_form_field");_x000D_
_x000D_
    var x = 1;_x000D_
    $(add_button).click(function(e) {_x000D_
        e.preventDefault();_x000D_
        if (x < max_fields) {_x000D_
            x++;_x000D_
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box_x000D_
        } else {_x000D_
            alert('You Reached the limits')_x000D_
        }_x000D_
    });_x000D_
_x000D_
    $(wrapper).on("click", ".delete", function(e) {_x000D_
        e.preventDefault();_x000D_
        $(this).parent('div').remove();_x000D_
        x--;_x000D_
    })_x000D_
});

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<div class="container1">_x000D_
    <button class="add_form_field">Add New Field &nbsp; _x000D_
      <span style="font-size:16px; font-weight:bold;">+ </span>_x000D_
    </button>_x000D_
    <div><input type="text" name="mytext[]"></div>_x000D_
</div>

_x000D_

Refer Demo Here

User · Answer

You could use an onclick event handler in order to get the input value for the text field  Make sure you give the field an unique id attribute so you can refer to it safely through document getElementById    If you want to dynamically add elements  you should have a container where to place them  For instance  a  lt div id  quot container quot  gt   Create new elements by means of document createElement    and use appendChild   to append each of them to the container  You might be interested in outputting a meaningful name attribute  e g  name  quot member quot  i for each of the dynamically generated  lt input gt s if they are to be submitted in a form  Notice you could also create  lt br  gt  elements with document createElement  br    If you want to just output some text  you can use document createTextNode   instead  Also  if you want to clear the container every time it is about to be populated  you could use hasChildNodes   and removeChild   together   x000D   x000D   lt html gt   lt head gt       lt script type  text javascript  gt          function addFields                   Number of inputs to create             var number   document getElementById  member   value                 Container  lt div gt  where dynamic content will be placed             var container   document getElementById  container                   Clear previous contents of the container             while  container hasChildNodes                      container removeChild container lastChild                             for  i 0 i lt number i                        Append a node with a random text                 container appendChild document createTextNode  Member      i 1                        Create an  lt input gt  element  set its type and name attributes                 var input   document createElement  input                    input type    text                   input name    member    i                  container appendChild input                      Append a line break                  container appendChild document createElement  br                                  lt  script gt   lt  head gt   lt body gt       lt input type  text  id  member  name  member  value    gt Number of members   max  10  lt br   gt       lt a href     id  filldetails  onclick  addFields    gt Fill Details lt  a gt       lt div id  container   gt   lt  body gt   lt  html gt  x000D   x000D   x000D   See a working sample in this JSFiddle

[javascript] Adding input elements dynamically to form

Examples related to javascript

Examples related to html

Examples related to forms