For example on input like this:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="form-group my-2">
<input class="form-control mx-2" type="text" placeholder="Customer Name">
</div>
<div class="form-group mb-2">
<input class="form-control mx-2" type="email" placeholder="Customer Email">
</div>
<div class="form-group mb-2">
<input class="form-control mx-2" type="text" placeholder="Customer pin">
</div>
<div class="form-group mb-2">
<textarea class="form-control mx-2" rows="4">
Hi, {customer Name here}
Your Email is: {customer Email here}
Your Pin is: {customer pin here}
</textarea>
</div>
</div>
</body>Hi, John Doe
Your Email is: johndoe@mail.com
Your Pin is: 123
How would I autofill the textarea with the data that the user inputted?
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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="form-group my-2">
<input class="form-control mx-2" type="text" placeholder="Customer Name" id="customer-name">
</div>
<div class="form-group mb-2">
<input class="form-control mx-2" type="email" placeholder="Customer Email" id="customer-email">
</div>
<div class="form-group mb-2">
<input class="form-control mx-2" type="text" placeholder="Customer pin" id="customer-pin">
</div>
<div class="form-group mb-2">
<textarea class="form-control mx-2" 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
Template Literals on MDN