Simplifying Javascript to work with Multiple HTML Input Boxes

Question

I'm trying to make a simple form that will allow a user to type into an HTML text box, which will then send that to another text box that they cannot modify. I have figured out how to do this; however, the code I'm using feels bloated and I'm sure there's a way to streamline it.

Here is my Javascript:

$(".name_input_1").on('keyup',function(){
    $(".name_print_1").val($(this).val());
});

$(".name_input_2").on('keyup',function(){
    $(".name_print_2").val($(this).val());
});

$(".name_input_3").on('keyup',function(){
    $(".name_print_3").val($(this).val());
});

$(".name_input_4").on('keyup',function(){
    $(".name_print_4").val($(this).val());
});

$(".name_input_5").on('keyup',function(){
    $(".name_print_5").val($(this).val());
});

$(".name_input_6").on('keyup',function(){
    $(".name_print_6").val($(this).val());
});

$(".name_input_7").on('keyup',function(){
    $(".name_print_7").val($(this).val());
});

$(".name_input_8").on('keyup',function(){
    $(".name_print_8").val($(this).val());
});

$(".name_input_9").on('keyup',function(){
    $(".name_print_9").val($(this).val());
});

$(".name_input_10").on('keyup',function(){
    $(".name_print_10").val($(this).val());
});

$(".name_input_11").on('keyup',function(){
    $(".name_print_11").val($(this).val());
});

$(".name_input_12").on('keyup',function(){
    $(".name_print_12").val($(this).val());
});

...and a little more...

function updateText(type) { 
 var id = type+'_print';
 document.getElementById(id).value = document.getElementById(type).value;
}

Here is some HTML:

    <div style="float:left;">
    <input type="text" class="name_input_1">
    <br>
    <input type="text" class="name_input_2">
    <br>
    <input type="text" class="name_input_3">
    <br>
    <input type="text" class="name_input_4">
    <br>
    <input type="text" class="name_input_5">
    <br>
    <input type="text" class="name_input_6">
    <br>
    <input type="text" class="name_input_7">
    <br>
    <input type="text" class="name_input_8">
    <br>
    <input type="text" class="name_input_9">
    <br>
    <input type="text" class="name_input_10">
    <br>
    <input type="text" class="name_input_11">
    <br>
    <input type="text" class="name_input_12">
    <br>
    </div>
    <div style="float:left;">
    <input type="text" class="name_print_1" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_2" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_3" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_4" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_5" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_6" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_7" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_8" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_9" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_10" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_11" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_12" placeholder="Automatically Filled" disabled>

I have tried to make a Fiddle for it, but it doesn't work there. Not sure why. This does work just fine on a local machine. I'm just looking for a way to slim-down that code. Yes, I am a Javascript novice at best. Please go easy on me. :)

Hmm, I would try something like that: let names = ".name_input_1,.name_input_2,.name_input_3" and then something like names.split(',').forEach(name => $(name).on('keyup',function(){ $(name).val($(this).val()); })). Still ugly, but less boilerplate. — Mateusz
– Mateusz, Commented Oct 23, 2017 at 20:26

Tom O. · Accepted Answer · 2017-10-23 21:21:20Z

1

I think this is what you're trying to achieve. The way I wrote it is so that the secoind textbox will update every time a keypress is called on the first textbox, but the code can easily be updated to have the function fire on a different event.

var nameInputs = document.getElementsByClassName('name_input');
var disabledInputs = document.getElementsByClassName('name_print');

for (let i = 0; i < nameInputs.length; i++) {
  nameInputs[i].addEventListener('keyup', function() {
    disabledInputs[i].value = this.value;
    disabledInputs[i].disabled = true;
  });
}

<div style="float:left;">
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_inpu">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
</div>

<div style="float:left;">
  <input type="text" class="name_print" placeholder="Automatically Filled">
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>

edited Oct 23, 2017 at 21:21

answered Oct 23, 2017 at 20:35

Tom O.

5,9813 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brett Roby Over a year ago

I really like what you've done here! This seems to work perfectly, and its code is much more slender than mine. It's a huge improvement over mine for sure, and exactly what I was seeking. Could this same concept be applied to drop-down selections as well? What I mean is could we have it so that the drop-down selections populate a text box, using the same type of coding?

Tom O. Over a year ago

Great I'm glad it helps. Yes, you can absolutely apply event to all different types of input and other DOM elements. I will post some documentation for you to read shortly to help you understand event driven programming in JavaScript

Brett Roby Over a year ago

Sweet. Thanks. I'd love to see an example. I played around with it quite a bit and couldn't quite get it to work where once the selection was made the input box would be populated. This is all part of the same project, and like what I had before, I have something that works but I know it should/could be better than it is.

Carlos Moreira · Accepted Answer · 2017-10-23 20:38:37Z

Add a single class that corresponds to all inputs, like "name-input", apply a data attribute on inputs pointing towards which will be their "display" and use the function as this:

$(".name-input").on('keyup',function() {
    var input = $(this);
    var target = input.data('target');
    $(target).val(input.val());
});

The data attribute on your HTML will look like this:

<input type="text" class="name-input name_input_1" data-target=".name_print_1" />

That should help you with getting less javascript code on the expense of adding a few targets on your inputs.

Other than that, you can "hack" your class names and do something like this:

$('[class^="name_input"]').on('keyup', function () {
    var target = this.className.replace('input', 'print');
    $(target).val($(this).val());
});

Collectives™ on Stack Overflow

Simplifying Javascript to work with Multiple HTML Input Boxes

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related