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

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

Answer 2

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

Answer 3

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') .

Answer 4

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()]);
});