опция в раскрывающемся списке, которая меняет поле ввода

Привет,

Я работаю над разработкой сайта онлайн-пожертвований для моей страницы. Я хотел бы, чтобы у пользователя был раскрывающийся список с вариантами оплаты (5 долларов, 10 долларов, 20 долларов, другое). В настоящее время я настроил его так, чтобы он отображал поле ввода, если выбран вариант «другое»; если выбран другой вариант ($5, $10, $20), то поле ввода скрыто. Кроме того, пожертвования принимаются через PayPal, и я включил кнопку/php пожертвования Pay-Pal на сайт. Я столкнулся со следующей проблемой: поскольку поле ввода — это поле, которое заполняет сумму пожертвования, Pay-Pal не распознает выпадающие суммы. Например, если я выберу вариант «Другое», введите 100 долларов в поле ввода, затем выберите вариант «10 долларов» в раскрывающемся списке (допустим, я передумал и хотел пожертвовать 10 долларов вместо 100 долларов) и нажмите кнопку пожертвовать, Pay-Pal обрабатывает платеж на 100 долларов, а не на 10 долларов (потому что он вытягивает из поля ввода).

Я считаю, что у меня есть исправление, но я не обязательно уверен, как его закодировать. Я ищу помощь в следующем: когда пользователь выбирает параметр из раскрывающегося списка, я хотел бы, чтобы это действие заполнило (скрытое) поле ввода соответствующим значением. Точно так же, если пользователь выбирает вариант «другой» из раскрывающегося списка, я бы хотел, чтобы поле ввода (теперь видимое) было заполнено «», поскольку пользователь сам заполнит этот параметр.

Опять же, я не уверен, как кодировать что-то подобное, и я надеюсь, что кто-то может указать мне правильное направление. Я действительно искренне ценю любую помощь, и я очень ценю ваше время. Спасибо!

редактировать: Спасибо за вашу помощь. Вот код, который у меня есть на данный момент:

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

код jquery:

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

});

drop-down-menu jquery onchange inputbox
person Ivan    schedule 12.04.2011    source источник
comment
Иван, добро пожаловать в stackoverflow! если мы собираемся помочь вам, нам нужно будет увидеть часть вашего кода, чтобы мы могли увидеть, что вы делаете неправильно, и показать вам, как это исправить.   -  person mcgrailm    schedule 12.04.2011

Ответы (3)


arrow_upward
5
arrow_downward

вот демонстрация

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

и jquery, чтобы пойти с

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

    if(selected_item == "other"){
        $('#other').val("").removeClass('hidden');
    }else{
        $('#other').val(selected_item).addClass('hidden');
    }
});
person mcgrailm    schedule 12.04.2011
comment
Это почти то, что мне нужно; однако, когда пользователь выбирает другое, я бы хотел, чтобы поле ввода было четким, поскольку сейчас оно вводит текст (т.е. другое) вместо . Надеюсь, это имеет смысл, есть идеи о том, как реализовать это изменение? Это почти то, что мне нужно. Спасибо - person Ivan; 12.04.2011

arrow_upward
0
arrow_downward

Когда пользователь нажимает на поле выбора, очищает текстовое поле.

Попробуй это:

<select id="moneySelect" onchange="$('#moneyText').val(''); $('#sendValue').val(this.value);">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
</select>
<input type='text' id="moneyText" onkeypress="$('#sendValue').val(this.value)">
<input type="hidden" name="sendValue" id="sendValue" />
person Craig White    schedule 12.04.2011

arrow_upward

arrow_downward

person    schedule
comment
Добавление объяснения может дать лучшее понимание того, почему это хорошее решение. - person jerkan; 22.10.2020