Select option change the text of a Textarea with JavaScript

jquery change select option value
javascript select onchange get value
javascript input onchange get value
onchange javascript
html select onchange value
onchange javascript function call
html select events
select onchange jquery

I need help. I have this form:

<form name="user_cause" method="post">
<div class="form-group">
  <select id="subject" required="required" class="form-control" onchange="showHide()">
    <option value="subject">Subject</option>
    <option value="test_1">Test_1</option>
    <option value="test_2">Test_2</option>
  </select>
</div>

<div class="form-group">
  <textarea id="subject_message" required="required"
            class="form-control" rows="5" disabled>
  </textarea>
</div>

<button type="submit" class="btn btn-primary">Send</button>

I wish I could change the text in the disabled textarea according to the choice. how to do it with javascript?

var ourArea = document.getElementById('subject_message');
var selectSubject = document.getElementById('subject');
ourArea.textContent = selectSubject.value; // omit this if you don't want initial value to be reflected in the text area
function showHide(){
    ourArea.textContent = selectSubject.value;
}

jQuery change() Method, Example. Change the text of an option element in a drop-down list: document.​getElementById("apple").text = "newTextForApple";. Try it Yourself »  Given an HTML document containing a <textarea> element and the task is to change the content of a <textarea> element with the help of JavaScript. Method 1: This method uses id attribute of textarea with value property to change the content of <textarea> element. JavaScript code is written within the <script> tag.

Using jQuery, $("#subject").change(function(e) { $("#subject_message").val($(this).val())});

HTML DOM Option text Property, Execute a JavaScript when a user changes the selected option of a <select> The onchange event occurs when the value of an element has been changed. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

A jQuery way:

 $("#subject").change (function() {
      $("#subject_message").text($("#subject option:selected").text();
    });

onchange Event, The select() method selects the entire contents of a text area. Browser Support. Method. select(), Yes, Yes, Yes, Yes, Yes  The onchange JavaScript event is triggered when an element is changed and then loses focus. In the context of a textarea, this happens when the content of the textarea is modified and then the textarea loses focus because the user clicks away or presses the tab key.

HTML DOM Textarea select() Method, Example. Change the contents of a text area: document.getElementById("​myTextarea").value = "Fifth Avenue, New York City";. Try it Yourself »  Sets or returns whether the text area must be filled out before submitting a form: rows: Sets or returns the value of the rows attribute of a text area: type: Returns the type of the form element the text area is: value: Sets or returns the contents of a text area: wrap: Sets or returns the value of the wrap attribute of a text area

HTML DOM Textarea value Property, The change event is fired for input, select, and textarea elements when by selecting a value from a <select> 's dropdown with a mouse click, HTML. <input placeholder="Enter some text" name="name"/> <p id="log"></p>  when you do document.getElementById(idoftextarea); it return object of textarea Element, which id we passed on the getElementById textarea object have property selectionStart and selectionEnd selectionStart which say from where selection start , its integer value selectionEnd which say from where selection end, its integer value so substring function will give us string from given starting point to other text.substring(indexStart, indexEnd) give us text of starting point of selection to end

HTMLElement: change event, Description: Bind an event handler to the "change" JavaScript event, or trigger that This event is limited to <input> elements, <textarea> boxes and <select> elements. The event handler can be bound to the text input and the select box:​  The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed. Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed.

Comments
  • It works but the message I need to show is between <p></p> exemple: <p id="text_1" hidden>The message of the test1</p>
  • @Chidox <p> tag inside text area?
  • No! Only the text between the <p></p>
  • The question said "text in disabled textarea" .... so. You can add the <p> tag in the html, assign it an id and change "ourArea" variable to take that id instead of "subject_message" (which was for textarea).
  • I will explain more clairly. I want when we choose test_1 the text that will show in the disabled text area be taken from a hidden <p></p> and there is one hidden <p></p> for every choice.