I am trying to understand how the HTML form standard works in relation to select boxes. And the question is how does HTML form know which value a select box has as selected value in order to submit it when the form is submitted. I am inspecting a form with developer tools and I do not see anything changed whenever I change the select box selected option.
This is a pure HTML question and it should be pretty basic for those that they know the HTML standard well. Note that I am not asking for a JavaScript answer on how to get the selected option. I am asking a question in order to understand how does HTML form know which of the options is selected.
If you also have pointers to any documentation, that would be much appreciated.
You could ask the same question about how does a form know a checkbox is checked, or what text has been typed into an input field. The HTML for a web page gets parsed into a DOM (Document Object Model), and there are objects behind the scenes representing DOM elements. These objects, among other things, save state information about DOM elements such as selected options and the checking of checkboxes.
Those states don't show up just by viewing the source of a webpage, or necessarily even when using an inspect tool. But the info is there in the DOM for the browser to assemble into the HTTP request that is generated when you submit a form.
Related
Quick question here. I am creating a web app using MVC. I've noticed when I add input boxes to pages, they save previous entries in a dropdown fashion, like so:
While this IS handy, I'd like to know a couple things:
How/Where are these previous entries being saved? Is this my browser or an MVC thing?
If need be, how can I override this default behavior?
Thanks!
I'm not sure what's in your specific project, but it could be one of three things:
Some browsers, if you submit a form, remember the submitted values and automatically make inputs autocomplete. The autocomplete HTML attribute on forms and inputs can help to control that.
HTML 5 has a datalist element which lets you associate a list of options with an input, so autocomplete can be implemented manually.
There may be some JavaScript, potentially paired with AJAX doing this autocomplete.
I have a web application for tagging data and viewing data by tag, so my UI is a list of checkboxes for each tag, a list of checkboxes for each data item, a "Tag" button, which adds the checked tags to the checked data, and a "Filter" button, which ignores the checked data and just displays only the data items with the given tag.
My problem is that the former operation (tagging data) is "obviously" a POST operation, whereas the latter operation (viewing data according to a tag) is "obviously" a GET operation. But the method attribute is attached to the form, not the submit button, so I have to choose one or other for both buttons.
I don't want to make two forms, since as far as I can tell this would force me to duplicate the entire tag list. Is there any way I can choose my method based on the choice of submit button?
A JavaScript solution is permissible, but one without would be preferred.
(I am going to post an answer to this question, but I don't particularly like it, so I would welcome alternatives).
In principle, you could use the formmethod attribute in a submit button, as per HTML5. However, it is not recognized by IE, even in IE 9. The existence of the feature in HTML5 indirectly proves that previous versions of HTML lack a feature for this.
On the other hand, the POST method can be used even for simple viewing that does not cause any changes in the outside world, and in many situations it has to be used for technical reasons (e.g., too much data). So I think the method issue is not very relevant; just use POST.
I would honestly go with a javascript solution, in the onsubmit of the form fire a method which a) checks the submit button that was pressed and b) based on this changes the method of the form.
One possible solution would be to use POST, and then have the server give a 303 See Other header to change it into a GET request. This involves making two requests to serve the purpose of one, which is unfortunate, but at least means that the URL will change so people can link to a specific tag selection.
I agree with javascript solution, proposed by Jon Taylor, the problem is not if your form's method is GET or POST, but how do you filter/validate/sanitize user input. If your concern is related to the fact, that the user can manipulate the form's method, then you should implement solution to that matter on server side.
I'm working on a large application with lots of editable objects on a page. One page for example contains a list of categories and each category has a list of tasks. Both categories and tasks can be editted via a modal dialog window with a form inside.
The current solution is to embed a hidden form prepopulated with data next to each object in the html. When the edit button is clicked, the form is displayed inside the modal dialog and submitted via ajax. The advantage to this solution is that modal dialogs pop up quick. The disadvantage is the growing number of dom elements and page size as each object requires another hidden form.
I am looking for ways to reduce the page weight and reduce the number of dom elements. I am looking for a balance of performance vs maintainability, as there are lots of pages with lots of different objects to consider.
Use ajax to dynamically load the modal populated form. This reduces the page weight considerably, but causes a delay when the edit button is clicked and is the worst for user experience. It also requires each form to have an ajax handler for this specific function.
Store the form parameters as json data and populate the form values from a cloned template form when an element is edited. This reduces dom elements significantly, and the page weight a little as well. A generic piece of javascript needs to be written to insert the json data into input elements.
Store the entire form HTML as a json object inside a data attribute of a dom element. This does nothing for page weight but will reduce the number of dom elements. On edit, the html can be injected into the modal dialog. Its also the easiest to implement.
Scrape the content of the page for the values of the form, and inject them into a cloned template form. This reduces the duplication of content, and does the most to reduce page weight and dom elements. However it feels brittle and intrusive, there needs to be id coordination for content and special care needs to be taken so that hidden input fields are also injected into the page.
Those are the options I've come up with. The JSON solutions are the most appealing to me currently. I'm curious if anyone has other solutions or insight to any of these?
The most light-weight is probably store the entire form definition as JSON and write some sort of engine that would dynamically build the form HTML on the fly. You'd then use another JSON file to represent the data layer that populates/contains the form data.
The fun you run into is how to manage the layout of the form on top of all this. For a standard two-column layout it's simply. Beyond that it's an awful lot of work.
I started writing one using prototype.js about five years ago. I never finished it but it works. Feel free to view the source and steal the code.
If you look at advanced client libraries like ext.js, this is how they're doing it.
If you're going for speed, and don't have a framework handy, don't think "HTML", think "DOM element." Maintain as much data as possible in a "global" data object, and only go to the server for information you don't have. Initialize a modal <div> either on demand or asynchronously after form load, and populate its options via JavaScript in response to a handled event from each <input> element.
For performance, consider storing categorical information in some localStorage option.
Realistically, however, you want a framework. (If you don't use one someone else wrote, you should write your own.) I'm a fan of the Enyo framework leftover from WebOS personally, but there are others out there to help you do this.
Assume I have a html from, and it contain some submit type. I want to create a "are you sure" popup window that will appear when user click submit button.
My question is that is there any way to create it by using "only" html, not using javascript or any other?
HTML only is possible, but not without a postback
Scenario that could work without javascript:
You have your form with submit button
User clicks (and submits) the form
You display another form with are you sure? form (that contains Yes and No buttons as well as hidden fields of the first form that will make it possible to do the action required on the original data
functionality that executes the action and goes back to whatever required.
This would be completely Javascript free, but it would require several postbacks.
This kind of thing is usually done on the client with a Javascript confirm() function (here's a simple example) or lately with a more user friendly modal dialog provided by many different client libraries or their plugins.
When to choose the script free version?
If you know your clients are going to be very basic ones (ie. vast majority of your users will access your application using clients like Opera Mini that's not able to run scripts at all). But in all other cases it's much better to do this using Javascript. It will be faster, easier to develop and much more user friendly. Not to mention that it will put less strain on your server as well since certain parts will execute on the client without the need of any server processing.
No, there isn't. Despite of the new features in HTML 5, HTML is still a markup language, not a programming language. In order to express dynamic behavior (such as an "are you sure?" box), you need to use a programming language.
Javascript would be the most obvious choice for this, but you could also do it with frameworks that can get you around writing Javascript by hand (for example ASP.NET).
Edit: Actually it appears that it would theoretically possible to do this with without Javascript or other frameworks. As I just learned, HTML 5 + CSS 3 seems to be turing complete. But this is hardly relevant to this question.
It's possible to ask for a confirmation, but it will not be in a "popup window". The creation of the "popup window" requires javascript/other language.
It will be:
Request (first form)
POST
Response (confirmation form)
POST
Response (outcome message)
You can create a form with all hidden elements containing the data from the first form and a "Yes" and "No" button below the "Are you sure?" text. You can use PHP sessions to avoid the hidden form elements. If there is a lot of data or confidential data or you do not want to re-validate the data from the second form, use sessions. Make sure you validate the data from either form before using it.
I know I'm like .. 10 years late. But for anyone still wondering I thought I could be of some help!
What I did for this exact problem was make sure I had multiple "divs" in my code. For me specifically, I had two main ones.
First, one whose id="main", and another whose id="popup" with the 'visible' property initially set to 'false' for the popup div.
Then, on whichever event you're looking for (button click for example) you'll simply set main.Visible = false and popup.Visible = true, then you could have more buttons in your popup (yes, no, cancel, confirm, etc.) which do the exact same thing, but in reverse!
The most important thing to make sure of is that you have the 'runat="server"' property in your divs so that you can access them in your CS code
Hope this was helpful! :)
I was looking at the raw HTML rendered by a SharePoint (2010) list item edit page, and I noticed that an input field (rich text field) made use of an AlwaysEnableSilent attribute. i have checked online for an explanation of what the attribute does, but have not been able to get a answer. Does anyone know what this attribute does?
Thanks, MagicAndi
ASP.Net validators allow you to turn them on/off using client side scripting using ValidatorEnable, but whenever you turn the validator on that way the validation fires immediately. Sometimes you (SharePoint) may want to be able to control which validators are active using client side scripting, but without the validation firing when you turn it on (during load, before the users have had the possiblity to fill out the fields).
In order to handle this SharePoint has defined its own function STSValidatorEnable with an extra parameter bSilent, so it can turn on validators without them firing.
They then found out that for some validators they always want them not to fire when STSValidatorEnable is called, even though the caller uses bSilent==false. So they introduced an attribute AlwaysEnableSilent which tells the validator never to fire when turned on using STSValidatorEnable, but only during postback.