显示:无田不被张贴到控制器 [英] Display:none fields not being posted to controller

查看:98
本文介绍了显示:无田不被张贴到控制器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个包含了一堆,我已经设置了使用HTML佣工的创建操作的输入元素的灯箱。它们是可选字段,但我确实申请数字规则,他们jQuery验证。

用户可以打开这个灯箱,并填写领域,如果他们愿意,但不是必需的。它是在相同的形式数据的休息,但提交,他们不得不关闭这个灯箱。

在提交,而不是从收藏夹值被发布到控制器。如果我从收藏夹中删除输入,它工作正常。它必须有一些做它被隐藏,但为什​​么会发生呢?难道是jQuery的?我有'voavi-忽略'作为我的忽略类,所以它仍然应该验证这些。我有点困惑,就这一个烧坏了,因为我已经一段时间了一个它。我的网页上的其他一切正常,我只是添加了这些新领域的灯箱。

JS:

  $(文件)。就绪(函数(){
    inittab文件();
    $(#caseProductions),隐藏()。
    $(。chzn-选择)选择();
    $(文件类型),单击(OnNewVOAVIClick);
    $(countPerCase)发生变化(OnCaseProdChange)。
    $(caseCount)发生变化(OnCaseProdChange)。
    $(。drinkWindow)变化(OnDrinkWindowChange)。
    $(#lnkCaseProduction),单击(OnCaseProdOpen)。    VintageUpAlert();    $ .validator.addMethod(DecimalNumber设置功能(价值元素){
        返回this.optional(元)|| (!isNaN(值));
    }必须是一个有效的数字);    wineValidator = $(形式)。验证({
        errorPlacement:功能(错误,元素){
            变种X = element.parent();
            error.appendTo(element.closest(TD));
        },
        忽略:.voavignore
        规则{
            Wine.VarTypeID:{分:1},
            Wine.OriginID:{分:1},
            Wine.AppID:{分:1},
            Wine.VintageID:{分:1},
            VOAVIRequest.VarType:{要求:真正},
            VOAVIRequest.Origin:{要求:真正},
            VOAVIRequest.App:{要求:真正},
            VOAVIRequest.Vintage:{要求:真正},
            Wine.CaseProduction:{位数:真正},
            Wine.AlcoholContent:{号:真实,
                分:0,最大值:100
            },
            Wine.pH:{号:真实,
                分:0,最大:7
            },
            Wine.RS:{DecimalNumber设置:真实,
                分:0,最大值:1000
            }
        },
        消息:{
            Wine.VarTypeID:{分:品种/类型必需},
            Wine.OriginID:{分:原产地要求},
            Wine.AppID:{分:称谓要求},
            Wine.VintageID:{分:复古要求},
            VOAVIRequest.VarType:{要求:品种/类型必需},
            VOAVIRequest.Origin:{要求:要求原产地},
            VOAVIRequest.App:{要求:要求的称谓},
            VOAVIRequest.Vintage:{要求:要求的葡萄酒},
            Wine.CaseProduction:{数字:请只输入整数}
        }
    });    CaseProdValidation();
});功能CaseProdValidation(){
    $(。caseCount),规则(增加,{数字:真})。
}

