Question

我试图禁用提交按钮以避免重复输入。

我已检查过所有SOF，Google等。

发生的情况是，我获取了禁用提交按钮的代码，但它没有检查表单是否已完成数据。

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

我想做的是。

检查表单值是否已完成（如果没有抛出错误 - 为此我使用了必需属性）
使用值完成表单后，请禁用“提交”按钮并继续处理页面。

这是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/

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

Answer 1

我已经更新了你的小提琴：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（）

来做

Answer 2

您可以将其放在.submit()函数中，而不是.click()函数中：

<script type="text/javascript">
$(document).ready(function(){
$('form').submit(function(e){
        e.preventDefault();

        //validate
        $(":input",$(this)).each(function(i,v){
           if(v.val().trim()==""){ alert("Fix empty field!"); return false; }
        });

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

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

2 个答案: