Pass button value to textarea value with Javascript

Question

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 gave that a try and sadly no value passed when I attempted. I tried replacing "textarea.value(booking); with your suggestion. — Matt
– Matt, Commented Feb 12, 2016 at 9:40

Dhara · Accepted Answer · 2016-02-12 09:50:31Z

4

You can do with some change

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

<script src="https://ajax.googleapis.com/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.

edited Feb 12, 2016 at 9:50

answered Feb 12, 2016 at 9:43

Dhara

1,9722 gold badges19 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Over a year ago

This is exactly what I was hoping for however it uses the text area id="ta" is there a way to make it run using <textarea name="your-message"></textarea> ? Would it be .getElementByName("your-message"); ?

Dhara Over a year ago

Glad I could help you :) happie coding

Pallavi · Accepted Answer · 2016-02-12 09:54:52Z

2

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

answered Feb 12, 2016 at 9:54

Pallavi

6741 gold badge10 silver badges26 bronze badges

Comments

shu · Accepted Answer · 2016-02-12 09:59:40Z

1

try this

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

edited Feb 12, 2016 at 9:59

answered Feb 12, 2016 at 9:33

shu

1,95612 silver badges19 bronze badges

1 Comment

Matt Over a year ago

Thanks for your suggestion shu, I gave this a try and it didn't seem to work. Do you think it's due to my function or onclick setup?

Adil · Accepted Answer · 2016-02-12 10:04:11Z

1

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;

edited Feb 12, 2016 at 10:04

answered Feb 12, 2016 at 9:33

Adil

148k25 gold badges217 silver badges207 bronze badges

2 Comments

Matt Over a year ago

Would I use the same function as when I tried placing this code in replacement within the function I've setup it didn't work sadly. Very cool to see I can assign the value in one line though. Not sure why the function is causing issues.

Matt Over a year ago

Thanks for your effort Adil, I've marked the question solved with Debins solution. I appreciate your effort though.

Collectives™ on Stack Overflow

Pass button value to textarea value with Javascript

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related