HTML(这仅仅是作为lighbox其余相当多的标记):

 < D​​IV CLASS =收藏夹ID =caseProductions>
    < A HREF =#类=UI图标UI图标圈近距离接近>< / A>
    <表>
        <&THEAD GT;
            &所述; TR>
                &所述; TD>
                    < H4>
                        格式< / H4>
                < / TD>
                &所述; TD>
                    < H4>
                        袋子< / H4>
                < / TD>
                &所述; TD>
                    < H4>
                        瓶/箱< / H4>
                < / TD>
                &所述; TD>
                    < H4>
                        总瓶< / H4>
                < / TD>
            < / TR>
        < / THEAD>
        <&TBODY GT;
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc187ml)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc187ml,新{@class =caseCount})
                < / TD>
                < TD> @ Html.DropDownListFor(M = GT; m.Wine.cpc187ml,新的SelectList(Model.BottlesPerCase,键,值,24),新{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc375ml)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc375ml,新{@class =caseCount})
                < / TD>
                &所述; TD> @ Html.DropDownListFor(M => m.Wine.cpc375ml,新的SelectList(Model.BottlesPerCase,键,值,12),新的{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc500ml)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc500ml,新{@class =caseCount})
                < / TD>
                &所述; TD> @ Html.DropDownListFor(M => m.Wine.cpc500ml,新的SelectList(Model.BottlesPerCase,键,值,12),新的{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc750ml)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc750ml,新{@class =caseCount})
                < / TD>
                &所述; TD> @ Html.DropDownListFor(M => m.Wine.cpc750ml,新的SelectList(Model.BottlesPerCase,键,值,12),新的{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc1p5L)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc1p5L,新{@class =caseCount})
                < / TD>
                < TD> @ Html.DropDownListFor(M = GT; m.Wine.cpc1p5L,新的SelectList(Model.BottlesPerCase,键,值,1),新{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc3L)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc3L,新{@class =caseCount})
                < / TD>
                < TD> @ Html.DropDownListFor(M = GT; m.Wine.cpc3L,新的SelectList(Model.BottlesPerCase,键,值,1),新{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc5L)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc5L,新{@class =caseCount})
                < / TD>
                < TD> @ Html.DropDownListFor(M = GT; m.Wine.cpc5L,新的SelectList(Model.BottlesPerCase,键,值,1),新{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc6L)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc6L,新{@class =caseCount})
                < / TD>
                < TD> @ Html.DropDownListFor(M = GT; m.Wine.cpc6L,新的SelectList(Model.BottlesPerCase,键,值,1),新{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc9L)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc9L,新{@class =caseCount})
                < / TD>
                < TD> @ Html.DropDownListFor(M = GT; m.Wine.cpc9L,新的SelectList(Model.BottlesPerCase,键,值,1),新{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc12L)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc12L,新{@class =caseCount})
                < / TD>
                < TD> @ Html.DropDownListFor(M = GT; m.Wine.cpc12L,新的SelectList(Model.BottlesPerCase,键,值,1),新{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc15L)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc15L,新{@class =caseCount})
                < / TD>
                < TD> @ Html.DropDownListFor(M = GT; m.Wine.cpc15L,新的SelectList(Model.BottlesPerCase,键,值,1),新{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc18L)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc18L,新{@class =caseCount})
                < / TD>
                < TD> @ Html.DropDownListFor(M = GT; m.Wine.cpc18L,新的SelectList(Model.BottlesPerCase,键,值,1),新{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.cc27L)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cc27L,新{@class =caseCount})
                < / TD>
                < TD> @ Html.DropDownListFor(M = GT; m.Wine.cpc27L,新的SelectList(Model.BottlesPerCase,键,值,1),新{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
            &所述; TR>
                < TD> @ Html.LabelFor(M = GT; m.Wine.ccOther)
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.ccOther,新{@class =caseCount})
                < / TD>
                < TD> @ Html.TextBoxFor(M = GT; m.Wine.cpcOther,新{@class =countPerCase})
                < / TD>
                < TD类=totalBottleCalc>
                < / TD>
            < / TR>
        < / TBODY>
    < /表>
    < D​​IV的风格=显示:inline-block的>
    <输入类型=按钮值=保存/>
    < / DIV>
< / DIV>


解决方案

这其实浏览器决定了显示:无字段应该不会发布(除了键入这是从未反正显示=隐藏的)。

一个广泛使用的技巧是利用定位,而不是隐藏域:

CSS:

  input.hideThisField {
  位置:绝对的;
  顶部:-9999px;
  visibility:hidden的;
}

但在你的情况,问题是,你的表单字段是你的收藏夹,这是(显然)被提交表单之前关闭中。这是行不通的。你将必须保持开放的灯箱,而表单提交,否则一旦灯箱被关闭提取使用JavaScript自己的表格内容。

我可能会选择干脆保持灯箱营业到形式已经公布)。

I have a lightbox that contains a bunch of input elements that I have set up using HTML helpers for a create action. They are optional fields, but I do apply the digit rule to them in jquery validation.

The user can open up this lightbox, and fill out the fields if they would like to, but they are not required. It is in the same form as the rest of the data, but to submit, they have to close this lightbox.

On submit, not of the values from the lightbox are posted to the controller. If I remove the inputs from the lightbox, it works fine. It must have something to do with it being hidden, but why would that happen? Is it jquery? I have 'voavi-ignore' as my ignore class, so it should still be validating these. I'm a bit confused and burnt out on this one as I've been a it for a while. Everything else on my page works fine, and I just added these new fields to the lightbox.

js:

$(document).ready(function () {
    InitTab();
    $("#caseProductions").hide();
    $(".chzn-select").chosen();
    $(".filetypes").click(OnNewVOAVIClick);
    $(".countPerCase").change(OnCaseProdChange);
    $(".caseCount").change(OnCaseProdChange);
    $(".drinkWindow").change(OnDrinkWindowChange);
    $("#lnkCaseProduction").click(OnCaseProdOpen);

    VintageUpAlert();

    $.validator.addMethod("decimalNumber", function (value, element) {
        return this.optional(element) || (!isNaN(value));
    }, "Must be a valid number");

    wineValidator = $("form").validate({
        errorPlacement: function (error, element) {
            var x = element.parent();
            error.appendTo(element.closest("td"));
        },
        ignore: ".voavignore",
        rules: {
            "Wine.VarTypeID": { min: 1 },
            "Wine.OriginID": { min: 1 },
            "Wine.AppID": { min: 1 },
            "Wine.VintageID": { min: 1 },
            "VOAVIRequest.VarType": { required: true },
            "VOAVIRequest.Origin": { required: true },
            "VOAVIRequest.App": { required: true },
            "VOAVIRequest.Vintage": { required: true },
            "Wine.CaseProduction": { digits: true },
            "Wine.AlcoholContent": { number: true,
                min: 0, max: 100
            },
            "Wine.pH": { number: true,
                min: 0, max: 7
            },
            "Wine.RS": { decimalNumber: true,
                min: 0, max: 1000
            }
        },
        messages: {
            "Wine.VarTypeID": { min: "Varietal/Type Required" },
            "Wine.OriginID": { min: "Origin Required" },
            "Wine.AppID": { min: "Appellation Required" },
            "Wine.VintageID": { min: "Vintage Required" },
            "VOAVIRequest.VarType": { required: "Varietal/Type Required" },
            "VOAVIRequest.Origin": { required: "Origin Required" },
            "VOAVIRequest.App": { required: "Appellation Required" },
            "VOAVIRequest.Vintage": { required: "Vintage Required" },
            "Wine.CaseProduction": { digits: "Please enter whole numbers only" }
        }
    });

    CaseProdValidation();
});

function CaseProdValidation() {
    $(".caseCount").rules("add", { digits: true });
}

html (This is just the lighbox as the rest quite a bit of markup):

<div class="lightbox" id="caseProductions">
    <a href="#" class="ui-icon ui-icon-circle-close closer"></a>
    <table>
        <thead>
            <tr>
                <td>
                    <h4>
                        Format</h4>
                </td>
                <td>
                    <h4>
                        Cases</h4>
                </td>
                <td>
                    <h4>
                        Bottles/Case</h4>
                </td>
                <td>
                    <h4>
                        Total Bottles</h4>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc187ml)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc187ml, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc187ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 24), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc375ml)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc375ml, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc375ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 12), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc500ml)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc500ml, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc500ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 12), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc750ml)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc750ml, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc750ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 12), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc1p5L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc1p5L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc1p5L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc3L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc3L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc3L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc5L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc5L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc5L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc6L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc6L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc6L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc9L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc9L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc9L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc12L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc12L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc12L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc15L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc15L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc15L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc18L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc18L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc18L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc27L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc27L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc27L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.ccOther)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.ccOther, new { @class = "caseCount" })
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cpcOther, new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
        </tbody>
    </table>
    <div style="display: inline-block">
    <input type="button" value="Save" />
    </div>
</div>

解决方案

It's actually the browser deciding that display:none fields should not be posted (except type="hidden" ones which are never displayed anyway).

One widely-used trick is to hide the field using positioning instead:

CSS:

input.hideThisField {
  position:absolute;
  top: -9999px;
  visibility:hidden;
}

But in your case, the problem is that your form fields are inside your lightbox, which is (apparently) being closed before the form is submitted. This won't work. You are going to have to keep the lightbox open while the form submits, or extract the form contents with JavaScript yourself once the lightbox is closed.

I'd probably opt for simply keeping the lightbox open until the form has been posted).

这篇关于显示:无田不被张贴到控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