Taking JavaScript this semester. I cannot grasp how this property can be useful at all. This property gives a Boolean value of true IF the checked attribute was used in tag for the check box object...BUT if I am the one writing the program ...I should know if I wrote that into the program correct? I just do not see the logic in this property. Anybody have a better reason for the use of it?
First, to answer your question, "Don't I know?". Of course not. If you are thinking of a form that is only used to add records, I could see your point but forms are also used to update records and we have no idea what the initial value is for any given record that may need to be updated.
The next thing to understand is that the same concept applies to more than check boxes. For example the text input elements have a "defaultValue" property that parallels the logic of default checked property.
The next point, is these properties would be better understood by novices had they been named "initialxyz" rather than "defaultxyz". Novices think that they are used to identify what should be sent to the server if not populated by the user but that is not what they are at all. They are the initial value, as sent by the server to the client, before the user starts interacting with the screen.
To answer your larger question, these propertied are extremely useful in two cases. The first has already been mentioned which is the "reset" button or as I jokingly call it the "oops" button or "start over". That can occur at the record level that resets every element on the form but it can be used on a field by field basis where only the field that has focus is reset. For example, the escape key is often used for this purpose. The second use for this is to know if the form is "clean" (unchanged) or dirty (changed, in at least one small way somewhere). This is used in too commentary places that you did not think about. The first is to avoid submitting a form with no changes to the server. Why waste resources. The complementary is to pop up the "are you sure you want to lose your changes" when someone attempts to navigate away from a form with changes. You walk the form and compare the current valued to the initial value for each element. If no elements changed the form is clean and allow the user to leave without a prompt. If at least one element is different than it's initial value and take appropriate action which might be to prompt to confirm leaving or it might be to submit the form changes to the server before leaving or something that neither of us have thought of yet.
Hypothetically, you might have a form with lots of fields written in html, and you may want to have a "reset" button which resets all of the form fields back to their initial values. (I don't really know why that used to be a common form button, I've never seen a use for it...) The code to reset checkboxes would then be:
input.checked = input.defaultChecked;
which would be the same for all checkboxes, and then you wouldn't need to track the difference between default checked and no default checked ones separately.
Really though, it doesn't appear to have much use, and I've never used it before.
One scenario would be when you are creating checkboxes dynamically, on-the-fly, in your code. The creation may be dependent on a couple of parameters, some of them depending in turn on selections by the user, from the current screen/page.
You may wish to set what is the state of these newly created checkboxes by default, before the user performs any actions on them.
Exemplifying: Say you have a textbox where the user has to tell you how many new checkboxes you should create for whatever further actions. Then after the user enters the input, your javascript creates N checkboxes, accordingly. And their initial state is set according to "defaultChecked".
Just yesterday I found myself using this same attribute. It comes in very handy when trying to set certain values to default.
Have you ever signed up for something ad then found yourself receiving TONS of unwanted newsletters? or you install one thing and two more things start installing? This happens because there was an option somewhere with a checkbox that had the checked attribute to make that decision for you.
Mostly it is used to make decisions for the user. Comes in handy sooner than later!
BTW: Welcome to the sweet world of JavaScript!
Related
I would like to add "add another field" and "remove field" button in django admin which results in to add/remove a text field respectively. And all these field should be concatenated(separated via some character) and assigned into one model textfield. How could I achieve this?
You're best bet is going to be to use Javascript. Have Javascript create the new field (or remove it) on button click. Let the user fill in the field as they need to. When they are ready to save you'll need to catch the submit (again using Javascript) and concatenate everything into the initial textarea field and then let it submit to the server where Django should handle it.
You'll also have to then have Javascript run on page load to check the textarea and split out the different sections of your textarea.
More or less that is how you are going to have go about it. If you're wanting to have someone write it for you then that would be a whole other discussion.
(I know it's easy to come along and say "why do that, that's not the best way". I often run into constraints where the best way isn't going to work, so I try not to knock others not knowing their constraints.)
Hopefully someone can help me here.
I have a page that displays a list of users in a modal popup. This page can be accessed in two ways, one way you choose Unapproved users and it will open the page, the other way you choose user accounts which will open a popup asking if you have any search criteria such as name, once you have finished there you search and it brings up the page of users.
I have a button on the form to clear any filters. When i run it on the Unapproved users page, it clears the box fine, however if i do it on the form from the other way the code will not empty the textbox and when i try an alert it shows no data. Where as the alert works on the Unapproved route!
Here is the jquery that i am using:
clear: function () {
//reset filters//
$('.usersFilterList li').remove();
$('.userFilterSelect option').show();
$('#UserFilter_SearchTermIncluded').attr('value', ''); // This line doesn't seem to work properly
alert($('#UserFilter_SearchTermIncluded').attr('value'));
//hide filter options
MSG.showNHide('', '#usersFilterBox');
//reset modal control buttons
$('#usersButSaveFilter,#usersButClearFilter').hide();
$('#usersButFilter').fadeIn();
usersFilter.refresh(0);
}
Can anyone see if i am doing anything stupid? As i say, it is exactly the same form called from the same MVC action just with the other popup in between.
Apologies if this is confusing, I cannot post anymore code i am afraid. I can assure you that the ID of the textbox is correct though.
Any advice here would be much appreciated as I have been staring at it for hours now...
Cheers,
Gareth
If i right click the second option and run in new tab and run that first pop up as a full page the code will then work! So the problem appears to be that there are two popups.
SOLVED
I found a work around of my own, thanks for all your help.
I simply assigned a class and searched for any items with that class and cleared it like so:
$('.jq-clearme').val('');
I will close this when i can. I am not allowed yet due to my rep being too low.
To change the value of an element (or to retrieve it), accessing the attribute is the wrong way to go - it's not synchronized in both directions. What you want is the property. While also exposed through .prop('value'[, newvalue]) the correct way to get/set it with jQuery is .val([newvalue]).
To clear the element's value use the following:
$('#UserFilter_SearchTermIncluded').val('');
To retrieve/show it, use
alert($('#UserFilter_SearchTermIncluded').val());
You should use val() to get/set the value of the input.
Use without a parameter to get the value:
$('#UserFilter_SearchTermIncluded').val();
And with a paramater set the value, in this case set it to nothing:
$('#UserFilter_SearchTermIncluded').val('');
Is there an ajax call involved which might be loading the Javascript you posted twice and hence when called the second time (after the ajax call) it finds a conflict?
As mentioned by others best to use .val('') to set a value and .val() to get the value. Check in firebug if there are any Javascript errors.
I found a work around of my own, thanks for all your help.
I simply assigned a class and searched for any items with that class and cleared it like so:
$('.jq-clearme').val('');
I will close this when i can. I am not allowed yet due to my rep being too low.
I have a form with a read only field for display/submit to the next page purposes.
However, I noticed using developer tools in Chrome, I was able to add an id to an element, use the javascript console to select that element, and change its value. I submitted the form and what do you know - the next page acted on it as if it was the original value.
Now, there shouldn't be any problem with the people using the site I'm building, but it seems like a huge security flaw to me. Isn't the point of read-only to remain constant? If a savvy user to change it around, doesn't that pose a big problem? In fact, I didn't even think you could add and change attributes in chrome.
Please post your thoughts below, and let me know if there's a solution ("disabled" textfield, but setting the disabled property doesn't send the data to the next page).
NEVER trust input from a web form.
The user could, just as easily, remove the readonly attribute and edit the value. The readonly attribute is only something to help the user when filling out the form, so they don't edit a value expecting it to change, when your server actually won't let it be changed. So, always remember to code the behavior on your server first, and have the HTML form be a helpful guide for users to make the form easier to fill out (without having to submit the form several times to get relevant error messages).
To overcome this, if something is readonly and you do not want it edited, you could store the value in your database. Also, values provided by users should always be checked (and sanitized) as no amount of JavaScript, HTML, or CSS is going to prevent someone who knows what they're doing from adding new or changing/removing existing values.
When a user creates an account on certain sites, it sometimes require the user's basic information such as name, email, and location. Chrome has the ability to autofill this form if the user had previously entered his/her information.
My question is: is it possible to detect/identify whether the page the user is visiting can be autofilled?
A naive solution would be to parse every page for forms that can be autofilled. But is there a more elegant solution?
What do you want exactly? Every form CAN be autofilled, obviously, so the answer is YES to the question in your text.
The question in your headline is a much different one - HAS the form been auto-filled?
There is a pretty good approximation: if you check on load if there are any values in the form (that differ from the ones you sent), and there are, the user can't have filled them manually, obviously. So then you know that auto-fill has taken place.
On the other hand, it almost sounds as if you are looking for a generic solution not for your own site but for a browser extension you yourself want to write? In that case the solution is the same though, immediately on page load look at the values the page provides and see if the ones actually there differ. I'm not exactly sure, but the onload event should be fine, I think autofill doesn't happen before the page has loaded. Maybe you'll even need to add a few hundred milliseconds on top of the onload event. The user can't type much anyway in less than a second, or select checkboxes etc., so it's still a very good guess.
Anyway, even after re-reading your headline and your question I'm actually MORE confused about what exactly you want to achieve - but as Douglas Adams wasn't the first one to try to teach us, often it's not the answer but the question itself that is the problem :)
well, you can check for the default value value="VALUE" has changed
i.e:
if (getElementById('inputID').value != 'VALUE') { // DO SOMETHING }
or
check if value has changed:
input type="text" onchange="alert('changed')">
one of these two should help you ( i hope :) )
You could use
document.querySelectorAll('*:-webkit-autofill');
to get all elements autofilled.
Then you just have to check if any new elements is in there in a loop.
Here is the problem:
My page displays a set of items. Each item has a check box associated to it (which is part of a form). User might check any of these check boxes and press 'Delete' button. The same page also has a 'Upload' button which would upload an excel sheet of items.
At the moment, my form action sumbits to say : "xyzAction" and I have two different handlers (analogous to Struts Action) - one for deletion of stores and other for uploading stores.
I am told that the best way to do this is to rely on javascript by doing one of these:
1)) Switching form action on press of upload and delete buttons - there by invoke different actions.
2) Use a hidden variable "act" to set it to delete / upload and submit to a single form. The server side action would take care of identifying the act and forwarding to the corresponding action.
Approach (1) - seems very inelegant to me. Playing with form action seems unnecessary.
Approach (2) - would obviously not work if your javascript is turned off and is not very elegant either.
There must be a third way to doing this?, which would make me happy?
It sounds like you may need two different forms, for the two different actions.
You need to get the HTML correct first.
You have two different actions, so you should have two forms - a good rule of thumb is that each form should only have one submit button. This is the best practice for HTML and will ensure that the page works without JS or any other trickery.
Once you have the page working like this, use JS to manipulate the DOM to produce the UI that you need. This is using JS to add behvour to the UI and is best practice for unobtrusive JS.
(If you really want to conflate your actions in a single form, changing the action of the form with JS is the best course of action. But consider what would happen if a user checks a check box and then changes their mind and uploads a file leaving the checkbox checked. You should take care that this shouldn't delete anything.)