如何防止在jQuery中提交表單

Question

我創建了一個生成自定義輸入的簡碼：

function input_plus_moins() {
    $output = "
            <div data-role='controlgroup' data-type='horizontal' data-mini='true'>
             <button id='plus' data-inline='true'>+</button>
                <input type='text' name='number' id='number' value='0' />
             <button id='minus' data-inline='true'>-</button>
            </div>
        ";
    return $output;
}

然后，我可以通過使用jQuery單擊加號或減號按鈕來增加或減少輸入值

$('#plus').unbind('click').bind('click', function () {
    var value = $('#number').val();
    value++;
    $('#number').val(value);
});

$('#minus').unbind('click').bind('click', function () {
    var value = $('#number').val();
    value--;
    $('#number').val(value);
});

每次我單擊任何按鈕時，它都會提交表單。

如何修改JavaScript文件，以便僅在單擊“提交”按鈕時才提交表單？

Answer 1

使用preventDefault();

 $('#plus').click(function (evt) {
        evt.preventDefault();
          var value = $('#number').val();
          value++;
          $('#number').val(value);
           });

      $('#minus').click( function (evt) {
          evt.preventDefault();
             var value = $('#number').val();
             value--;
            $('#number').val(value);
        });

'return false;'之間的區別 和'e.preventDefault（）;

Answer 2

button元素的默認類型為“提交”。 將按鈕類型更改為“按鈕”，如下所示：

function input_plus_moins() {
    $output = "<div data-role='controlgroup' data-type='horizontal' data-mini='true'>" +
        "<button id='plus' type='button' data-inline='true'>+</button>" +
        "<input type='text' name='number' id='number' value='0' />" +
        "<button id='minus' type='button' data-inline='true'>-</button>" +
        "</div>";
    return $output;
}

您還可以通過使用.on()來避免綁定/取消綁定，如下所示：

$(document).on('click', '#plus', function () {
    var value = $('#number').val();
    value++;
    $('#number').val(value);
});

$(document).on('click', '#minus', function () {
    var value = $('#number').val();
    value--;
    $('#number').val(value);
});

或交替將它們兩者合並為：

$(document).on('click', '#plus,#minus', function (event) {
    var value = $('#number').val();
    if (event.target.id == "plus") value++
    else value--;
    $('#number').val(value);
});

在這兩種情況下最好用容器的選擇器替換$(document)並將其附加到以下容器： $('#mycontainerid').on( ...

Answer 3

Vadim是正確的，但是正確的方法是使用e.preventDefault() ，如下所示：

$('button').on("click", function(e) {
    e.preventDefault();
    // Your code
});

另外，請確保您的代碼中沒有任何錯誤。

請享用！