CODEWITHSUNDEEP
javascripthtmlcssangularjs
Sha
Sha

Reputation: 1974

How to hide the select value from the form

I have a form which have a select drop down. i have disabled it by default and will re enable it based on some conditions. i don't want anybody to access the select option values when it is disabled(now it can be viewed by inspecting the element from browser). how do i make it secure?

Upvotes: 1

Views: 58

Answers (5)

QArea
QArea

Reputation: 4981

There is no way to hide part of code from viewing by user in browser, because browsers have to see the code to run it, so it can be viewed by user. But, using php can help you to generate content for page only when it's needed. I think you can generate content for your drop-down, or the whole dropdown using that way.

Upvotes: 0

Quentin
Quentin

Reputation: 944256

You could avoid rendering it, which would hide it from the DOM inspector, but the data would still be in the browser and available to a user who cared to look in the right place.

If you don't want the user to see the data, then don't send it to the client in the first place.

When you want to display the select element, make an Ajax request to the server. Then perform authentication and authorisation to make sure the user is allowed to see the data. Then return it in the response and have Angular generate the select using that data.

Upvotes: 0

Satpal
Satpal

Reputation: 133453

You need to use ngIf directive.

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

Usage

<select ng-if="someCondition"></select>

Upvotes: 1

rxjmx
rxjmx

Reputation: 2181

If you use a simple binding library like knockout.js you can use container-less binding which will only render the select DOM when you want.

Knockout is is a great little library which plays nicely with most other libraries so shouldn't cause any trouble, all you ned to do is import the js file.

Container-less binding will only render the DOM when it needs to, so inspecting the page element will not display the select box.

<!--ko if: IsShown -->
    <select>Render Me</select>
<!--/ko-->

Here is a simple fiddle to show you how to make it work.

Knockout Containerless Binding

Upvotes: 0

user489998
user489998

Reputation: 4531

I don't think you can. You might be better off populating it when it's needed instead of enabling it. You could do that with an Ajax call.

Upvotes: 1

Related Questions