javascript - 检查表单数据值并禁用提交按钮 jQuery 表单

标签 javascript jquery html forms validation

我正在尝试禁用提交按钮以避免重复条目。

我已经检查了所有 SOF、Google 等。

发生的情况是,我得到了禁用提交按钮的代码,但它没有检查表单是否已填写数据。

为了最大限度地减少您的时间和精力,我这里的代码是 JSFiddle。 http://jsfiddle.net/4gL0f2tz/

我想做的是。

  1. 检查表单值是否已完成(如果没有则抛出错误 - 为此我使用 required 属性)
  2. 填写完表单中的值后,请禁用提交按钮并继续处理页面。

这是 jQuery 片段

    <script type="text/javascript">
    $(document).ready(function(){
    $('input:submit').click(function(){
            $('p').text("Form submiting.....");
            $('input:submit').attr("disabled", true);   
            $.ajax({
            type: "POST",
            url: "form_process.php",
            data: "id=abc" ,
            success: function(){alert('success');}
            });
    });
    });
    </script>

完整的代码可以在这里找到。 http://jsfiddle.net/4gL0f2tz/

注意:我有禁用提交按钮的代码,如何在检查所有表单值是否完成后禁用它,然后禁用它。

最佳答案

我已将您的 fiddle 更新为:click here

您只需检查每个必填字段,无论其是否已填充(或您想要的任何内容),然后禁用该按钮。

“魔法”就是这样:

$('input:submit').click(function(evt){

// We think any required field is filled
var filled = true;
$('input[required]:visible').each(function(key, el) {
    // Check if a field is not filled (just an example)
    // you could also do any other checks
    if ( $(el).val() == '' ) filled = false;
});

if ( filled == true ) { /* send it */ }

evt.preventDefault();

});

但是您需要停止发送表单,因为您想通过 AJAX 请求发送表单...您可以使用 PreventDefault() 来做到这一点

关于javascript - 检查表单数据值并禁用提交按钮 jQuery 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26031542/

相关文章:

php - .load() 不为未缓存的图像触发 - jquery

javascript - 如何使用 Action razor 语法在 ajax url 中使用 var

javascript - 将 google map 自动完成功能与 jquery 自动完成功能集成

javascript - 拖放到特定区域

javascript - 当存在后代类时将类添加到父类

html - Bootstrap 3 : make panel's text wrap under icons

javascript - Jquery 全局 ajax 事件处理程序 w/json 数据

javascript - 当计数器大于2时隐藏按钮

javascript - 替换网页中的所有 span 标签

javascript - HTML 表格列只播放第一个音频的声音