Dropdown appends form submit twice

Question

EDIT: solved with a count variable and if/else. Not the most elegant but it works. Would be interesting to know why it happens / how it should be solved though so i'll keep this here.

I have a searchbar with a submit and a dropdown option i am appending to that submit. The submit gets appended twice. I tried using "one" instead of "on" which only returned the first submit. the problem is i need it to only return the second submit or best case prevent the first submit from happening. Currently my url looks like this: "/...?search=test&Item=1&Item=3" and i only want the "&item=3" as the first variable doesn't get updated.

   var variableToSend = '';

    $('#selector').on('click',function() {
      variableToSend = $(this).val();
      $('form').append('<input type="hidden" id="yourData" name="Item" value="'+ variableToSend +'"/>');
    });

Please provide a working error case in JSFiddle so that others can look into it and help you out quickly. — Sunil Chaudhary, Dec 01 '19 at 12:58

score 0 · Answer 1 · answered Dec 01 '19 at 13:00

0

you can either remove the button type submit or you can return false for the particular button function or e.prevent.default.

check this link for more details How to prevent buttons from submitting forms

answered Dec 01 '19 at 13:00

Sathiyavalli

11
1
2

score 0 · Answer 2 · answered Dec 01 '19 at 13:41

You can remove the appended hidden input and again append the input value in the form. Like this :

var variableToSend = '';
$('#selector').on('click',function() {
    variableToSend = $(this).val();
    $('form').find("#yourData").remove();
    $('form').append('<input type="hidden" id="yourData" name="Item" value="'+ variableToSend +'"/>');
});

Dropdown appends form submit twice

2 Answers2