Submit Input Hidden Field

[chaudary]

I could not find any documentation how to submit hidden field via form control.

[Dimitar]

Hidden fields will be automatically submitted with the Form when defined through the Items configuration. This configuration is demonstrated in my previous reply.

[Dimitar]

Hello,

If the field for which you would like to render a hidden field is part of the model (e.g the model id), then a hidden field for it can be rendered through an editor template as follows:

items.Add()                                     
  .Field(f => f.EmployeeID)
  .Label(" ")
  .EditorTemplate("<input name='EmployeeID' type='hidden' />");

In case you would like to add a custom hidden input to the form, then you can dynamically append the element as follows:

var form = $("#myForm").getKendoForm();

form.wrapper.append($("<input type='hidden' name='customField' value='test' data-skip='true'/>"));

I hope this helps.

Regards,
Dimitar
Progress Telerik

[Rubencito]

This creates an unwanted white-space in the form. Hidden fields should not consume space in the UI on render

[Dimitar]

Hello Rubencito,

There is already a feature request for the MVC/Core Form to provide a built-in method for setting hidden fields.The scenario where there is additional spacing due to the label should be covered with providing such a built-in functionality. Thus, I have upvoted the item on your behalf:

• https://feedback.telerik.com/aspnet-core-ui/1469243-add-support-for-hidden-fields-to-the-form

Regards,
Dimitar
Progress Telerik

[Mahfuzul]

Hi Dimitar, So what is the alternative solution for now that does not take up space please?

[Dimitar]

Hi Mahfuzul,

One possible solution is to hide the label in order for the margins to collapse. Each field label has a uniquie id that can be targeted with CSS ([fieldName]-form-label):

.Field(f => f.EmployeeID)                         
  .EditorTemplate("<input name='EmployeeID' type='hidden' />");

...

<style>
    #EmployeeID-form-label { display: none; }
</style>

 

Regards,
Dimitar
Progress Telerik

[Mahfuzul]

Thanks Dimitar, CSS provided did not do the Job for me for some reason. Its still taking up space. 

I had to hide the parent div as below to completely hide it. 

$(document).ready(function () {
    $("#DailyShiftReportId-form-label").parent().hide();
})

[Mark]

Another more generic option (kendo ui),

$("form").find("input[type=hidden]").parent().parent().hide();

[Frans]

Hi Telerik,

 

Is this already solved ?

So, when adding a hidden field control item, that it does that without taking space in the UI.

regards,

Martin

[Dimitar]

Hello Frans,

This feature is not yet implemented. For the time being, you can apply additional CSS rule to hide the desired field element.

Regards,
Dimitar
Progress Telerik

[Frans]

I found a alternative css solution, like this:

 <style>#myhiddenfield { height:1px;visibility: hidden; }</style>

I know in theory this is not the good css because display:none should be the one that doesnt take space. However, that didnt work., this does work. Only 1 pixel space it still takes.

But this should just be solved anyway, this is a plain bug.

Martin

 

[Ivan Danchev]

We would advise voting for the feature request Dimitar linked earlier in this thread. The more votes it gets, the higher the chances of it getting approved for implementation in a future release.