How the reset button (input type="reset") works under the hood?
(I want to extend it so it'll clear the inputs after post in asp.net mvc.)
It makes the browser set the current value of every form control back to its default value (as specified in the HTML, e.g. with the value or selected attributes).
Since it is client side, it cannot be extended with a server side technology like ASP.NET.
If you want to clear inputs after post, then forget reset, just send back the form without any data in it in the HTTP response.
There's a form.reset (docs) method that does the same thing as clicking the form's reset button.
Alternatively you could write some jQuery code that resets the form fields, the topic is covered in this question - Resetting a multi-stage form with jQuery
Related
Is it possible to not reseting a form when you click a submit input type. You know that when you click the submit button in html5, all the form is converted to blankspaces, is it possible to not reseting it keeping the old values?
It depends on your language like php, if it is a request with POST method it will be stored in a global array $_POST['field_name'], get $_GET['field_name'],
You can use it to retain your values.
So which language are you using?
(using angularJs 1.6)
I have a form that has some controls, and a save button.
When I click save, i check to see if the form is dirty.
If its dirty, then i save the changes off to a database, then set the form.dirty to false.
I also have if form is dirty, and user tries to navigate away without saving, there is a warning message that the form has not been saved.
If i navigate away after saving and come back everything works as expected.
But if I change something, then save. Then change something else. The form does not go dirty without refreshing first.
Without seeing any code, I can only answer based on what you mentioned and therefore you shouldn't be changing the form's $dirty property manually.
You should use the $setPristine(); method instead.
As mentioned in AngularJS Docs:
Setting a form back to a pristine state is often useful when we want to 'reuse' a form after saving or resetting it.
Which sounds like what you are attempting to do.
I have a form on my page where one of the items input is a list of services available, and there are buttons to add and remove inputs for more or fewer services (i.e. enter first service click add service button and another service input spot appears, click remove service button and the last service input spot is removed)
Now I need a way to handle that input information on the back end using node.js and express of course without knowing ahead of time how many services are entered. I've read in other places about posting to an array but I don't know how that works with node.js/express.
Get all the fields that can be added /removed via an array of values in the html form. On the server side, the array with be available under req.body.
Note - You will need body parser or something similar to get hold of the form inputs.
Also, if you are using ajax, serialize the form inputs before posting the form.
So for that would I just make the name properties of the inputs things like "service[0]" and "service[1]" and so on?
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.
I need editable text in an Apache Wicket Application. As the text has to appear very "common-table-like", with editing only after the user double clicks on the text and so on, using normal TextFields is not really an option.
So I decided to go for the new HTML5 attribute contenteditable, which does the overall job quite fine. With the following markup and Java code I get a label that looks like static text, but after the user clicks inside the text is editable:
<div wicket:id="id" contenteditable></div>
...
item.add(new Label("id", "dummy content"));
But now I obviously need to catch some event when the user actually edits the text, as the new text should be stored back into the database. Online manuals suggest using oninput as it seems more reliable (e.g. with respect to timing issues) than onkeyup, onkeydown and so on.
Trying the event with regular HTML5 works fine:
<div wicket:id="id" contenteditable oninput='alert("oninput");'></div>
My question is now, how can I get the Wicket Label to support oninput? Overriding it and creating a custom label would be a perfectly fine solution (if I really have to), but for that I am too new to Wicket as to know where to start and how to create the correct markup and so on.
Since a div is not a form element, it doesn't get submitted when you post a form. So you have two options:
in onInput fill a hidden form element with the content and submit that using a form
send the content to the server using Ajax
Both require you to do some magic using a (Ajax)Behavior.
You can use Wicket's HiddenField to create the hidden field, and in onInput perform the update of the HiddenField's value.
You can encapsulate this by creating your own ContentEditableFormComponent by using FormComponentPanel as a starting point.