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.
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 want to "prevent browsers from prefilling form inputs when hitting the "back" button". Indeed, I want the initial values to be filled in (added via jsp), not the browser's (cached) values.
Solution 1: I found out that this can be done by disabling the browser caching for the current page. This seems a rather extreme solution considering that I "only" want to disable this prefill feature for a "form" (hence disable caching for the form only, not the whole page).
Solution 2: Then, the obvious next solution is to use javascript: that is, store the initial value in a data-* attribute, then, on page load, replace the input value by the initial value if they differ.
Both solutions seem rather unperfect (these are rather work arounds) I turn to you guys hoping to hear of a better one.
Resources:
How does SO's form remember previous input values?
Disable Firefox's Auto-fill
Pressing back prefills inputs with value from right before submit
HTML form values and 'Back' button
The first thing that comes to my mind is to use a <input type="reset"> button. These aren't seen often nowadays because the user rarely actually wants to reset the form, but here it might just be what you need.
You could also do it in javascript on page load with form.reset(); instead of providing a button for the user.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.reset
This is similar to your solution 2 and thus still a workaround of the browser behavior, but it is a(n old) part of standard forms and I think it'll do the trick with very little additional code (no need for data-* attributes), so wanted to throw it out there.
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.
I need to validate a date/time field on a webpage but want it to do it without reloading the page and would like 'instant' feedback for the users.
What's the best/easiest solution.
BTW: easiest scores 65% of total points
Edit:
What if best was 65% of total points?
If you would like to use JavaScript then it has built in date validation functions. However, if you do not want to go the JavaScript route, you could change the UI to dropdown controls which would limit the users ability to enter invalid data. You would still need to check server side to ensure nobody submits Feb 30th.
Check out this javascript date validation function.
It uses javascript, regular expressions and the 'onblur' event of a text input.
#David H. Aust
Using onblur for validation is problematic, because some folks use the enter key, not the mouse, to submit a form. Using onblur and the form's onsubmit event in conjunction could be a better solution. Back when I did JS validation for forms a lot more, I would run against keyup events. This gave the user instant feedback on whether or not their entry was correct. You can (and I did) also put checks in place so that the user doesn't receive an "incorrect" message until they've left the field (since you shouldn't tell them they're incorrect if they aren't done yet).
I would recommend using drop-downs for dates, as indicated above. I can't really think of any reason not to--you want the user to choose from pre-defined data, not give you something unique that you can't anticipate.
You can avoid February 30 with a little bit of Javascript (make the days field populate dynamically based on the month).
#Brian Warshaw
That is a really good point you make about not forgetting the users who navigate via the keyboard (uh, me).
Thanks for bringing our attention to that.
A simple javascript method that reads what's in the input field on submit and validates it. If it's not valid, return false so that the form is not submitted to the server.
... onSubmit="return validateForm();" ...
Make sure you validate on the server side too, it's easy to bypass javascript validation.
If you're using ASP.NET, it has validator controls that you can point to textboxes which you can then use to validate proper date/time formats.
There are a couple of date widgets available out in the aether. Then you can allow only valid input.
I've used this small bit of js code in a few projects, it'll do date quickly and easily along with a few others.
Link
Looks like there's a great video about the ASP.NET AJAX Control Toolkit provides the MaskedEdit control and the MaskedEditValidator control that works great. Not easy for beginners but VERY good and instant feedback.
Thanks for all the answers though!
asp.net
Unfortunately I can't accept this answer.