Adicionando elementos de entrada dinamicamente ao formulário

Question 1

Eu li muitos blogs e posts sobre como adicionar conjuntos de campos dinamicamente, mas todos eles fornecem uma resposta muito complicada. O que eu preciso não é tão complicado.

Meu código HTML:

<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>

Então, um usuário irá inserir um valor inteiro (estou verificando a validação usando javascript) no inputcampo. E ao clicar no Fill Detailslink, o número correspondente de campos de entrada aparecerá para ele entrar. Eu quero fazer isso usando javascript.

Não sou um profissional em javascript. Eu estava pensando como posso recuperar o número inteiro preenchido pelo usuário no inputcampo através do link e exibindo o número correspondente de campos de entrada.

Question 2

Você pode usar um onclickmanipulador de eventos para obter o valor de entrada para o campo de texto. Certifique-se de dar ao campo um idatributo exclusivo para que possa consultá-lo com segurança por meio de document.getElementById():

Se você deseja adicionar elementos dinamicamente, você deve ter um contêiner onde colocá-los. Por exemplo, a <div id="container">. Crie novos elementos por meio de document.createElement()e use appendChild()para anexar cada um deles ao contêiner. Você pode estar interessado em gerar um nameatributo significativo (por exemplo, name="member"+ipara cada um dos <input>s gerados dinamicamente se eles forem enviados em um formulário.

Observe que você também pode criar <br/>elementos com document.createElement('br'). Se você quiser apenas imprimir algum texto, pode usar document.createTextNode().

Além disso, se quiser limpar o contêiner toda vez que ele estiver prestes a ser preenchido, você pode usar hasChildNodes()e removeChild()junto.

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> 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<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> 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"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

Expandir snippet

Veja um exemplo de trabalho neste JSFiddle .

Question 3

Experimente este código JQuery para incluir dinamicamente o formulário, o campo e o comportamento de exclusão / remoção:

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});

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

Expandir snippet

Consulte a demonstração aqui

Answer 1

Eu li muitos blogs e posts sobre como adicionar conjuntos de campos dinamicamente, mas todos eles fornecem uma resposta muito complicada. O que eu preciso não é tão complicado.

Meu código HTML:

<input type="text" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails">Fill Details</a>

Então, um usuário irá inserir um valor inteiro (estou verificando a validação usando javascript) no inputcampo. E ao clicar no Fill Detailslink, o número correspondente de campos de entrada aparecerá para ele entrar. Eu quero fazer isso usando javascript.

Não sou um profissional em javascript. Eu estava pensando como posso recuperar o número inteiro preenchido pelo usuário no inputcampo através do link e exibindo o número correspondente de campos de entrada.

Answer 2

Você pode usar um onclickmanipulador de eventos para obter o valor de entrada para o campo de texto. Certifique-se de dar ao campo um idatributo exclusivo para que possa consultá-lo com segurança por meio de document.getElementById():

Se você deseja adicionar elementos dinamicamente, você deve ter um contêiner onde colocá-los. Por exemplo, a <div id="container">. Crie novos elementos por meio de document.createElement()e use appendChild()para anexar cada um deles ao contêiner. Você pode estar interessado em gerar um nameatributo significativo (por exemplo, name="member"+ipara cada um dos <input>s gerados dinamicamente se eles forem enviados em um formulário.

Observe que você também pode criar <br/>elementos com document.createElement('br'). Se você quiser apenas imprimir algum texto, pode usar document.createTextNode().

Além disso, se quiser limpar o contêiner toda vez que ele estiver prestes a ser preenchido, você pode usar hasChildNodes()e removeChild()junto.

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> 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<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> 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"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

Expandir snippet

Veja um exemplo de trabalho neste JSFiddle .

Answer 3

Segui seu conselho. Mas quando clico em, o console do navegador mostra este erro:Uncaught TypeError: Cannot call method 'appendChild' of undefined

xan

Answer 4

A resposta é muito útil. E como posso adicionar uma classe CSS ao campo

Pravinraj Venkatachalam

Answer 5

3

@Pravin Que bom que ajudou, consulte Como adiciono uma classe a um determinado elemento? . Use basicamenteinput.className += ' someCSSClass';

Xavi López

Answer 6

1

Quando eu envio o formulário, os novos campos gerados dinamicamente não são enviados como os outros campos que faziam parte do HTML original. Eles aparecem visualmente e posso inspecioná-los, mas eles não se submetem. Alguma ideia de por que isso aconteceria?

circle1

Answer 7

@ circle1 Certifique-se de que os elementos gerados dinamicamente tenham um nameatributo exclusivo . Apenas os elementos do formulário com um atributo de nome terão seus valores transmitidos ao enviar um formulário.

Xavi López

Answer 8

Experimente este código JQuery para incluir dinamicamente o formulário, o campo e o comportamento de exclusão / remoção:

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $(".container1");
    var add_button = $(".add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
        } else {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click", ".delete", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});

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

Expandir snippet

Consulte a demonstração aqui

Answer 9

Talvez eu esteja fazendo algo errado, mas no meu caso, qualquer pressionamento de Enter em um campo de texto neste formulário fará com que a função do botão 'Adicionar Novo Campo' seja disparada, o que provavelmente é um comportamento indesejado ...

Maxi Mus

Answer 10

1

<button type="button" ...>e o problema está resolvido.

Maxi Mus,

Adicionando elementos de entrada dinamicamente ao formulário

Respostas: