I'm attempting to send the value attached to my buttons to a textarea named "your-message" and require it to be by name using Javascript. However for some reason the value doesn't seem to pass properly to the text area.

Does anyone know where I may have gone wrong in my JavaScript?

<script type = "text/javascript">
    function request_booking(objButton) {
        var booking = objButton.value;
        alert(booking);

        var textarea = document.getElementByName('your-message');
        textarea.value(booking);
    }
</script>

<button id="3" value="Start Date: 2016-02-12 \n Finish Date:  2017 -02-12 \n Additional Requests: \n" class="request-booking" onclick="request_booking(this)">Request</button>
<button onclick="request_booking(this)" class="request" id="2" value="2 Submitted" type="submit">Request</button>
<button onclick="request_booking(this)" class="request" id="3" value="3 Submitted" type="submit">Request</button>

<textarea aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" rows="10" cols="40" name="your-message"></textarea>

I'm attempting to send the value attached to my buttons to a textarea named "your-message" and require it to be by name using Javascript. However for some reason the value doesn't seem to pass properly to the text area.

Does anyone know where I may have gone wrong in my JavaScript?

<script type = "text/javascript">
    function request_booking(objButton) {
        var booking = objButton.value;
        alert(booking);

        var textarea = document.getElementByName('your-message');
        textarea.value(booking);
    }
</script>

<button id="3" value="Start Date: 2016-02-12 \n Finish Date:  2017 -02-12 \n Additional Requests: \n" class="request-booking" onclick="request_booking(this)">Request</button>
<button onclick="request_booking(this)" class="request" id="2" value="2 Submitted" type="submit">Request</button>
<button onclick="request_booking(this)" class="request" id="3" value="3 Submitted" type="submit">Request</button>

<textarea aria-invalid="false" aria-required="true" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" rows="10" cols="40" name="your-message"></textarea>

• javascript
• jquery
• html
• button
• textarea

• $(textarea).val(booking); ? – John R Commented Feb 12, 2016 at 9:36
• I gave that a try and sadly no value passed when I attempted. I tried replacing "textarea.value(booking); with your suggestion. – Matt Commented Feb 12, 2016 at 9:40

4 Answers 4

You can do with some change

$('button').on('click',function(){
document.getElementsByName('your-message')[0].value = this.value;
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="3" value="Start Date: 2016-02-12 \n Finish Date:  2017 -02-12 \n Additional Requests: \n" class="request-booking" >Request</button>


<button  class="request" id="2" value="2 Submitted" type="submit">Request</button>


<button  class="request" id="3" value="3 Submitted" type="submit">Request</button>

<textarea name="your-message"></textarea>

There is a problem in function calling.Showing error that it doesnot found.

If you want to use Element By Name Using Javascript

Then update your code

 var textarea = document.getElementByName('your-message');
textarea.value(booking);  

with

var textarea = document.getElementsByName("your-message")[0];
textarea.value = booking;       

live demo

try this

var textarea = document.getElementByName('your-message');
textarea.value = booking;

Assign value to textarea instead of passing, Also note you mis-spelled the function getElementsByName, s is missing in your call as you have getElementByName

Change

textarea.value(booking);  

To

 textarea.value = booking;    

You can even directly assign value.

Live Demo

document.getElementsByName('your-message')[0].value = booking;