Aggiunta dinamica degli elementi di input alla forma

Ho letto molti blog e post aggiungendo in modo dinamico i set di campi, ma tutti danno una risposta molto complicata. Quello di cui ho bisogno non è così complicato.Aggiunta dinamica degli elementi di input alla forma

mio codice HTML:

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

Quindi, l'utente deve inserire un valore intero (Sto controllando la convalida utilizzando JavaScript) nel campo input. E facendo clic sul collegamento Fill Details, per lui verrà visualizzato il numero corrispondente di campi di input. Voglio raggiungere questo obiettivo utilizzando javascript.

Non sono un professionista in javascript. Stavo pensando a come posso recuperare il numero intero inserito dall'utente nel campo input attraverso il collegamento e visualizzando il numero corrispondente di campi di input.

fonte

2013-02-13 xan

È possibile utilizzare un gestore di eventi onclick per ottenere il valore di input per il campo di testo. Assicurati di dare il campo un attributo univoco id così si può fare riferimento ad esso in modo sicuro attraverso document.getElementById():

Se volete aggiungere dinamicamente elementi, si dovrebbe avere un contenitore dove metterli. Ad esempio, un <div id="container">. Creare nuovi elementi mediante document.createElement() e utilizzare appendChild() per aggiungerli al contenitore. Potreste essere interessati ad emettere un attributo significativo name (ad es name="member"+i per ciascuna delle dinamicamente generato <input> s se devono essere presentate in una forma.

Avviso si potrebbe anche creare <br/> elementi con document.createElement('br'). Se si vuole solo uscita del testo, è possibile utilizzare document.createTextNode() invece.

Inoltre, se si desidera cancellare il contenitore ogni volta che sta per essere popolata, è possibile utilizzare hasChildNodes() e removeChild() insieme.

<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>

Vedere un esempio funzionante in questo JSFiddle.

fonte

2013-02-13 12:45:00

ho seguito il tuo consiglio. Ma quando clicco su, la console del browser mostra questo errore: 'Uncaught TypeError: Impossibile chiamare il metodo 'appendChild' di undefined' – xan

Grazie mille. – xan

Felice che mi abbia aiutato :) –

provare questo codice javascript per includere dinamicamente campo modulo e cancellare

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

<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>

fare riferimento Demo Here

fonte

2017-02-17 08:53:59

Aggiunta dinamica degli elementi di input alla forma

risposta

Problemi correlati