jQuery ajax post strange behaviour
<p>I have an ajax function to calculate and perform a certain validation.</p>

<p>Code is shown below:</p>

<pre><code>function collectFormData(fields) {
    var data = {};
    for (var i = 0; i &lt; fields.length; i++) {
        var $item = $(fields[i]);
        data[$item.attr('name')] = $item.val();
    }
    return data;
}

function calculate(){
    var $form = $('#purchase-form');
    var $inputs = $form.find('[name]');
    var data = collectFormData($inputs);
    $.ajax({
        url: '${validateUrl}',
        type: 'POST',
        data: data,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            alert(response.status);
        },
        error: function () {
            alert("error");
        }
    });
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;button id="calculateBtn" class="btn btn-primary" onclick="calculate();"&gt;
  &lt;spring:message code="button.calculate" /&gt;
&lt;/button&gt;
</code></pre>

<p>However, as soon as the above function called my form is being submitted. What might cause this ?</p>
