表单上的 Jquery preventDefault 不起作用答案

【问题标题】：Jquery preventDefault on form is not working表单上的 Jquery preventDefault 不起作用
【发布时间】：2013-06-30 01:45:29
【问题描述】：

好的，所以我环顾了其他论坛，不明白为什么我的论坛仍然是......GAH。我调用 preventDefault() 所以表单不会提交。我已经尝试将操作设置为空，然后甚至根本没有在表单标签上提供操作属性。

我也尝试将提交按钮作为按钮而不是提交，但它似乎仍然不想工作。表单仍在加载页面提交..当我不希望它时。我正在尝试使用 AJAX 更新用户商店中商品的价格，以便在不重新加载跨度标签中的页面的情况下更新价格值。

HTML：

<form id="price_form" method="POST" action="http://alkharia.localhost/user/shop/priceitem/3" accept-charset="UTF-8"><input type="hidden" name="csrf_token" value="P0oW2VxJ6HTg79ksIYl6U3R5QKapeFGwkkUKiNlQ">
<div class="row clearfix">
    <div class="full">
        <label for="price">Price</label>
        <input maxlength="6" type="text" name="price" value="0" id="price">    </div>
</div>
<div class="row">
    <div class="full">
        <input type="hidden" name="item_id" value="3">
        <input type="submit" value="Submit">    </div>
</div>

</form>

jQuery:

$('#price_form').submit(function(e) {
   e.preventDefault();
   var price = $('#price').val();
   if((Math.floor(price) == price) && ($.isNumeric(price)) && (price.length <= 6)) {
       var itemID = $('#item_id').val();

       $.ajax({
        type: 'POST',
        url: 'http://'+urlBase+'/user/shop/priceit/'+itemID+'/'+price,
        success: function(msg) {
            $('#cur_price_'+itemID).html(msg);
        }
    });
  } else {
    alert('You can only enter an integer that is less than 999,999!');
    return false;
  }
});

【问题讨论】：

检查您的 JS 控制台是否有错误。您的代码应该可以工作。
stackoverflow.com/questions/6462143/… 和代理：stackoverflow.com/questions/1357118/…
我认为它会起作用，但它只是导致 AJAX.. 或表单操作属性提供的 url。所以它在我提交后加载到该页面而不是执行所有其他逻辑..：/
我的 JS 控制台中什么也没有出现，因为它没有抛出任何错误，因为它只是指向那个页面..（指定的 url）它不应该......：/

标签： jquery forms

【解决方案1】：

将提交改为按钮，即可将JS绑定到点击事件。

Difference between <input type='button' /> and <input type='submit' />

【讨论】：

如果用户按回车提交表单，这仍然有效吗？

【解决方案2】：

好吧，好像脚本文件没有以某种方式被包含..即使它出现了..但我不知道因为我使用的是 javascript 对话框，所以我必须在对话框的底部。但是当我这样做时，它修复了一切......看起来很奇怪。但是我仍然将另一个问题标记为正确，因为 return false 或比 e.preventDefault(); 更好的选择；

【讨论】：

【解决方案3】：

我将完全删除 e.preventDefault()，并将 return false; 移到 if/else 语句之外。

如果满足您的条件，则进行 AJAX 调用。如果不是，则显示警报。无论哪种方式，都不会提交表单。

编辑版本：

$('#price_form').submit(function(e) {
    var price = $('#price').val();

    if((Math.floor(price) == price) && ($.isNumeric(price)) && (price.length <= 6)) {
        var itemID = $('#item_id').val();

        $.ajax({
            type: 'POST',
            url: 'http://'+urlBase+'/user/shop/priceit/'+itemID+'/'+price,
            success: function(msg) { $('#cur_price_'+itemID).html(msg); }
        });
    } else {
        alert('You can only enter an integer that is less than 999,999!');
    }

    return false;
});

【讨论】：

【解决方案4】：

用锚标记替换您的“提交”输入，将 href 设置为 # 并将您的 ajax 函数绑定到该标记。

【讨论】：

@Blender 定义“正确”...因为如果他正在提交表单，然后立即尝试压制帖子以便在页面上执行其他操作...在我看来这就是根本不是表单提交。
当 JS 被禁用时，“正确”的方式可以保留可用性。如果您阻止 submit 事件发生，则表单永远不会提交。
虽然 OP 的代码看起来不会优雅地降级
@Blender Point take.. 但听起来好像 JS 已启用，表单永远不会像现在这样提交。当然，我不知道 OPs 项目的性质，但我认为他没有收集启用/禁用 JS 的用户的数据。
@relic180：如果代码有效，表单将永远不会提交。此外，将其绑定到提交按钮不会处理由键盘事件触发的表单提交。

【解决方案5】：

将事件绑定到 input[type=submit] 点击事件而不是表单提交。

【讨论】：