JavaScript change function on a select tag

Question

I want to change what is written in the input tag depending on what was chosen in the select tag.

this is my select tag

<div class="form-group col-lg-4">
    <label for="donationType">Donation Type: &nbsp;</label> 
        <select id="donationType" style="text-transform: capitalize"
                name="volunteerProject.donationTypeId" class="form-control">
            <option value='0'>Select Donation Type</option>
                <s:iterator value="donationTypeList">
                    <option value='<s:property value="donationTypeId" />'
                        name='<s:property value="donationType" />'>
                <s:property value="donationType" />
            </option>
            </s:iterator>
        </select>
</div>

and this is my input tag

<div class="form-group col-lg-3" id="vpDonateButtonLabelDiv">
    <label for="vpTitle">Button Label</label> <input
            type="text" class="form-control" id="vpDonateButtonLabel"
            name="volunteerProject.donateButtonLabel"
            placeholder="Enter button label" maxlength="50" required />
</div>

and here's my javascript code

$('#donationType').change( function() {

var donationType = $(this).val();

    if (donationType != 0) {
        if (donationType == 1){
            $("#vpDonateButtonLabelDiv").append('Donate');
        } else if (donationType == 2) {
            $("#vpDonateButtonLabelDiv").append('Volunteer');
        } else if (donationType == 3) {
            $("#vpDonateButtonLabelDiv").append('Share');
        } else if (donationType == 5) {
            $("#vpDonateButtonLabelDiv").append('Tweet');
        }
    } else {
        $("#vpDonateButtonLabelDiv").append('');
    }
});

However, it is not working. What did I miss here? or is my method wrong? Thanks a lot

score 1 · Answer 1 · answered Jul 08 '16 at 07:59

1

I see that you use jQuery already. You can replace $("#vpDonateButtonLabelDiv").append with $("#vpDonateButtonLabel").val in order to select the input and edit the value. See this fiddle https://fiddle.jshell.net/8odoros/mzL24b5x/

answered Jul 08 '16 at 07:59

Theodore K.

5,058
4
30
46

score 1 · Accepted Answer · answered Jul 08 '16 at 08:01

1

You have to change the id that are you using and you have to change the append to val to change the value of the text..

$('#donationType').change( function() {

var donationType = $(this).val();

    if (donationType != 0) {
        if (donationType == 1){
            $("#vpDonateButtonLabel").val('Donate');
        } else if (donationType == 2) {
            $("#vpDonateButtonLabel").val('Volunteer');
        } else if (donationType == 3) {
            $("#vpDonateButtonLabel").val('Share');
        } else if (donationType == 5) {
            $("#vpDonateButtonLabel").val('Tweet');
        }
    } else {
        $("#vpDonateButtonLabel").val('');
    }
});

for live demo click here

answered Jul 08 '16 at 08:01

Kalpesh Rajai

2,040
27
39

this is exactly what I need but it doesn't work even though I've followed what you have mentioned. I'll double check my back end process, thanks! – chiliflavor Jul 08 '16 at 08:19
I also provided the demo link in my answer check it. If you have any doubts than comment here. – Kalpesh Rajai Jul 08 '16 at 08:22
finally! everything is working now, the problem is that my browser didn't recognize the recent changes I've made. It was solved after i empty cache and hard reload the browser. thanks so much @kalpesh! – chiliflavor Jul 08 '16 at 09:40

score 0 · Answer 3 · edited May 23 '17 at 12:08

0

Try changing '.append' to '.value'? Reference: Set the value of an input field

It's in javascript, but you get the idea.

Edit: Wrong selector, too. You should be changing the textbox, but your selector is your div.

try changing $("#vpDonateButtonLabelDiv").append('Donate'); to $("#vpDonateButtonLabel").val('Donate').

edited May 23 '17 at 12:08

Community

1
1

answered Jul 08 '16 at 07:50

Hardyson Arthy

136
7

you're right, I should change the input area. It still doesn't work though. I've also checked that link a while ago, thanks – chiliflavor Jul 08 '16 at 08:01
Does it put out any errors? Try: `$(input[name="volunteerProject.donateButtonLabel"])` as your textbox selector – Hardyson Arthy Jul 08 '16 at 09:00

score 0 · Answer 4 · answered Jul 08 '16 at 08:01

0

To change the input's text, you could do something like:

$('#donationType').change( function() {
        var labels = ['', 'Donate', 'Volunteer', 'Share', 'Tweet' ]; //these could perhaps also be obtained from meta data?
        $('#vpDonateButtonLabel').val(labels[$(this).val()]);
});

But I've got an inkling you want to change the label text? If so, this can be done by finding the generated label element within the div: $('#vpDonateButtonLabelDiv').children('label') and setting its text.

$('#donationType').change( function() {
        var labels = ['', 'Donate', 'Volunteer', 'Share', 'Tweet' ]; //these could perhaps also be obtained from meta data?
        $('#vpDonateButtonLabelDiv').children('label').text(labels[$(this).val()]);
});

answered Jul 08 '16 at 08:01

Me.Name

12,259
3
31
48

Hmm. I want to change the what is written in the `input` tag. is that even possible? – chiliflavor Jul 08 '16 at 08:08
Do you mean the text inside the textbox? – Me.Name Jul 08 '16 at 08:13
yes! it changes everytime whenever I choose another option from the `select` tag – chiliflavor Jul 08 '16 at 08:17
1

In that case you can use the first option above. Another option is a `placeholder` (watermark), as in `$('#vpDonateButtonLabel').attr("placeholder", labels[$(this).val()]);` Example: https://jsfiddle.net/03pgfn5t/ – Me.Name Jul 08 '16 at 08:19

JavaScript change function on a select tag

4 Answers4