How to hide the select value from the form - javascript

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?

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.

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>

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

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.

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.

Related

Polymer custom elements interfering with each other

I wrote a custom Polymer element that lets the user pick a month. You can look view the code at https://github.com/HoverBaum/month-picker
No I want to use this to select a range of dates. So the user should select a start and and end.
I added two of my elements to a page, to try this out. However for some reason I can only change the selection of the second element. This looks like the two are somehow interfering with each other. Usually I would say "of cause they use the same ids etc." but I was thinking Polymer would take care of these things.
Here is my little demo page:
<div id="timespan">
<span>Start <month-picker></month-picker></span>
<span>End <month-picker></month-picker></span>
</div>
The way the works is that it shows the selected date and when you click it a dialog is opened that lets you change the selected month. But for some reason both element only open the dialog for the second .
Was able to solve this problem by sticking more closely to the Polymer syntax. I was trying to not define everything in the options object handed the Polymer function. As it turns out that prevented me from accessing the right dialog.

JQuery Event On Clearing A Div

I have a div that is used to display one of several wizard interfaces; which wizard is dependent upon a menu selection.
Unfortunately, if a user clicks a different menu option, the div is cleared and the new wizard is displayed. There is no chance to clean up the session (which I am using as a conversation scope).
Is there a way to trap the jquery .empty() command, in order to make sure I can clean up any mess before new content is displayed?
With no real code it's hard to answer, but as I can see in docs empty() has no method for binding another function (http://api.jquery.com/empty/) - so my suggestion is to write own function for clearing and allow it's manipulation.
Another way could be with some "dirty form" handling (check if form changed and allow/disallow etc).

Dynamically use SelectToUISlider

My current project creates user forms dynamically from a database. One of the tables defines what type of input a question should be formatted for the user. I am having difficulties getting a slider UI element working with this paradigm. SelectToUISlider, originally designed by the Filament Group, seems to be a good fit; however, I have been unsuccessful calling the UDF on the generic SELECT element from JQuery when there are more than one on a page.
If there is only a single SELECT I have no issues. If I hard-code the ID tag to be selected I have no issues. But getting it to use the ^= or |= selector has been completely unsuccessful.
Any help is appreciated.
$("select[id^='slider']").selectToUISlider();
http://jsfiddle.net/wolfphantom/zuvtpnLg/1/
As stated in the JsFiddle example you have provided it is working, isn't it?
So it seems you have a problem related to the dynamic select that gets populated at run-time after a certain operation...
So If you want to initiate the selectToUISlider on a single strip you can do is,
$(document).find("select[id^='slider']").selectToUISlider();
And i have created a Demo JsFiddle that includes a dynamic select being added in run-time.
But you want to implement selectToUISlider for each and every select individually, then why not run the loop on those element and initialize it individually.
$("select[id^='slider']").each(function(){
$(this).selectToUISlider();
});
So, the downfall, however will be, it will not work on dynamic elements, So you need to initialize those after the element is added to the DOM.
And here is the Demo JsFiddle for it.
P.S
I don't have a prior knowledge of the plugin, But I hope it will work for you.
Regards.

Modal Windows using jQuery

I'm working on a web app where in I need to add some values inputted by the user.
When the user clicks on the Add button he sees a form and these values then show up on the page. Now to implement this I can do two things
Use a modal window
Make a form inside the page itself(in a div) and toggle its visibility by the Add button.
If I go with the former solution is it necessary to use Ajax or I can add elements on the main page directly itself? Are there any jQuery plugins to accomplish the same?
As Diodeus mentioned, you don't need Ajax.
In answer to your other question about the plugins, have a look at jQuery UI Dialog for the dialog. Generating the form is pretty trivial. There's no need for a plugin there
You don't need to use Ajax to accomplish this. The difference in the two methods is simply whether you use an inline block of code that is hidden and displayed later, or whether you use an absolutely-positioned block of code doing exactly the same thing.
In most cases there is a single form that envelops the entire page. The rest is a matter of a CSS and positioning.

how to permanenlty remove a div using jQuery

I was trying to remove a certain div element from my HTML using jQuery I saw this Use jquery to remove a div with no children, the jquery remove methods work perfectly fine but the problem is of Persistence,
Actually i want to permanently remove that div for that person, i was storing this in cookies but the problem is this remove method doesn't actually remove the code so when I parse through the code to store it using the cookies i store the removed code also. is there any way i can achieve a permanent removal for particular person??
Thanks
Pranay
Since many people are confused here is what I was trying to achieve http://virtser.net/inettuts/ this was demo of http://james.padolsey.com/javascript/inettuts-with-cookies/ where he extended functionality of his code by adding Cokkiee support to retain the widget positions.
This code works fine for moving editing and collapse or expanding widget. It saves everything in cookie but for delete this does't work. It delete the widget but when i try to save it in cookie since the div element is present in code it does't save the deleted item
jQuery isn't ideal for permanent removal of elements from a page as it's stateless.
Its a client side wrapper for javascript to interact with the DOM. While in theory, you can have it remove elements from the DOM based on readable cookies a particular user may have after a page has loaded, it's not ideal when server side coding could handle this without much effort.
to remove it permanently you have to use serverside language for example php
You could revert the process and add the DIV for specific users instead, leaving the data in the .js instead.
To remove DIV "permanently" you have to use serverside lang. The logic is simple:
Remove DIV from HTML
Save some info about user and removed DIV in cookies
In serverside script you have to get cookie and check did user disable any div or not. If he did your script should skip DIV generation

Categories