Question

我有一个相当简单的表单，其中包含一个可选的图片上传字段。由于上传图像数据需要时间，我希望表单按钮（通过css显示为背景图像）显示一个替代图像，让用户知道表单正在提交数据的过程中时间，禁用该按钮以防止多次点击。

以下是表格的相关部分：

<input name="formsubmit" type="submit" id="button" value="Submit!">

我设法拼凑了以下jQuery：

jQuery('#formid').submit(function() {
     jQuery('#button').attr('id', 'button-post');
     jQuery('#button').attr('disabled','disabled');
});

这正是我所需要的。问题是，我正在使用jQuery内联验证插件（Link），当你到达表单并提交表单而没有填写任何字段并单击提交按钮时，按钮ID会改变，就像我想要的那样，但是我使用的插件返回错误，因为未填写必填字段，按钮ID属性不会更改回原始ID。

有解决方法吗？也许是一种检查表单是否实际成功提交的方法，或者是否有其他必填字段超过一定长度？

感谢您的帮助。

Answer 1

为什么要更改按钮的ID - 当然你只需要在其上切换一个CSS类？

我猜你可以检查验证是否成功，如果是，则提交表格：

$("#button").click(function() 
{
     if your validation is OK
     {
        jQuery('#button').attr('id', 'button-post');       
         jQuery('#button').attr('disabled','disabled');
         document.forms["myform"].submit();
     }
});

Answer 2

首先，ID应该改变，这是一种不好的做法。这是用于的类。

但无论如何，解决问题的方法是自己实际处理ajax请求。

jQuery('#formid').submit(function() {    
    var options = 
    {
        //Define ajax options
        url : '' //your http request target
        type: "post",
        target: "#responsePanel",
        beforeSend: function()
        {
            // button-disabled is a CSS class that would have your visual effects for the
            // changed button.
            jQuery('#button').addClass("button-disbaled").attr('disabled','disabled');
        },        
        success: function(response, statusString, xhr)
        {
            // process your response.
        },
        error: function(response, status, err)
        {
           //Handle your error here.
           jQuery('#button').removeClass("button-disbaled").attrRemove('disabled');
        }
     }
     $.ajax(options);
});

注意，未经测试的代码可能是错误。

Answer 3

将其更改为：

jQuery('#formid').submit(function() {
  if ($("#formid").validationEngine('validate')) {
     jQuery('#button').attr('id', 'button-post');
     jQuery('#button').attr('disabled','disabled');
  }
});

这可确保在更改按钮状态之前验证通过。

在不成功的表单提交时更改按钮ID

3 个答案: