Несколько кнопок отправки на основе раскрывающегося списка

Вопрос новичка ... интересно, может ли javascript быть решением?

Возможно ли иметь выпадающее меню с рядом опций. Затем, в зависимости от того, какой параметр выбран, определяют действие двух кнопок отправки?

В этом случае, когда каждая кнопка «Отправить» будет ссылаться в зависимости от параметра, выбранного в раскрывающемся списке... ссылки на каждой кнопке разные?


person Joe Walsh    schedule 09.07.2013    source источник


Ответы (2)


Почему бы просто не привязать функцию javascript к методу onClick ваших кнопок. Затем внутри этой функции вы можете запросить текущий выбор вашего раскрывающегося списка и выполнить соответствующее действие?

person Bill Gregg    schedule 09.07.2013
comment
Большое спасибо вам обоим за быстрый ответ ... есть ли какие-нибудь ссылки на tut / примеры, которые вы могли бы мне показать? Не полный новичок, но может быть в состоянии разобраться с каким-то направлением. Большое спасибо еще раз! - person Joe Walsh; 09.07.2013

Да, вы можете легко с Jquery. Вы просто назначите событие щелчка кнопке отправки после того, как будет сделан выбор в раскрывающемся списке.

Посмотрите на http://api.jquery.com/change/ добавьте обработчик события изменения в перетаскивание вниз. В обработчике события изменения настройте соответствующий обработчик кликов для кнопок отправки.

Вот пример. http://jsfiddle.net/24Vbr/6/

HTML

    <form>
      <input class="target" type="text" value="Field 1" />
        <select class="target">
          <option value="option1" selected="selected">Option 1</option>
          <option value="option2">Option 2</option>
        </select>  
      <button id='button1' type="button">Button with changing click handler based on dropdown </button>
    </form>
    <div id="other">
  Trigger the handler

js

var onSubmit1 = function()
{
    alert('submit1');
};

var onSubmit2 = function()
{
    alert('submit2');
};



$('.target').change(function(e) {    
    var dropdown = $('.target');
    var text = $( ".target option:selected" ).text();    

    var $button1= $('#button1');
    $button1.unbind('click');

    if(text == "Option 1"){
         $button1.click(onSubmit1);
        return;
    }

   $button1.click(onSubmit2);      
});
person jeffo    schedule 09.07.2013
comment
Большое спасибо вам обоим за быстрый ответ ... есть ли какие-нибудь ссылки на tut / примеры, которые вы могли бы мне показать? Не полный новичок, но может быть в состоянии разобраться с каким-то направлением. Большое спасибо еще раз! - person Joe Walsh; 09.07.2013
comment
Привет Джеффо, Большое спасибо за помощь здесь. Я вижу, как это будет работать в принципе, однако я не могу заставить пример работать локально. Кроме того, мне нужно иметь возможность сделать это для двух, возможно, трех кнопок «Отправить» на одной странице, каждая из которых ссылается на другой .pdf. Сначала я попытаюсь заставить этот пример работать, но спасибо, что указали мне правильное направление. - person Joe Walsh; 10.07.2013
comment
Что ж, мне действительно нужно сосредоточиться на одной вещи за раз ... мне удалось достаточно легко заставить все работать локально, но сначала интересно, как заставить «Вариант 1» работать при загрузке. Это будет работать только после того, как вы выбрали «Вариант 2», и, во-вторых, возможность добавить вторую кнопку отправки с собственными событиями кликов? - person Joe Walsh; 10.07.2013
comment
Попробуйте ссылку jsfiddle jsfiddle.net/24Vbr/6, она позволяет легко обыгрывать идеи. Затем вы можете заставить его работать в своем собственном проекте. Причина, по которой вариант 1 не работает в первый раз, - это пример, который я привел, только назначает событие щелчка при изменении параметра. Чтобы исправить это, просто назначьте событие клика при построении или загрузке страницы. Изменение раскрывающегося списка по-прежнему должно будет изменить обработчик кликов на основе выбора раскрывающегося списка (по крайней мере, как я понимаю проблему) - person jeffo; 11.07.2013
comment
Я надеюсь, что ответ заставил вас начать в правильном направлении. Если да, то принять ответ? - person jeffo; 11.07.2013
comment
Конечно же, Джеффо все еще пытался заставить вариант 1 работать при загрузке страницы? Но очень ценю, что вы указали мне в правильном направлении. Благодарю вас! - person Joe Walsh; 12.07.2013