Submit form on change of dropdown list in Semantic UI?

I would like to submit form when an element is selected - skipping pressing the submit button.

enter image description here

I tried using onchange="this.form.submit()", but it's not working here.

This is the code:

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

asked Nov 14 '18 at 9:33

Bogdan

458

add a comment |

I would like to submit form when an element is selected - skipping pressing the submit button.

enter image description here

I tried using onchange="this.form.submit()", but it's not working here.

This is the code:

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

asked Nov 14 '18 at 9:33

Bogdan

458

add a comment |

I would like to submit form when an element is selected - skipping pressing the submit button.

enter image description here

I tried using onchange="this.form.submit()", but it's not working here.

This is the code:

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

asked Nov 14 '18 at 9:33

Bogdan

458

I would like to submit form when an element is selected - skipping pressing the submit button.

enter image description here

I tried using onchange="this.form.submit()", but it's not working here.

This is the code:

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

javascript drop-down-menu submit form-submit semantic-ui

asked Nov 14 '18 at 9:33

Bogdan

458

asked Nov 14 '18 at 9:33

Bogdan

458

asked Nov 14 '18 at 9:33

Bogdan

458

asked Nov 14 '18 at 9:33

Bogdan

458

asked Nov 14 '18 at 9:33

Bogdan

458

add a comment |

3 Answers
3

active

oldest

votes

Because you are using GET method you can redirect with javascript by constructing the url yourself.

$('.ui.dropdown').dropdown({

'onChange': function (value, text, $choice) {

    location.href = 'http://example.com/?nutr_code=' + value;

}});

Second option is changing the input field 'nutr_code' with the value from the callback as shown above

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

and submit the <FORM/> from js.

$('form').submit();

EDIT:
Example of second option.

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

}});

edited Nov 14 '18 at 17:00

answered Nov 14 '18 at 16:53

Francisc

343615

You're awesome, thank you! The second option is the one I used. Great stuff!

– Bogdan
Nov 14 '18 at 17:18

add a comment |

You need to define action in form tag or add some method to submit button

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

You need to define someFunction() too if you follow this way. Thanks

answered Nov 14 '18 at 9:38

Asim Khan

38719

add a comment |

You Can Use Jquery

 $(document).ready(function(){

      $("input[name='nutr_code']").on('input',function(e){

        $("input[type='submit']").trigger( "click" );

    });

  });

edited Nov 14 '18 at 9:47

answered Nov 14 '18 at 9:41

RBT

36513

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53296943%2fsubmit-form-on-change-of-dropdown-list-in-semantic-ui%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Because you are using GET method you can redirect with javascript by constructing the url yourself.

$('.ui.dropdown').dropdown({

'onChange': function (value, text, $choice) {

    location.href = 'http://example.com/?nutr_code=' + value;

}});

Second option is changing the input field 'nutr_code' with the value from the callback as shown above

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

and submit the <FORM/> from js.

$('form').submit();

EDIT:
Example of second option.

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

}});

edited Nov 14 '18 at 17:00

answered Nov 14 '18 at 16:53

Francisc

343615

You're awesome, thank you! The second option is the one I used. Great stuff!

– Bogdan
Nov 14 '18 at 17:18

add a comment |

Because you are using GET method you can redirect with javascript by constructing the url yourself.

$('.ui.dropdown').dropdown({

'onChange': function (value, text, $choice) {

    location.href = 'http://example.com/?nutr_code=' + value;

}});

Second option is changing the input field 'nutr_code' with the value from the callback as shown above

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

and submit the <FORM/> from js.

$('form').submit();

EDIT:
Example of second option.

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

}});

edited Nov 14 '18 at 17:00

answered Nov 14 '18 at 16:53

Francisc

343615

You're awesome, thank you! The second option is the one I used. Great stuff!

– Bogdan
Nov 14 '18 at 17:18

add a comment |

Because you are using GET method you can redirect with javascript by constructing the url yourself.

