Enhancing dynamic text boxes with jQuery by incorporating additional information

Question

Enhancing dynamic text boxes with jQuery by incorporating additional information

I've recently developed an interactive app that dynamically creates tables based on user input. The app includes a feature where you can specify the number of tables to generate and track the total count of tables added.

Currently, I'm exploring ways to enhance the app by allowing users to input their name or any custom text which will then be displayed in a designated 'Name' box upon clicking the 'Add now' button. Despite numerous attempts, I haven't been successful in modifying the existing functionality to accommodate this text display feature.

You can explore the live version of this project here: http://codepen.io/BabinecJ/pen/BRjJbw

$('[name="cand_no" ]').on('change', function() {
  // Implementing logic for valid inputs
  if (this.value != '') {
    var val = parseInt(this.value, 10);
    
    $(function() {
      $('#add').bind('click', function() {
        var count = $('#mytbody').children('tr').length;
        $('#counter').html(count);
        
        var name = $("#tname").val();
        $('#name').html(name);
      });
    });

    $(document).ready(function() {
      $('cand_no').keydown(function(event) {
        if (event.keyCode == 13) {
          event.preventDefault();
          return false;
        }
      });
    });

    for (var i = 0; i < val; i++) {
      var $cloned = $('.template tbody').clone();
      $('#studentTable tbody').append($cloned.html());
    }
  }
});

.template {
  border-style: solid;
}

#cand_no {
  background-color: red;
}

#add {
  color: red;
  margin-right: 770px;
  margin-top: -35px;
}

jquery html css

Answer 1

Answer №1

Based on the MDN documentation for id: "The id global attribute specifies a unique identifier (ID) that must be distinct throughout the entire document."¹

To adhere to this rule, adjust the id attribute of the target element (in this case, <p id="tname">) to ensure its uniqueness. The current code snippet looks like this:

<td> <p>Number of rows: <p id="counter"></span></p></td>

<td>Name<p id="tname"></span></p></td>

An updated version might look something like this:

<td> <p>Number of rows: <p id="counter"></span></p></td>

<td>Name<p id="aname"></span></p></td>

Remember to also modify the JavaScript code that interacts with this element, as illustrated below:

 $('#aname').html(name);

Check out a showcase of this implementation below:

$('[name="cand_no" ]').on('change', function() {
  // Omitting input validation
  if (this.value != '') {
    var val = parseInt(this.value, 10);
    ///Click add button add count number + table

    $(function() {
      $('#add').bind('click', function() {
        $('#mytbody');
        var count = $('#mytbody').children('tr').length;
        $('#counter').html(count);
        ///need to find enter coder name 
        var name = $("#tname").val();
        $('#aname').html(name);
      });
    });
    /// Figuring out way to disable enter key being pressed
    $(document).ready(function() {
      $('cand_no').keydown(function(event) {
        if (event.keyCode == 13) {
          event.preventDefault();
          return false;
        }
      });
    });
    for (var i = 0; i < val; i++) {
      // Clone the Template
      var $cloned = $('.template tbody').clone();
      // For each number added append the template row
      $('#studentTable tbody').append($cloned.html());
    }
  }
});

.template {
  border-style: solid;
}

#cand_no {
  background-color: red;
}

#add {
  color: red;
  margin-right: 770px;
  margin-top: -35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <label><strong>Number of Rows</strong></label>
  <label><input name="cand_no"  type="text" placeholder="Type Number of Rows" id="cand_no" /></label>

<div style="float: right; width: 40px">
    <button id="add">Add row</button>
</div>
  <div class="clear"></div>
</p>
<p>
  <label><strong>Your Name</strong></label>
  <label><input name="tname" id="tname" type="text" placeholder="Type Your Name"  /></label>
  <div class="clear"></div>
</p>


<div class="cand_fields">
  <table id="studentTable" width="630" border="solid">
    <tbody id="mytbody">
      <tr>
        <td>
          <p>Number of rows:
            <p id="counter">
              </span>
            </p>
        </td>

        <td id="tname" width="0">Nameee
          <p id="aname">
            </span>
          </p>
        </td>
      </tr>
      <tr>
        <td><input name="tname" type="text" placeholder="name" required="required" id="tname" /></td>

        <td><input name="cand_pos" type="text" placeholder="Name" required="required" /></td>
      </tr>
  </table>
</div>

