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

The execution of jQuery Ajax requests with "when" is encountering issues

A minimalist web page appearing as blank in Internet Explorer

Angular 5 and Bootstrap card with enhanced double-click functionality

Selecting a language by clicking on it

Hover over the text below to see an image appear in its place

Is there a way to adjust the placement of this AccordionDetails utilizing Material UI's Grid system?

Using the CSS property `transform:scale(2,2)` causes an image to suddenly appear in the

Is there a way to automatically select all checkboxes when I select contacts in my case using Ionic 2?

Is it possible to refresh text in table without clearing icons?

Tips for dynamically resetting the dataTable

Switch between display modes by clicking using collections

``Passing a database value from a controller to a table popup through AJAX: A step-by

What is the best approach to creating a website for a client who needs to incorporate their own Youtube videos?

Experiencing Difficulty Retaining Checkbox State Using LocalStorage Upon Page Reload

Turning my dual button navigation into tabs to display distinct HTML pages beneath a designated header

Having difficulty adjusting the padding of the Material UI table

I have developed a website that can calculate the factorial of any given number. The next step is to design a function that will display the step-by-step mathematical process

"Exploring the Possibilities: Foundation 4 Reveal and WP AJAX for Creating Previous/Next Modal Windows within an Open Modal

Warning: multiple selections have been made on the checkboxes

Harness the power of Jquery with the masonry('hide', element) method on a carefully selected jquery element