代码之家 › 专栏 › 技术社区 › MikeN

作为jquery ajax请求的一部分提交禁用的输入的最佳方法是什么?[复制品]

jquery

MikeN · 技术社区 · 15 年前

这个问题已经有了答案:

How do I make $.serialize() take into account those disabled :input elements? 9答

我有一个非常复杂的表单,它在用户输入数据时向用户提供实时验证和反馈。表单的某些部分可能由于输入的表单“业务逻辑”而被禁用,但是服务器端需要知道这些被禁用的输入的值,以便对Ajax请求进行一些检查。

我使用jquery序列化整个表单,$(form.serialize(),并在Ajax请求期间将所有这些数据发送到服务器,但这些序列化数据将丢失任何被禁用的输入。那么,在每个Ajax请求中包含所有表单数据(甚至是禁用的输入)的最佳方法是什么?

我目前的想法是将一个函数附加到AjaxStart(回调),它将创建所有表单输入的disabled属性的客户端哈希映射,启用所有输入,序列化,然后将每个表单的disabled属性设置回其原始值。但这似乎太复杂了,我想要一个简单的,不会那么脆弱的东西。

5 回复 | 直到 6 年前

tvanfosson 12 年前

尝试这样做来序列化表单:

   $(function() {
      $('input[type=button]').click( function() {
          var form = $('form').serialize();
          $('input[disabled]').each( function() {
              form = form + '&' + $(this).attr('name') + '=' + $(this).val();
          });

      });
   });

测试HTML

<form action="/action">
   <input type='text' disabled='disabled' value='hey' id='hey' name='hey' />
   <input type='text' value='ho' id='ho' name='ho' />
   <input type='text' value="hi" id='hi' name='hi' />
   <input type='button' value="Serialize" />
</form>

产量

ho=ho&hi=hi&hey=hey

Yang Juven 13 年前

由于输入的表单“业务逻辑”,表单的某些部分可能被禁用。

可以使用“readonly”属性禁用这些输入字段。这样做:

<input type="text" readOnly="readOnly" />

read only属性指定输入字段应为只读。无法修改只读字段。但是,用户可以用制表符指向它,突出显示它,并从中复制文本。

来自: HTML input readonly Attribute

只读字段也可以作为查询字符串提交到服务器。

Gabriel Florit 15 年前

如果您的服务器接受JSON,您可以使用jquery创建一个JSON对象(使用jquery select语句包括必要的输入标记),然后将其作为对象发送到服务器-更多信息如下: http://encosia.com/2009/04/07/using-complex-types-to-make-calling-services-less-complex/ .

基本上,这样做:

var formInputs = { };

$('input[type=text]').each(function() {
  formInputs[this.id] = this.value;
});

Michael Ringholm Sundgaard 13 年前

另一种选择是简单地添加 隐藏场 使用您未发布到服务器的值。

记住使用 不同的 (虚拟)为避免任何冲突而禁用的标记的ID。

Peter Mortensen Sumit Kumar 6 年前

要使用.serize()通过使用jquery提交到Ajax的表单将禁用的值发送到后端,请执行以下操作:

<HTML>
    <HEAD>
        <script>
            $(document).ready(function(){
                $("#submid").click(function() { // loginForm is submitted
                    $('#ayyappa').removeAttr('disabled');
                    $.ajax({
                        url: "urls",
                        data:{
                            "sel_opt": $("#ayyappa").attr("value"),
                        }

                    }); // Ajax
                    $("#Number").attr("disabled", "disabled");
                }); // Click
            });
        </script>
    </HEAD>

    <BODY>
        <input type='text' id="ayyappa"  name='ayyappa' value="ayyappa" disabled>
    </BODY>
</HTML>