2

特定の検証を計算して実行するためのajax関数があります。

コードを以下に示します。

function collectFormData(fields) {
    var data = {};
    for (var i = 0; i < 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");
        }
    });
}

HTML：

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

しかし、私のフォームと呼ばれる上記の関数が送信されるとすぐに。これを引き起こす可能性があるのは何ですか？

4

2 に答える 2

1

これは、ボタン付きのフォームがあり、そのデフォルトの動作はフォームを送信するためです。フォームを送信したくない場合は、クリック時のボタンのデフォルトのアクションを防ぐ必要があります。

jQueryを使用しているので、属性を使用する代わりにjQueryを使用してクリックイベントを登録することをお勧めします。calculateメソッドは、デフォルトのクリックイベントが発生しないように値onclickを返す必要があります。false

への変更

<button id="calculateBtn" class="btn btn-primary">
  <spring:message code="button.calculate" />
</button>

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");
        }
    });
    return false;
}
$(function(){
    $('#calculateBtn').click(calculate)
})
于 2013-03-19T03:07:47.283 に答える
1

ボタンの「type」属性を「button」に設定してみてください

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

type属性のデフォルト値は「submit」です： https ：//developer.mozilla.org/en-US/docs/HTML/Element/button

于 2013-03-19T03:10:18.437 に答える