Отправить форму на изменение выпадающего списка в Semantic UI?

Question

Я хотел бы отправить форму при выборе элемента - пропуская нажатие кнопки отправки.

Я пытался использовать onchange="this.form.submit()", ноэто не работает здесь.

Это код:

<form action="" method="get">

    <div class="ui floating dropdown labeled search icon button dd">
        <input type="hidden" name="nutr_code">
        <span class="text">Select nutrient</span>
        <div class="menu">
            <div class="item" data-value="ca">Calcium</div>
            <div class="item" data-value="fe">Iron</div>
            <div class="item" data-value="mg">Magnesium</div>
            <div class="item" data-value="zn">Zinc</div>
        </div>
    </div>
    <br><br>
    <input type="submit" value="Show results">

</form>

Answer 1

Вы можете использовать Jquery

 $(document).ready(function(){
      $("input[name='nutr_code']").on('input',function(e){
        $("input[type='submit']").trigger( "click" );
    });
  });

Answer 2

Поскольку вы используете метод GET, вы можете перенаправить его с помощью javascript, самостоятельно создав URL-адрес.

$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
    location.href = 'http://example.com/?nutr_code=' + value;
}});

---

Второй вариант - изменение поля ввода 'nutr_code' на значение из обратного вызова, как показано выше

$('input[name="nutr_code"]').val(value);

и отправьте <FORM/> от js.

$('form').submit();

EDIT: Пример второго варианта.

$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
    // Uncomment if semantic is not updating the input before submit.
    //$('input[name="nutr_code"]').val(value);
    $('form').submit();
}});

Answer 3

Вам нужно определить действие в теге формы или добавить какой-либо метод для отправки кнопки

 <input type="submit" value="Show results" onclick="someFunction()">

Вам также нужно определить someFunction (), если вы следуете этим путем.Спасибо