$('.ui.dropdown').dropdown({

'onChange': function (value, text, $choice) {

    location.href = 'http://example.com/?nutr_code=' + value;

}});

Second option is changing the input field 'nutr_code' with the value from the callback as shown above

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

and submit the <FORM/> from js.

$('form').submit();

EDIT:
Example of second option.

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

}});

edited Nov 14 '18 at 17:00

answered Nov 14 '18 at 16:53

Francisc

343615

Because you are using GET method you can redirect with javascript by constructing the url yourself.

$('.ui.dropdown').dropdown({

'onChange': function (value, text, $choice) {

    location.href = 'http://example.com/?nutr_code=' + value;

}});

Second option is changing the input field 'nutr_code' with the value from the callback as shown above

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

and submit the <FORM/> from js.

$('form').submit();

EDIT:
Example of second option.

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

}});

edited Nov 14 '18 at 17:00

answered Nov 14 '18 at 16:53

Francisc

343615

edited Nov 14 '18 at 17:00

answered Nov 14 '18 at 16:53

Francisc

343615

answered Nov 14 '18 at 16:53

Francisc

343615

answered Nov 14 '18 at 16:53

Francisc

343615

You're awesome, thank you! The second option is the one I used. Great stuff!

– Bogdan
Nov 14 '18 at 17:18

add a comment |

You're awesome, thank you! The second option is the one I used. Great stuff!

– Bogdan
Nov 14 '18 at 17:18

You're awesome, thank you! The second option is the one I used. Great stuff!

– Bogdan
Nov 14 '18 at 17:18

add a comment |

You need to define action in form tag or add some method to submit button

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

You need to define someFunction() too if you follow this way. Thanks

answered Nov 14 '18 at 9:38

Asim Khan

38719

add a comment |

You need to define action in form tag or add some method to submit button

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

You need to define someFunction() too if you follow this way. Thanks

answered Nov 14 '18 at 9:38

Asim Khan

38719

add a comment |

You need to define action in form tag or add some method to submit button

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

You need to define someFunction() too if you follow this way. Thanks

answered Nov 14 '18 at 9:38

Asim Khan

38719

You need to define action in form tag or add some method to submit button

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

You need to define someFunction() too if you follow this way. Thanks

answered Nov 14 '18 at 9:38

Asim Khan

38719

answered Nov 14 '18 at 9:38

Asim Khan

38719

answered Nov 14 '18 at 9:38

Asim Khan

38719

answered Nov 14 '18 at 9:38

Asim Khan

38719

add a comment |

You Can Use Jquery

 $(document).ready(function(){

      $("input[name='nutr_code']").on('input',function(e){

        $("input[type='submit']").trigger( "click" );

    });

  });

edited Nov 14 '18 at 9:47

answered Nov 14 '18 at 9:41

RBT

36513

add a comment |

You Can Use Jquery

 $(document).ready(function(){

      $("input[name='nutr_code']").on('input',function(e){

        $("input[type='submit']").trigger( "click" );

    });

  });

edited Nov 14 '18 at 9:47

answered Nov 14 '18 at 9:41

RBT

36513

add a comment |

You Can Use Jquery

 $(document).ready(function(){

      $("input[name='nutr_code']").on('input',function(e){

        $("input[type='submit']").trigger( "click" );

    });

  });

edited Nov 14 '18 at 9:47

answered Nov 14 '18 at 9:41

RBT

36513

You Can Use Jquery

 $(document).ready(function(){

      $("input[name='nutr_code']").on('input',function(e){

        $("input[type='submit']").trigger( "click" );

    });

  });

edited Nov 14 '18 at 9:47

answered Nov 14 '18 at 9:41

RBT

36513

edited Nov 14 '18 at 9:47

answered Nov 14 '18 at 9:41

RBT

36513

answered Nov 14 '18 at 9:41

RBT

36513

answered Nov 14 '18 at 9:41

RBT

36513

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky