Home/ Questions/Q 3274594
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T19:03:20+00:00

I am using this code to generate the textbox dynamically by using the JavaScript.

  • 0

I am using this code to generate the textbox dynamically by using the JavaScript. It’s working fine. But my issue is all generated textboxes have the same name. Is there is possible to prefix the textbox count with the textbox’ name so that it is easy to post the textbox values?

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
        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);        
        }        
     }

    Change this line in your html to this

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

    Here is a litle demo http://jsbin.com/emiza4/2

    • 0