时间戳

首页 > 解决方案 > 促销代码激活表问题

javascript - 促销代码激活表问题

问题描述

我正在网站上制作一个表格，用户可以在其中输入促销代码并接收网站余额的款项。但是当我尝试输入促销代码（甚至发送一个空的促销代码或输入一些数字）时，页面只是重新加载，并且网站的控制台是空的。尽管输入促销代码的页面不应重新加载。

我的 JS 代码：

$(document).on('click', '.activate-voucher-btn', function () {
var el = $(this).parents('.bonus-code').find('.activate-voucher-input');
var code = el.val().trim();
    $.ajax({
        url: '/promocode',
        type: 'POST',
        dataType: 'json',
        data: {code: code},
        success: function (data) {
            toastr.info(data.status, data.message);
            updateBalance();
        },
        error: function (err) {
            toastr.error(err.status, err.message);
            console.log(err.responseText);
        }
    });
});

我的刀片代码：

<div class="bonus-code"><div class="bonus-code-component"><form class="bonus-code-container f-2">
  <label class="bonus-code__warning mb-0">
    <span rv-translate="">Enter promo code</span>:
  </label>
  <input type="text" class="form-control text-uppercase activate-voucher-input" style="color: #000;">
  <button class="btn-link activate activate-voucher-btn" type="submit">Activate</button>
</form>
</div></div>

当我尝试输入促销代码时，页面会重新加载（尽管它不应该）并且没有任何反应。问题可能出在哪里？

标签： javascript

解决方案

表单中的<button>元素默认行为是提交表单。

有两种解决方案。首先是让您的点击事件处理程序返回 false：

$(document).on('click', '.activate-voucher-btn', function() {
    // ... stuff
    return false;
});

另一种是使用event对象的preventDefault()方法：

$(document).on('click', '.activate-voucher-btn', function(event) {
    event.preventDefault();
    // ... stuff
});

推荐阅读