jQuery 提交禁用字段

submit disabled fields

提问by Nick Franceschina

I know the defined behavior for web forms is to not submit disabled fields... but that's not the definition I want. I want to use ajax to post the form and I want it to get all fields, even if they are disabled. I don't want to build a workaround where I make the field "look disabled"... or have to hack it where I enable the fields -> post -> disable.

我知道 Web 表单的定义行为是不提交禁用字段......但这不是我想要的定义。我想使用 ajax 发布表单，我希望它获取所有字段，即使它们被禁用。我不想建立一个解决方法，让我使字段“看起来被禁用”......或者必须在启用字段的地方破解它 -> 发布 -> 禁用。

is it possible to make ajaxSubmit() or serialize() grab the disabled fields as it's moving through the DOM and grabbing values? or is there another serialize plugin out there that can do this? or does someone have a mod I can make to one of these plugins to make it work?

是否可以让 ajaxSubmit() 或 serialize() 在它通过 DOM 移动并获取值时获取禁用的字段？或者是否有另一个序列化插件可以做到这一点？或者有人有我可以为这些插件之一制作的模组以使其工作吗？

or am I doomed to hack it?

还是我注定要破解它？

回答by CMS

You can make your fields readonly, this will disallow changes to the value of your controls.

您可以使您的字段只读，这将禁止更改您的控件的值。

Edit:You could easily write a "serializeDisabled" function, iterating over the disabled form elements which have a name attribute and using the jQuery.paramfunction at the end, to generate the serialized string:

编辑：您可以轻松编写“ serializeDisabled”函数，迭代具有名称属性的禁用表单元素并在最后使用jQuery.param函数，以生成序列化字符串：

(function ($) {
  $.fn.serializeDisabled = function () {
    var obj = {};

    $(':disabled[name]', this).each(function () { 
        obj[this.name] = $(this).val(); 
    });
    return $.param(obj);
  }
})(jQuery);

回答by Ketan

Why not simply enable all the disabled input fields right before the submission using .removeAttr()and .submit().

为什么不在使用.removeAttr()和提交之前简单地启用所有禁用的输入字段.submit()。

$('#my_form').submit(function(){
    $("#my_form :disabled").removeAttr('disabled');
});

回答by Nick Franceschina

OK... perhaps I didn't ask my question clearly enough... but the answer I was looking for is here:

好吧......也许我没有问清楚我的问题......但我正在寻找的答案在这里：

http://docs.jquery.com/Plugins:Forms#.val.28.29_becomes_.fieldValue.28.29

http://docs.jquery.com/Plugins:Forms#.val.28.29_becomes_.fieldValue.28.29

I mentioned ajaxSubmit() in my question, which comes from the jQuery Form plugin... and inside that plug-in there is a method called fieldValue() which accepts a parameter called "successful". If you pass in "true" then the plug-in only returns what the W3C defines as "successful" controls (which excludes disabled controls). but if you set it to false, then it will get all values, regardless of W3C definition.

我在我的问题中提到了 ajaxSubmit()，它来自 jQuery Form 插件......在该插件中，有一个名为 fieldValue() 的方法，它接受一个名为“successful”的参数。如果您传入“true”，则插件仅返回 W3C 定义为“成功”的控件（不包括禁用的控件）。但是如果您将其设置为 false，那么它将获取所有值，而不管 W3C 定义如何。

I knew this was possible, since the entire submission is controlled by the plug-in and has nothing to do with the HTML standards/definition... I was just asking to see if this option was already available in this plug-in or other plugins. It is available in this plugin, although the default behavior is to act like a standard HTML submit

我知道这是可能的，因为整个提交是由插件控制的，与 HTML 标准/定义无关……我只是想看看这个插件或其他插件中是否已经提供了这个选项插件。它在这个插件中可用，尽管默认行为是像标准的 HTML 提交一样

回答by Nick Franceschina

//jQuery('#container :input').serializeAll()

//jQuery('#container :input').serializeAll()

(function($j) {
  $j.fn.serializeDisabled=function(){
    var obj={};
    $j(this).filter(':input:disabled').each(function(index,domElem){
      var $this=$j(domElem);
      obj[domElem.name]=$this.val(); 
    });
    return $j.param(obj);
  };

  $j.fn.serializeAll=function(){
    $this=$j(this);
    return $this.filter(':input:enabled').serialize()+'&'+$this.serializeDisabled();
  };
})(jQuery);

