How to add values from previous input to textarea-CodePudding

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>

CodePudding user response：

<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>

CodePudding user response：

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>