How to use jQuery oninput function to display values of multiple input fields to a single input field

Question

I want to use Jquery on.(input, [...]) function to display what a user types in another input field.

Here's my code:

$(document).ready(function() {
  $("input.inputtext").on('input', function() {
    var inputtext = $(".inputtext").val();
    $(".showinput").val(inputtext);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="inputs">
  <input type="text" class="inputtext">
  <div>
    <div class="inputs">
      <input type="text" class="inputtext">
      <div>
        <div class="inputs">
          <input type="text" class="inputtext">
          <div>
            <input type="text" class="showinput">

However, the code only shows the entered text for the first input field.

I think I have to use a for loop but I dont't know how to.

vhr · Accepted Answer · 2021-04-08 10:07:27Z

2

This will work (value from actual field using 'this'):

$(document).ready(function(){
  $("input.inputtext").on('input', function (){
  var inputtext= $(this).val();    
  $(".showinput").val(inputtext);
 });
});

edited Apr 8, 2021 at 10:07

answered Apr 8, 2021 at 9:42

vhr

1,6741 gold badge16 silver badges25 bronze badges

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

2 Comments

Efoskhi Over a year ago

Thanks, but I want only the inputed value to be in the showinput field.

vhr Over a year ago

@Efoskhi I see what you mean now:) you want to see the input from an actual field. see my edited answer

Efoskhi · Accepted Answer · 2021-04-08 10:09:42Z

0

Thanks y'all. I was missing a "this" in the var inputtext syntax.

The correct script is :

$(document).ready(function(){
    $("input.inputtext").on('input', function (){
    var inputtext=$(this, ".inputtext").val();
    $(".showinput").val(inputtext);
  });
});

answered Apr 8, 2021 at 10:09

Efoskhi

616 bronze badges

Collectives™ on Stack Overflow

How to use jQuery oninput function to display values of multiple input fields to a single input field

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related