jquery - option in dropdown box that changes an input box

Question

Hellp,

I am working on developing an online donation site for my page. I'd like the user to have a dropdown box with payment options ($5, $10, $20, Other). I've currently set it up to where it displays an input box if the "other" option is selected; if another option is selected ($5, $10, $20) then the input box is hidden. Furthermore, donations are taken via pay-pal and I've incorporated the Pay-Pal donate button/php into the site. I've run across the following issue: because the input box is the field that populates the amount that is being donated Pay-Pal does not recognize the dropdown amounts. For example, if I choose the "Other" option, enter $100 into the input box, then select the "$10" option from the dropdown box (let's assume I changed my mind and wanted to donate $10 instead of $100), and click the donate button, Pay-Pal processes the payment for $100 not $10 (because it's pulling from the input box).

I believe I have a fix, but I'm not necessarily sure how to code it. I am looking for help with the following: When a user selects an option from the dropdown box I would like this action to populate the (hidden) input box with the respective value. Similarly, if the user selects the "other" option from the dropdown, I'd like the input box (now visible) to be populated with "" as the user would populate this option him/her-self.

Again, I'm not certain how to code something like this, and I'm hopeful someone could point me in the right direction. I really sincerely appreciate any help, and I'm very gareful for your time. Thank you!

edit: Thank you for your help. Here is the code that I have as of right now:

    <select name="amount" id="otherFieldOption" class="dropdown">
                    <option value="20">$20</option>
            <option value="10">$10</option>
            <option value="5" selected="selected">$5</option>
            <option value="otherField">Other</option>   
    </select>

    <div id="otherField">
        Amount:
        <input type="text" id="amount" name="amount" class="textfield" size="10"/>
    </div>

the jquery code:

$(document).ready(function() {
  $.viewInput = {
    '0' : $([]),
    //THIS IS THE NAME OF THE DIV WRAPPING THE HIDDEN FIELD
    'otherField' : $('#otherField'),
  };

$('#otherFieldOption').change(function() {
    // HIDES THE INPUT FIELD IF ANOTHER DROPDOWN ITEM IS SELECTED ONCE THE HIDDEN FIELD IS LOADED
    $.each($.viewInput, function() { this.hide(); });
    // SHOWS THE INPUT FIELD ITEM IF SELECTED
    $.viewInput[$(this).val()].show();
  });

});

Answer 1

here is a demo

<select id="choice">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
        <option value="other">other</option>
</select>
<input type='text' id="other" class="hidden" />

and jquery to go with

$('#choice').change(function(){
    var selected_item = $(this).val()

    if(selected_item == "other"){
        $('#other').val("").removeClass('hidden');
    }else{
        $('#other').val(selected_item).addClass('hidden');
    }
});