在语义 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

您需要在表单标签中定义动作或添加一些方法来提交按钮

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

如果按照这种方式，您还需要定义 someFunction() 。谢谢

Answer 2

你可以使用Jquery

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

Answer 3

因为您使用的是 GET 方法，所以您可以通过自己构建 url 来使用 javascript 重定向。

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

第二个选项是使用回调中的值更改输入字段 'nutr_code'，如上所示

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

并从 js 提交 <FORM/>。

$('form').submit();

编辑：第二个选项的示例。

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

在语义 UI 中提交更改下拉列表的表单？

Submit form on change of dropdown list in Semantic UI?

javascript

submit

form-submit

drop-down-menu

semantic-ui