Tips for continuously duplicating a value in every textbox until the final one

Question

Tips for continuously duplicating a value in every textbox until the final one

I am looking to implement a feature where the value of a double-clicked textbox is repeated until the end of the textbox. In my form, there are ten text boxes with different values. When I double click on the third textbox, I want the value of the third textbox to be repeated in all textboxes from the third to the tenth, while the first and second textboxes retain their original values. I have provided the code snippet below for reference.

http://codepen.io/nachicode/pen/dXKaaA/

Code Snippet:

HTML

<table>
  <tr>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="1" />
    </td>
    <td>
      <input Type="text" Value="1" />
    </td>
  </tr>
  // More HTML code here
</table>

JQUERY

$(document).ready(function() {
  $("input").dblclick(function() {
    //Code implementation goes here
  });
});

javascript jquery html css

Answer 1

Answer №1

Here is a suggested method:

// To implement the following approach:
// Locate all <input> elements inside a <td> element,
// Connect the on() method's anonymous function 
// as the handler for the 'dblclick' event:
$('td input').on('dblclick', function() {

  // Identify the parent <tr> or the double-clicked element:
  var currentRow = $(this).closest('tr'),

    // Retrieve all subsequent siblings of the current <tr>,
    // and include the current <tr> in that selection
    // using addBack():
    laterSiblingRows = currentRow.nextAll().addBack(),

    // Find relevant <input> elements within the <tr>
    // elements:
    laterInputs = laterSiblingRows.find('input');

  // Update the value of those <input> elements to
  // match the value of the double-clicked element:
  laterInputs.val(this.value);
})

