Bootstrap Multi-Select Form submit twice

Question

I'm having an issue using bootstrap-multiselect and ajax.

My Form :

<form class="fill" method="POST" id="inputForm">  
  <select id="SelectIDExample">
    <option value="1">Option 1</option>
    <option value="2" selected="selected">Option 2</option>
    <option value="3" >Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
  </select>
</form>

My libraries:

• css/bootstrap.min.css
• js/jquery.min.js
• js/bootstrap.min.js
• js/bootstrap-multiselect.js
• bootstrap-multiselect.css

Here's a small snippet of my JavaScript:

$(document).ready(function() {
  $('#SelectIDExample').multiselect({
    buttonWidth: '400px',
    dropRight: true,
    onChange: function(option, checked, select, event) {
      event.preventDefault();
      return false;
    },

  });

  $('#inputForm').change(function(e) {
    e.preventDefault();
    var form = $(this);
    var post_data = form.serialize();

    $.ajax({
      type: 'POST',
      data: post_data,
      success: function() {
        alert("I am Called...");
      }
    });
  });
});

Problem

Whenever I change the Option's, I am alerted twice "I am Called...", meaning the form is submitted twice.

Expectation

I want this to be submitted once or called once.

Note: I know that with Simple Select option, the alert is called once, but when I use Bootstrap multi-select, the alert is called twice.

How can I fix this?

I need have control on submit of the form and do not required it from Bootstrap multiselect or any other hidden methods from the plugin that use.

Answer 1

First of all sorry for bad answer, made a mistake when looking at the problem.

So here is the solution. You need to make the call for multiselect like this. Function onChange works only with 2 parameters that is why you could not prevent it from propagating, you can check that if you output the values on console.

Solution

    $('#SelectIDExample').multiselect({
        buttonWidth: '400px',
        dropRight: true,
      }).change(function(e) {
        e.preventDefault();
    });

Answer 2

Thanks for all you reply. Seems this was able to solve my issue :-)

 $('#SelectIDExample').multiselect({
        buttonWidth: '400px',
        dropRight: true,
        preventInputChangeEvent: true
      });

Available in Jfiddle also. jsfiddle.net/dchockal/fkypqwf0