Creating dynamic forms and tables on an HTML webpage

Question

Creating dynamic forms and tables on an HTML webpage

I'm struggling to dynamically add table elements and form elements in an HTML page. My goal is to automatically add input boxes with labels when a user enters a number in the input box without having to click any button. I believe using the 'keyup' event handler should help me achieve this, but I am having trouble implementing it in my code. Can someone please assist me by correcting my code or suggesting an alternative solution for my requirements?

HTML CODE:

<form>
    <input type="number" id="teamMemNum">
</form>
<table id="memNameTable"></table>

JAVASCRIPT:

<script type="text/javascript">
     $(document).ready(function(){
        $("#teamMemNum").on('keyup', function(){
            var num = $("#teamMemNum").val();
            var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>";
            for(var i = 0; i < num; i++){
                $("#memNameTable tbody").append(markup);
            }
        });
    });
</script>

javascript java jquery html css

Answer 1

Answer №1

Users have the ability to paste any number of rows.

It is important to refresh the table whenever the input field value is changed.

$(document).ready(function(){
        $("#teamMemNum").on('change paste keyup', function(){
            $("#memNameTable").html("");
            
            var num = $("#teamMemNum").val();
            var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>";
            for(var i = 0; i < num; i++){
                $("#memNameTable").append(markup);
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="number" id="teamMemNum">
</form>
<table id="memNameTable"></table>

Answer 2

Users have the ability to paste any number of rows.

It is important to refresh the table whenever the input field value is changed.

$(document).ready(function(){
        $("#teamMemNum").on('change paste keyup', function(){
            $("#memNameTable").html("");
            
            var num = $("#teamMemNum").val();
            var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>";
            for(var i = 0; i < num; i++){
                $("#memNameTable").append(markup);
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="number" id="teamMemNum">
</form>
<table id="memNameTable"></table>

Answer 3

Answer №2

Your table appears to be empty, and you are attempting to insert new markup within the tbody. To resolve this issue, simply ensure that the tbody element is contained within your table.

<form>
    <input type="number" id="teamMemNum">
</form>
<table id="memNameTable">
  <tbody></tbody>
</table>

Answer 4

Your table appears to be empty, and you are attempting to insert new markup within the tbody. To resolve this issue, simply ensure that the tbody element is contained within your table.

<form>
    <input type="number" id="teamMemNum">
</form>
<table id="memNameTable">
  <tbody></tbody>
</table>

Answer 5

Answer №3

Seems like your setup is almost good to go, just need a minor tweak. In the loop, you're using the selector $("memNameTable tbody"), but in your HTML there's no tbody. You can either add tbody to the table in your HTML or adjust the selector to simply be $("memNameTable").

Answer 6

Seems like your setup is almost good to go, just need a minor tweak. In the loop, you're using the selector $("memNameTable tbody"), but in your HTML there's no tbody. You can either add tbody to the table in your HTML or adjust the selector to simply be $("memNameTable").

Answer 7

Answer №4

Key reminders:

To ensure accuracy, listen for the change event instead of the keyup event on your numeric input field (this accommodates cycling using the up and down arrows).
To determine how many rows to add, subtract the existing table row count from the value in the input field.
If there is no tbody, append directly to the table element.

$(document).ready(function() {
  $("#teamMemNum").on('change', function() {
    var num = $("#teamMemNum").val() - $('#memNameTable tr').length;
    var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>";
    for (var i = 0; i < num; i++) {
      $("#memNameTable").append(markup);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="number" id="teamMemNum">
</form>
<table id="memNameTable"></table>

Answer 8

Key reminders:

To ensure accuracy, listen for the change event instead of the keyup event on your numeric input field (this accommodates cycling using the up and down arrows).
To determine how many rows to add, subtract the existing table row count from the value in the input field.
If there is no tbody, append directly to the table element.

$(document).ready(function() {
  $("#teamMemNum").on('change', function() {
    var num = $("#teamMemNum").val() - $('#memNameTable tr').length;
    var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>";
    for (var i = 0; i < num; i++) {
      $("#memNameTable").append(markup);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="number" id="teamMemNum">
</form>
<table id="memNameTable"></table>

Answer 9

Answer №5

It has been mentioned by others that you have forgotten to include the TBODY element in your TABLE.

Another valid point (which has already been raised) is that it would be better to use a broader event such as onBlur or onChange.

In my view, adding elements with identical IDs is not recommended as it can lead to non-compliant HTML - even though it may function correctly, it could cause issues for you or others in the future.

Personally, I prefer to avoid manipulating HTML strings and instead propose using a "dummy" line that will be disregarded when submitting the form:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="number" id="teamMemNum">
</form>
<table id="memNameTable">
  <tbody>
    <tr class="hidden sampleTR">
      <td><label for='memName' class="lineLabel">Enter name: </label></td>
      <td><input type='text' name='memName'></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>


<script type="text/javascript">
 $(document).ready(function(){
    $("#teamMemNum").on('change', function(e){
        var num = $("#teamMemNum").val();

        for(var i = 0; i < num; i++){

            //Clone a new line from the dummy sample (invisible) line
            var newLine = $('#memNameTable').find('tr.sampleTR').first().clone();

            //Generate a new id to be used
            var newID = 'memName_' + $('#memNameTable').find('tr').length;

            //Sets the new ID on the newLine elements
            $(newLine).find('input[name=memName]').attr('id', newID);
            $(newLine).find('label.lineLabel').attr('for', newID);

            //Append the newLine to the TBody of the Table
            $(newLine).appendTo($("#memNameTable tbody"));
        }
    });
});
</script>

Personally, this method makes it clearer to separate HTML from code.

Please note: the .hidden css class should be defined with a style like { display:none; } or an equivalent.

Answer 10

It has been mentioned by others that you have forgotten to include the TBODY element in your TABLE.

Another valid point (which has already been raised) is that it would be better to use a broader event such as onBlur or onChange.

In my view, adding elements with identical IDs is not recommended as it can lead to non-compliant HTML - even though it may function correctly, it could cause issues for you or others in the future.

Personally, I prefer to avoid manipulating HTML strings and instead propose using a "dummy" line that will be disregarded when submitting the form:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="number" id="teamMemNum">
</form>
<table id="memNameTable">
  <tbody>
    <tr class="hidden sampleTR">
      <td><label for='memName' class="lineLabel">Enter name: </label></td>
      <td><input type='text' name='memName'></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>


<script type="text/javascript">
 $(document).ready(function(){
    $("#teamMemNum").on('change', function(e){
        var num = $("#teamMemNum").val();

        for(var i = 0; i < num; i++){

            //Clone a new line from the dummy sample (invisible) line
            var newLine = $('#memNameTable').find('tr.sampleTR').first().clone();

            //Generate a new id to be used
            var newID = 'memName_' + $('#memNameTable').find('tr').length;

            //Sets the new ID on the newLine elements
            $(newLine).find('input[name=memName]').attr('id', newID);
            $(newLine).find('label.lineLabel').attr('for', newID);

            //Append the newLine to the TBody of the Table
            $(newLine).appendTo($("#memNameTable tbody"));
        }
    });
});
</script>

Personally, this method makes it clearer to separate HTML from code.

Please note: the .hidden css class should be defined with a style like { display:none; } or an equivalent.

Creating dynamic forms and tables on an HTML webpage

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The passport local strategy functions properly when tested with Postman, but encounters a "missing credentials" error when used with axios

Utilize the useState hook to update state when changes occur in the

Decoding JSON data in a Webmethod from an AJAX call

Error in the Angular-UI calendar

Troubleshooting: Phonegap Not Responding to Ajax Requests

"Controlling Selected Options in Bootstrap Dual Listbox: A Guide to Limiting Choices

Scroll horizontally within the div before scrolling down the page

React: Component styles fail to update dynamically

Designing this unique shape using CSS3 to create a sleek drop-down container

Position the Figcaption over the Image

Connect to a point on the leaflet map using an external <a> tag reference

Attempting to align two text boxes in the center using the text-align property

Having problems with the Save/Edit button functionality in JQuery?

Issues encountered when using v-model with JavaScript functions

Adapting data presentation based on user login status - using client-side logic

Effortlessly initiate the consecutive playback on SoundCloud

The prop HandleClick is not being identified

Unable to view sidebar navigation on the screen

Passing Error from AngularJS Service to Controller

What is the best way to switch from http to https in a React application?