How to add values from previous input to textarea

114
February 23, 2022, at 8:40 PM

I am trying to add values from 2 of my inputs to the text area. I was able to find a solution to grab one of the inputs and hope someone can help me find a way to get another one. Also, is there a way to grab another element from the page for example php echo of student's first name?

Please see the picture I would like this to say "Hey, student_first_name, my name is last_name from university_name, let's connect.

This is the code I have

    <script>
  // save the location of the name field
  var message_field = document.getElementById('university');
  var last_name_field = document.getElementById('last_name');
  //add an event listener to activate if the value of the field changes
  message_field.addEventListener('change', function() {
    // when the field changes run the following code
    // copy the text (value)
    var name = message_field.value;
    // concatenate it with the desired message
    var autoFill = 'Hi ' + name + ', thank you for visiting us!';
    // and paste it into the message field.
    document.getElementById('message').value = autoFill;
  })
</script>
Answer 1
<script>
// save the location of the name field
var university = document.getElementById('university_name').value;
var last_name = document.getElementById('last_name').value;
var first_name = document.getElementById('student_first_name').value;
//add an event listener to activate if the value of the field changes
message_field.addEventListener('change', function() {
// when the field changes run the following code
// copy the text (value)
var name = message_field.value;
// concatenate it with the desired message
var autoFill = autoFill + university;
autoFill = autoFill + last_name;
autoFill = autoFill + first_name;
// and paste it into the message field.
document.getElementById('message').value = autoFill;
})
</script>
Answer 2

it's a little bit confuse your HTML code, but i did an HTML code and adjusted your javascript code, I hope this helps you.

PS.: You can always group your inputs and textareas inside a FORM tag

https://www.w3schools.com/html/html_forms.asp

var form = document.getElementById("myForm");
    form.addEventListener("input", function () {
        var name = document.getElementById('name').value;
        var lastName = document.getElementById('last_name').value;
        var university = document.getElementById('university').value;
        document.getElementById('message').value = 'Hey, ' + name + ', my name is ' + lastName + ' from ' + university + ', let\'s connect'
    });
<form id="myForm">
    <div>
        <input type="text" placeholder="First Name" id="name">
    </div>
    <div>
        <input type="text" placeholder="Last Name" id="last_name">
    </div>
    <div>
        <input type="text" placeholder="University Name" id="university">
    </div>
    <div>
        <input type="text" placeholder="Phone Number" id="phone">
    </div>
    <div>
        <input type="email" placeholder="Email address" id="email">
    </div>
    <div>
        <textarea name="Message" id="message" cols="30" rows="10" placeholder="Message (optional)"></textarea>
    </div>
</form>

Rent Charter Buses Company
READ ALSO
How do i add arrows in specific part of the 360 image to move to another 360 image

How do i add arrows in specific part of the 360 image to move to another 360 image

I coded this 360 image slider, but my main objective was to create a slider with arrows inside the 360 image at specific parts and on hovering, for 5sec it will move the image linked with that arrow

145
Wobbly rendering when resetting value of v-radio component

Wobbly rendering when resetting value of v-radio component

I am using v-radio components with a custom label like this:

121
How to change page color on scroll with fixed background

How to change page color on scroll with fixed background

I have a WordPress website runningI am trying to design something unique

136
How to move the window by x number of pixels using Javascript

How to move the window by x number of pixels using Javascript

How do I scroll a window or webpage down using Javascript? Basically, I want to move the web page down by certain number of pixels, using Javascript is there any way of doing that?

134