<div class="template" id=".template" style="display:none ">
  <table>


    <tr>
      <td><input name="cand_name" type="text" placeholder="Count" required="required" id="count" /></td>

      <td><input name="cand_pos" type="text" placeholder="Name" required="required" /></td>
    </tr>
    </tbody>
  </table>
</div>

¹_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}

Answer 2

Based on the MDN documentation for id: "The id global attribute specifies a unique identifier (ID) that must be distinct throughout the entire document."¹

To adhere to this rule, adjust the id attribute of the target element (in this case, <p id="tname">) to ensure its uniqueness. The current code snippet looks like this:

<td> <p>Number of rows: <p id="counter"></span></p></td>

<td>Name<p id="tname"></span></p></td>

An updated version might look something like this:

<td> <p>Number of rows: <p id="counter"></span></p></td>

<td>Name<p id="aname"></span></p></td>

Remember to also modify the JavaScript code that interacts with this element, as illustrated below:

 $('#aname').html(name);

Check out a showcase of this implementation below:

$('[name="cand_no" ]').on('change', function() {
  // Omitting input validation
  if (this.value != '') {
    var val = parseInt(this.value, 10);
    ///Click add button add count number + table

    $(function() {
      $('#add').bind('click', function() {
        $('#mytbody');
        var count = $('#mytbody').children('tr').length;
        $('#counter').html(count);
        ///need to find enter coder name 
        var name = $("#tname").val();
        $('#aname').html(name);
      });
    });
    /// Figuring out way to disable enter key being pressed
    $(document).ready(function() {
      $('cand_no').keydown(function(event) {
        if (event.keyCode == 13) {
          event.preventDefault();
          return false;
        }
      });
    });
    for (var i = 0; i < val; i++) {
      // Clone the Template
      var $cloned = $('.template tbody').clone();
      // For each number added append the template row
      $('#studentTable tbody').append($cloned.html());
    }
  }
});

.template {
  border-style: solid;
}

#cand_no {
  background-color: red;
}

#add {
  color: red;
  margin-right: 770px;
  margin-top: -35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <label><strong>Number of Rows</strong></label>
  <label><input name="cand_no"  type="text" placeholder="Type Number of Rows" id="cand_no" /></label>

<div style="float: right; width: 40px">
    <button id="add">Add row</button>
</div>
  <div class="clear"></div>
</p>
<p>
  <label><strong>Your Name</strong></label>
  <label><input name="tname" id="tname" type="text" placeholder="Type Your Name"  /></label>
  <div class="clear"></div>
</p>


<div class="cand_fields">
  <table id="studentTable" width="630" border="solid">
    <tbody id="mytbody">
      <tr>
        <td>
          <p>Number of rows:
            <p id="counter">
              </span>
            </p>
        </td>

        <td id="tname" width="0">Nameee
          <p id="aname">
            </span>
          </p>
        </td>
      </tr>
      <tr>
        <td><input name="tname" type="text" placeholder="name" required="required" id="tname" /></td>

        <td><input name="cand_pos" type="text" placeholder="Name" required="required" /></td>
      </tr>
  </table>
</div>

<div class="template" id=".template" style="display:none ">
  <table>


    <tr>
      <td><input name="cand_name" type="text" placeholder="Count" required="required" id="count" /></td>

      <td><input name="cand_pos" type="text" placeholder="Name" required="required" /></td>
    </tr>
    </tbody>
  </table>
</div>

¹_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}

Enhancing dynamic text boxes with jQuery by incorporating additional information

Answer №1

Similar questions

What is the best way to implement a switch that can simultaneously display both the on and off positions?

Content Remains Visible in Inspector Despite Display Being Set to None

stop initial focus on input field in Ionic

Placing a div with absolute positioning inside another div with absolute positioning raises the question of how it functions when the outer div is not set to position: relative

Acquiring HTML form data using JavaScript

Establish an angular scope within the DOM element

Tips for including a permanent button at the bottom of a material ui dialog box

When the window is resized, the div shifts position

What is the best way to ensure the right six-column DIV remains at the top in responsive web design?

I seem to be stuck trying to figure out what's going wrong when receiving JSON data

Tips for validating a text box within a dynamically created HTML table (grid)

Utilizing CSS in Angular applications

Set the style to be displayed as a block element

File input does not prompt the file browser on Android devices, limiting users to only the camera option

Increase division height when mouse hovers over it

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?

Launching ng-app for AngularJS after the page has finished loading

Tips for Incorporating Multiple Stops into Your Google Maps Route

Displaying Dates in an Express Application using EJS

Using jQuery to dynamically insert an HTML element into a table