Comment passer le paramètre a dans newElement.setAttribute dans JavaScript

J'utilise ce code pour générer dynamiquement la zone de texte en utilisant le JavaScript. Ça fonctionne bien. Mais mon problème est que toutes les zones de texte générées ont le même nom. Est-il possible de préfixer le compte de la zone de texte avec le nom de la zone de texte afin qu'il soit facile de publier les valeurs de la zone de texte?Comment passer le paramètre a dans newElement.setAttribute dans JavaScript

<html> 
     <head> 
     <script>//addElement('INPUT','targetTag',{'id':'my_input_tag', 'name':'my_input_tag', 'type':'text', 'value':'txt2','size':'5'}); return false; 
      function addElement(tag_type, target, parameters) { 
      // var parameters = "'id':'my_input_tag', 'name':'my_input_tag', 'type':'text', 'value':'txt2'"; 
      //alert(parameters); 
      var newElement = document.createElement(tag_type); 

      //Add parameters 
      if (typeof parameters != 'undefined') { 
       for (parameter_name in parameters) { 
       // newElement.setAttribute(parameter_name, parameters[parameter_name]); 
        newElement.setAttribute("text","button","name:my_input_tag","value:my_input_tag"); 

       } 
      } 

      //Append element to target 
      document.getElementById(target).appendChild(newElement); 

      if(document.getElementById('txthidden').value == "") { 
      document.getElementById('txthidden').value = 1; 
      } else { 
      document.getElementById('txthidden').value = parseInt(document.getElementById('txthidden').value) + parseInt(1); 
      } 
     } 

      function Submit() { 
      var txtval = document.getElementById('my_input_tag').value; 
      alert(txtval); 
      } 
     </script> 
     </head> 
     <body> 
     <form method="post"> 
     <div id="targetTag"></div> 
     <input type="submit" value="Check"/> 
     </form> 
     <input type="text" name="txthidden" id="txthidden" > 

     <input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag1', 'name':'my_input_tag', 'type':'text', 'value':'txt2','size':'5'}); return false;" value="Add Input Tag" /> 

     <input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" /> 
     <input type="button" onClick="return Submit();" value="Save" /> 
     </body> 
    </html>

Source

2010-10-23 Meena

function addElement(tag_type, target, parameters) {   
     var newElement = document.createElement(tag_type);   

     //Add parameters   
     if (typeof parameters != 'undefined') {   
      for (parameter_name in parameters) { 
       newElement[parameter_name] = parameters[parameter_name]; 
      } 
     }   

     //Append element to target   
     document.getElementById(target).appendChild(newElement);   

     if (document.getElementById('txthidden').value == "") {   
      document.getElementById('txthidden').value = 1;   
     } else {   
      document.getElementById('txthidden').value = parseInt(document.getElementById('txthidden').value) + parseInt(1);   
     }   
    }

Modifier cette ligne dans votre code html à ce

<input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag' + document.getElementById('txthidden').value, 'name':'my_input_tag' + document.getElementById('txthidden').value, 'type':'text', 'value':'txt2','size':'5'}); return false;" value="Add Input Tag" />

Voici une Litle demo http://jsbin.com/emiza4/2

Source

2010-10-23 05:43:44

Il a besoin d'un compteur ajouté après le nom. Vous pouvez utiliser la valeur de 'txthidden' pour cela. – ArtBIT

oui, merci pour votre replay. Je passe le nom de la zone de texte dans le bouton Sur l'événement de clic .how pour passer la valeur de la zone de texte comme paramètre. – Meena

@Meena ... si vous remarquez que j'ai modifié votre 'for ... loop' Cette modification prendra comme paramètre le tableau associatif que vous passez et remplira les valeurs correspondantes dans votre nouvel élément . Si vous passez {id: "mynewID1"} l'élément créé aura le et id = "mynewID1" toute propriété valide va peupler dans le nouvel élément tel que; style, nom, valeur ... etc ... –

Vous pouvez faire une solution beaucoup plus claire . Vous pouvez enregistrer le nombre actuel de champs de saisie dans une propriété de la fonction (au lieu d'un champ de saisie masqué).

vous pouvez également créer deux fonctions comme la séparation des préoccupations et modularitéaddElement et addInput, comme addInput sera un cas particulier pour addElement mais vous devez type moins si vous voulez l'appeler:

// creates a child element to a given parent 
function addElement(tag, target, params) { 
    var el = document.createElement(tag); 
    // Add parameters 
    if (typeof params != 'undefined') { 
     for (var parameter in params) { 
      if (params.hasOwnProperty(parameter)) { 
      el[parameter] = params[parameter]; 
      } 
     } 
    } 

    // Append element to target 
    document.getElementById(target).appendChild(el); 
} 

// creates an <input> child to a given target 
function addInput(target, id, type, value, size) { 
    var params = { 
    id: id + addInput.cnt, 
    name: id + addInput.cnt, 
    type: type || "text", 
    value: value, 
    size: size 
    }; 
    addElement("input", target, params); 
    addInput.cnt++; 
} 

addInput.cnt = 1;

HTML

onclick="addInput('targetTag', 'my_input_tag', 'text', 'txt2', '5');"

Source

2010-10-23 07:17:35 galambalazs

Comment passer le paramètre a dans newElement.setAttribute dans JavaScript

Répondre

Questions connexes