How to make default value in the textarea change/autofill when the input text field is filled?-CodePudding

For example on input like this:

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div >
  <div >
      <input  type="text" placeholder="Customer Name">
  </div>
  <div >
      <input  type="email" placeholder="Customer Email">
  </div>
  <div >
      <input  type="text" placeholder="Customer pin">
  </div>
  <div >
      <textarea  rows="4">
Hi, {customer Name here}
Your Email is: {customer Email here}
Your Pin is:  {customer pin here}
      </textarea>
  </div>
</div>
</body>

</html>

When the Customer Name input is entered: John Doe
When the Customer Email input is entered: [email protected]
When the Customer pin input is entered: 123

Then the textarea value becomes

Hi, John Doe
Your Email is: [email protected]
Your Pin is: 123

CodePudding user response：

You need to use JavaScript. It will build your complete textarea content from the inputted values whenever they are updated. Like this:

// Input elements
var customerName = document.getElementById("customer-name");
var customerEmail = document.getElementById("customer-email");
var customerPin = document.getElementById("customer-pin");

// Output textarea
var customerInfo = document.getElementById("customer-info");

function updateTextareaContent(){
  customerInfo.value=`Hi, ${customerName.value||"(enter name)"}
Your Email is: ${customerEmail.value||"(enter email)"}
Your Pin is: ${customerPin.value||"(enter pin)"}`;
}

customerName.addEventListener("keydown", updateTextareaContent);
customerEmail.addEventListener("keydown", updateTextareaContent);
customerPin.addEventListener("keydown", updateTextareaContent);

customerName.addEventListener("keyup", updateTextareaContent);
customerEmail.addEventListener("keyup", updateTextareaContent);
customerPin.addEventListener("keyup", updateTextareaContent);

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div >
  <div >
      <input  type="text" placeholder="Customer Name" id="customer-name">
  </div>
  <div >
      <input  type="email" placeholder="Customer Email" id="customer-email">
  </div>
  <div >
      <input  type="text" placeholder="Customer pin" id="customer-pin">
  </div>
  <div >
      <textarea  rows="4" id="customer-info">
Hi, (enter name)
Your Email is: (enter email)
Your Pin is: (enter pin)
      </textarea>
  </div>
</div>
</body>

</html>

(The snippet is a bit large so it is collapsed, click the arrow to open it)

This watches for changes in the text, and when those changes happen, it updates the textarea.

Here's some further reading in order to more better understand the code snippet:

Event Listeners on w3schools
keydown and keyup events on MDN
Template Literals on MDN