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.
Related
I need to implement a drop-down which has a delete 'X' option next to each option item. Somewhat like the image shown below.
The drop-down is populated dynamically and I need a way that does not inlvolve using list as an alternative.
EDIT: The icons next to each dropdown item refers to 'Edit'/'Delete'
You cannot put a checkbox into the usual <select> or multi-select HTML element.
However, here is another question where several good options are discussed.
This looks like the most useful and best suited to your purpose:
https://stackoverflow.com/a/27547021/1447509
And here is an example of how to change the default checkmark to an X:
https://stackoverflow.com/a/40123793/1447509
Sources:
How to use Checkbox inside Select Option
After selecting check box Instead of Tick symbol need X in html
UPDATE:
Given that you need both the HTML markup and the javascript to make it do what you want, you have two (possibly 3) steps to do:
This answer provides a good example of how to create the custom-rolled <select> control.
This answer shows you how to replace the checkbox created in step 1 with an icon/image of your choosing.
The javascript to remove the x'd <option> is very simple:
$(this).closest('option').remove();
IF you also need to save these results, then you also need to learn:
4a. Server-side SESSIONS (so that each user's customizations are saved for them)
4b. A login system, so you know for which user to save the current customizations.
4c. Just the basics of how to use a back-end database, such as MySQL/MariaDB, in which to store the user customizations.
4d. AJAX - so you can schlep info to the back-end for insertion into the database without refreshing (or navigating away from) the current page. AJAX replaces the ancient and no-longer-used <form> construct. Frankly, once you've used AJAX a couple of times, you'll never go back. Totally easy.
If you are in a bind and need someone to create the whole thing for you, I refer you to one of these websites - I have used such services myself and can recommend them.
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.
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 have this problem, in a form I have a list of customers that could be more than 300 and, for me, it isn't very simple find over there because I should scroll all results for find a single row!
On the old technology I had a button that opened a pop up where I should research which customer I should select and than I used a javascript for recording the selection on the first form, but It could be a good solution with new technology!
How can I resolve this doubt? What is the best solution for big <select> tag?
You basically want an autocomplete dropdown list. This does not exist in the standard JSF component set and it is also not exactly trivial to implement with JavaScript/jQuery on top of the standard JSF component set because the available values have to be present in the server side's state. You also basically want a dropdown list which is represented by a <div><input><ul><li> instead of a <select><option> because a normal <select> doesn't allow the enduser to type text in. The standard JSF component set does not have a component which renders the desired HTML markup. You'd basically need to create a custom JSF component.
There are 3rd party JSF component libraries which already offer a fullworthy JSF autocomplete dropdown list. It would be easier to use either of them instead of reinventing the wheel by a custom JSF component. Take your pick:
PrimeFaces - the <p:autoComplete> component
RichFaces - the <rich:autocomplete> component
OpenFaces - the <o:suggestionField> component
ICEfaces - the <ice:selectInputText> component
you can try jquery ajax autocomplete
Refer to:
http://docs.jquery.com/Plugins/Autocomplete
http://jqueryui.com/demos/autocomplete/
Yes, the jQuery autocomplete plugin is the best solution for you while you have a large number of items.
By the way, imagine that you would like to select an item with specific letters. While you are using drop down lists, you can point to your wanted items by typing their names from the first letter of each one. But using jQuery autocomplete, you can search a string or a group of letters in everywhere. it does not matter if are your inserted letters located at the first of your item names or in other places.
As ShantanuD said, you can find this plugin in http://jqueryui.com/demos/autocomplete/
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! :)