trigger multiple javascript function by single click RSS

• • Reply
  kengkit

  Member

  103 Points

  790 Posts

  trigger multiple javascript function by single click

  Jun 05, 2017 10:27 AM|kengkit|LINK

  I have a javascript function use to dynamically create textbox..

  it's troublesome if i need to click 20times if i want to create 20 textbox..

  any idea to create multiple textbox by single click? 

  <input id="btnAdd" type="button" value="Add Group" class="btn btn-default" onclick="AddTextBox()" /> 

  Below is the link i refer to dynamically add and remove TextBoxes using JavaScript
  https://www.aspsnippets.com/Articles/Dynamically-add-and-remove-TextBoxes-using-JavaScript.aspx

• • Reply
  A2H

  All-Star

  50831 Points

  9895 Posts

  Re: trigger multiple javascript function by single click

  Jun 05, 2017 04:25 PM|A2H|LINK

  You can change the javascript function like below to add textbox control based on your need

  function GetDynamicTextBox(value,txtcount){
              var finalhtml="";
              for(var i=1;i<=txtcount;i++)
              {
                  finalhtml = finalhtml+ '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> <input type="button" value="Remove" onclick = "RemoveTextBox(this)" /> <br/>'
    
              }
              return finalhtml;
          }
          function AddTextBox() {
              var div = document.createElement('DIV');
              // Variable to decide how many textbox to be added
              var txtboxcount = 20;
              div.innerHTML = GetDynamicTextBox("",txtboxcount);
             
              document.getElementById("TextBoxContainer").appendChild(div);
          }

  Change "txtboxcount " variable value as per your need.

  • Sample Demo

  Thanks,
  Aje
  My Blog | Dotnet Funda
• • Reply
  Cathy Zou

  Star

  8670 Points

  2882 Posts

  Re: trigger multiple javascript function by single click

  Jun 06, 2017 06:36 AM|Cathy Zou|LINK

  Hi kengkit

  For your problem. you could use code below:

  <script>
          function GetDynamicTextBox(value) {
              return '<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
              '<input type="button" value="Remove" onclick = "RemoveTextBox(this)" />'
          }
          function AddTextBox() {
              for (var i = 0; i < 20; i++) {
                  var div = document.createElement('DIV');
                  div.innerHTML = GetDynamicTextBox("");
                  document.getElementById("TextBoxContainer").appendChild(div);
              }
          }
      </script>
  
   <input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />
          <br />
          <br />
          <div id="TextBoxContainer">
              <!--Textboxes will be added here -->
          </div>  

  Output screenshot as below:

  

  Best regard

  Cathy

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.