créer dynamiquement des éléments de formulaire

Bonjour J'ai un formulaire HTML et j'essaie de créer des sections div du formulaire sur un événement de clic de bouton. J'ai un code HTML avec javascript comme ci-dessous mais il n'ajoute pas d'éléments de formulaire après l'événement de clic de bouton. J'ai besoin de créer toutes les lignes et les cellules ainsi que les zones de texte de saisie comme dans l'élément div personnel et ajouter ou ajouter dans la Div-Person lorsque nous cliquons sur le bouton AddPerson. J'ai quelques autres éléments Div qui contiennent d'autres éléments d'entrée que je dois ajouter ou créer après avoir cliqué sur le bouton associé à cette balise Div. Voici un exemple de code pour un élément Div avec 3 champs de saisie et un bouton. L'aide serait très appréciée. La valeur de la variable i ou j doit être incrémentée. Il prend toujours i = 1 est-ce un problème?créer dynamiquement des éléments de formulaire

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Sample</title> 

    <style type="text/css"> 
     form 
     { 
      width: 600px; 
      background-color:#FA7300; 
      margin: 0px auto; 
      overflow: hidden; 
     } 
    </style> 
    <script> 
    var i=1; 
    var j=1; 
    //create Person section 

    function CreatePerson(divName) 
    { 
    var y= document.createElement('div'); 
    y.innerHTML="<br/><input type='text' name='Key_Firstname_'+i+1><br/><input type='text' name='Key_lastname_'+i+1><br/><input type='text' name='Key_DOB_'+i+1>"; 

    document.getElementById(divName).appendChild(y); 
    } 




    </script> 
</head> 
<body> 
<form method="post" name="mainfrm" action=""> 



    <fieldset style="border:0px; background-color: #ffffff; margin-left:50px; width:500px"> 

     <table style="width: 100%"> 
      <tr> 
       <td style="width:125px">&nbsp; 

       </td> 
       <td style="width:375px">&nbsp; 

       </td> 

      </tr> 
      <tr> 
      <td>Acc NUMBER</td> 
       <td align="left"> 
        <input name="Key_Acc_Number_1" size="35" type="text" /> 
       </td> 

      </tr> 
      <tr> 
      <td>Branch NUMBER</td> 
       <td align="left"> 
        <input name="Key_BNumber_1" size="35" type="text" /> 
       </td> 

      </tr> 
      <tr><td align="center" COLSPAN="2"> <b>PERSON</b><td></tr> 
      <div id="Person"> 

      <tr> 
      <td>First Name</td> 
       <td align="left"> 

        <input name="Key_FirstName_1" size="35" type="text" /> 
       </td> 
       </tr> 
       <tr> 
      <td>Last Name</td> 
       <td align="left"> 

        <input name="Key_Lastname_1" size="35" type="text" /> 
       </td> 
       </tr> 
       <tr> 
       <td>DOB</td> 
       <td align="left"> 

        <input name="Key_DOB_1" size="35" type="text" /> 
       </td> 
       <td><button onClick="CreatePerson('Person')">Add Person</button> 
       </td> 
       </tr> 
       </div> 
       </table> 
       </fieldset> 
       </form> 
</body> 
</html>

J'ai modifié la fonction javascript pour cela, il crée aussi 2 boîtes du premier nom et le dernier texte de nom en haut de la page, mais dès que le code est en vigueur à partir du script java fin à ces zones de texte ont disparu.

var i=2; 
var j=2; 
function CreatePerson(divName) 
    { 
    var Y= document.createElement("div"); 
    Y.id=divName+i; 
    // Y.innerHTML="<tr> 
    var appendText="<tr><td>First Name</td><td align="+"left"+"><input name="+"Key_FirstName_"+i+" size="+"35"+" type="+"text"+" /></td></tr><tr><td>Last Name</td></tr><tr><td align="+"left"+"><input name="+"Key_lastName_"+i+" size="+"35"+" type="+"text"+" /></td></tr>"; 

Y.innerHTML=appendText; 
    document.getElementById(divName).after(Y); 
    i++; 
    }

Source

2017-10-16 user2897967

'y.innerHTML = »

; 'manque la fermeture' "' – tommyO

Vous devez mettre votre js dans le bas – MohitC

Non, vous n'avez pas @MohitC - la fonction 'CreatePerson' est _defined_ dans la tête, avant que ce soit divi ed to exists, mais il n'est pas appelé jusqu'à ce que le gestionnaire onClick se déclenche; et qui ne peut se déclencher qu'après que le DOM entier soit chargé et rendu. Si vous voulez parler des meilleures pratiques, il est préférable de placer votre JS dans un fichier '.js' complètement séparé et de déclencher des choses depuis l'événement DOMContentLoaded (ou jquery' $ (document) .ready() ') –

-1

essayer

<form method="POST"> 
    <div id="dynamicInput"> 
      Entry 1<br><input type="text" name="myInputs[]"> 
    </div> 
    <input type="button" value="Add another text input" onClick="addInput('dynamicInput');"> 
</form> 

var counter = 1; 
var limit = 3; 
function addInput(divName){ 
    if (counter == limit) { 
      alert("You have reached the limit of adding " + counter + " inputs"); 
    } 
    else { 
      var newdiv = document.createElement('div'); 
      newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>"; 
      document.getElementById(divName).appendChild(newdiv); 
      counter++; 
    } 
}

dynamically add form elements via JavaScript

Source

2017-10-16 18:33:20

Une petite explication serait utile Quel était le problème et comment le code le résout-il? – showdev

Oui, vous l'avez fait plus que simplement ajouter la citation close manquante '" 'que les gens ont mentionnée. Qu'est-ce que vous avez changé? _Pourquoi as-tu fait le changement? Pourquoi cela n'a-t-il pas fonctionné avant? (mettez à jour votre réponse, ne me l'expliquez pas dans les commentaires, je connais déjà les réponses aux 3 questions que j'ai posées ici) –

Ajouté manquant -close citation mais toujours ne fonctionne pas. – user2897967

créer dynamiquement des éléments de formulaire

Répondre

Questions connexes