$('td input').on('dblclick', function() {
  var currentRow = $(this).closest('tr'),
    laterSiblingRows = currentRow.nextAll().addBack(),
    laterInputs = laterSiblingRows.find('input');

  laterInputs.val(this.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="1" />
    </td>
    <td>
      <input Type="text" Value="1" />
    </td>
  </tr>
  ...
  <tr>
    <td>
      <input Type="text" Value="10" />
    </td>
    <td>
      <input Type="text" Value="10" />
    </td>

  </tr>
</table>

JS Fiddle.

Additional Resources:

Answer 2

Here is a suggested method:

// To implement the following approach:
// Locate all <input> elements inside a <td> element,
// Connect the on() method's anonymous function 
// as the handler for the 'dblclick' event:
$('td input').on('dblclick', function() {

  // Identify the parent <tr> or the double-clicked element:
  var currentRow = $(this).closest('tr'),

    // Retrieve all subsequent siblings of the current <tr>,
    // and include the current <tr> in that selection
    // using addBack():
    laterSiblingRows = currentRow.nextAll().addBack(),

    // Find relevant <input> elements within the <tr>
    // elements:
    laterInputs = laterSiblingRows.find('input');

  // Update the value of those <input> elements to
  // match the value of the double-clicked element:
  laterInputs.val(this.value);
})

$('td input').on('dblclick', function() {
  var currentRow = $(this).closest('tr'),
    laterSiblingRows = currentRow.nextAll().addBack(),
    laterInputs = laterSiblingRows.find('input');

  laterInputs.val(this.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="1" />
    </td>
    <td>
      <input Type="text" Value="1" />
    </td>
  </tr>
  ...
  <tr>
    <td>
      <input Type="text" Value="10" />
    </td>
    <td>
      <input Type="text" Value="10" />
    </td>

  </tr>
</table>

JS Fiddle.

Additional Resources:

Answer 3

Answer №2

Is this what you had in mind?

$(document).ready(function() {
  $("input").dblclick(function() {
    var index = $(this).closest('td').index() + 1;
    var rows = $(this).closest('tr').nextAll().addBack();
    rows.find('td:nth-child(' + index + ') input').val($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="1" />
    </td>
    <td>
      <input Type="text" Value="1" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="2" />
    </td>
    <td>
      <input Type="text" Value="2" />
    </td>

Answer 4

Is this what you had in mind?

$(document).ready(function() {
  $("input").dblclick(function() {
    var index = $(this).closest('td').index() + 1;
    var rows = $(this).closest('tr').nextAll().addBack();
    rows.find('td:nth-child(' + index + ') input').val($(this).val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>One</th>
    <th>Two</th>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="1" />
    </td>
    <td>
      <input Type="text" Value="1" />
    </td>
  </tr>
  <tr>
    <td>
      <input Type="text" Value="2" />
    </td>
    <td>
      <input Type="text" Value="2" />
    </td>

Answer 5

Answer №3

Give this a shot:

$("input").dblclick(function(){
        var inputValue = $(this).val();

        for(counter=inputValue; counter<=10; counter++)
        {
            $('input[value="'+counter+'"]').val('hello');
            //$('input[value="enter highlight"]')
        }
    });

Answer 6

Give this a shot:

$("input").dblclick(function(){
        var inputValue = $(this).val();

        for(counter=inputValue; counter<=10; counter++)
        {
            $('input[value="'+counter+'"]').val('hello');
            //$('input[value="enter highlight"]')
        }
    });

Answer 7

Answer №4

Instead of providing direct code solutions, a possible approach could be assigning unique IDs to your input elements like "box1", "box2", and so on. By double-clicking an input, you can retrieve its ID, determine the index, increment it, and then reference the subsequent inputs using the "box" naming convention until either no element with that ID is found or a certain limit, such as 10, is reached.

Here's a rough pseudo-code illustration:

var clickedBoxId = this.ID; // Assuming "this" refers to the clicked box
var index = clickedBoxId.Replace('box','');

for( int i = index; i <= 10; i++ )
{
    var anotherBox = document.getElementById('box' + i);
    if( anotherBox !== 'undefined' )
    {
        anotherBox.value = this.value;
    }
}

Keep in mind that this pseudocode might need adjustment when translated into actual JavaScript implementation since I'm not a frequent JS user. Therefore, please use it as a guide rather than a ready-made solution.

Answer 8

Instead of providing direct code solutions, a possible approach could be assigning unique IDs to your input elements like "box1", "box2", and so on. By double-clicking an input, you can retrieve its ID, determine the index, increment it, and then reference the subsequent inputs using the "box" naming convention until either no element with that ID is found or a certain limit, such as 10, is reached.

Here's a rough pseudo-code illustration:

var clickedBoxId = this.ID; // Assuming "this" refers to the clicked box
var index = clickedBoxId.Replace('box','');

for( int i = index; i <= 10; i++ )
{
    var anotherBox = document.getElementById('box' + i);
    if( anotherBox !== 'undefined' )
    {
        anotherBox.value = this.value;
    }
}

Keep in mind that this pseudocode might need adjustment when translated into actual JavaScript implementation since I'm not a frequent JS user. Therefore, please use it as a guide rather than a ready-made solution.

Tips for continuously duplicating a value in every textbox until the final one

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can you organize an array into rows and columns for easier viewing?

What is the best way to keep a div element fixed at the top of a webpage?

How can I prevent one button from taking precedence over another button even though they have different classes?

What's the best way to place my image inside a Bootstrap Accordion so that it is housed within the accordion-item?

Import information from a MySQL table into a single input field

Header navigation using jQuery

Flipping a 2-dimensional box using CSS and incorporating cascading flex divs

What steps are involved in integrating Bootstrap and jQuery into a Vue Webpack-Simple template?

Display additional text when hovering over an object

Tips for showcasing div content on a separate line rather than inline within a collapsible <a> tag

Divide the full width into three divisions, each taking up 33% of the total width

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

The server failed to respond to the Angular HTTP request

Choose only one option from the dropdown menu at a time within the specified div

Scaling Vuetify icons dimensions

What is the best way to eliminate the blue color from a Boostrap 5.3 accordion item when it is opened?

Switching the markLine in vega lite to a markBar causes it to lose its sorting arrangement

Update button text in real-time using JavaScript

What could be causing the padding of my anchor element to extend outside the boundaries of its parent list

Having trouble getting any results from a JSON response using the jQuery Tokeninput plugin in PHP?