回答by Anthony

First: I really like CMS's answer. Much simpler. But in case it's not the best option...

第一：我真的很喜欢 CMS 的回答。简单多了。但如果这不是最好的选择......

Why don't you just have a JQuery function tied to the form's onsubmitevent that traverses the form and grabs the input for all <input>s in the form and enables them and then submits the form? Do you need to know if the input is disabled? Are you concerned that enabling the input will change the visual appearance in a way that concerns the user?

为什么不只将一个 JQuery 函数绑定到表单的onsubmit事件，该函数遍历表单并获取表单中所有<input>s的输入并启用它们然后提交表单？您是否需要知道输入是否被禁用？您是否担心启用输入会以用户关注的方式改变视觉外观？

In either case you could add something to the elements that you are enabling. For styling, add a class that gives disabled inputs the same look as enabled inputs. Of if you need to know which were disabled, add something to either the name or the value itself to indicate the status.

在任何一种情况下，您都可以向要启用的元素添加一些内容。对于样式，添加一个类，使禁用的输入与启用的输入具有相同的外观。如果您需要知道哪些被禁用，请在名称或值本身中添加一些内容以指示状态。

Out of curiosity, when would you ever want the disabled info? If the input is always disabled (meaning the user didn't set it that way) don't you already know the value? And if the input is set to disabled by the user, aren't you being a bit deceptive collecting that data?

出于好奇，你什么时候想要残疾人信息？如果输入总是被禁用（意味着用户没有那样设置），你不是已经知道这个值了吗？如果用户将输入设置为禁用，那么您收集这些数据是不是有点欺骗性？

If the value is disabled because it's something like a "total" field which updates via js based on other non-disabled fields, I'd go with CMS on making it read-only instead.

如果该值被禁用，因为它类似于“总计”字段，它基于其他非禁用字段通过 js 更新，我会使用 CMS 将其改为只读。

---

---

Based on your response to CMS:

根据您对 CMS 的回应：

I can only imagine a few scenarios where a select box would be disabled but you'd want that passed back to the script. The main one that comes to my mind is that certain select boxes become enabled when other options are checked, but you would rather have the form pass back the default of the select box rather than have the server script deal with filling in the blanks.

我只能想象一些场景，其中选择框将被禁用，但您希望将其传递回脚本。所致的主要一个介绍，当检查其他选项时，某些选择框会启用，但您宁愿将表单递回选定框的默认框架，而不是将服务器脚本处理填写填充空白。

If that's the case, why not set up a toggle between a hidden input and the select box? Have the value and name be the same for both inputs but if one is enabled, the other is disabled. This way the script only sees one of the two inputs, and since they have the same name it doesn't get caught on where the data came from.

如果是这样，为什么不在隐藏输入和选择框之间设置切换？使两个输入的值和名称相同，但如果启用一个，则禁用另一个。这样脚本只能看到两个输入之一，并且由于它们具有相同的名称，因此不会被捕获到数据的来源。

---

---

$('form').submit(function() {
    $('[disabled]').each(function(i) {
        d_name = $(this).attr("name");
        d_val = $(this).val();
        $(this).after(
        '<input type="hidden" name="' + d_name + '" value="' + d_val + ' />'
        );
    });
return true;
});

Just in case you think I'm being too conceptual, here's a simple function that will run on user submit. Notice how it goes through each disabled element and adds a new hidden input into the DOM which has the same name and value has your hidden input, thus insuring that your server-side script can treat all input generically.

以防万一您认为我过于概念化，这里有一个将在用户提交时运行的简单函数。请注意它如何遍历每个禁用的元素并将新的隐藏输入添加到具有相同名称和值的 DOM 中，从而确保您的服务器端脚本可以通用地处理所有输入。

回答by Doug Kulak

You can also just re-enable the fields before submission using the following:

您还可以在提交前使用以下命令重新启用这些字段：

$('#form').submit(function() {
    $('[disabled]').each(function(i) {
        var d_name = $(this).attr("name");
        var d_val = $(this).val();
        $(this).attr("disabled", false);
    });
    return true;
});

$('#form').submit();

回答by Rady

You can disable the inputs & before submitting the form you can re-enable them so the form will include them when posting to the server side

您可以禁用输入 & 在提交表单之前，您可以重新启用它们，以便表单在发布到服务器端时包含它们