I want to make an HTML form that actually uses the [form] tag in ELM. None of the example online do this -- they simply put the [input] tags in a [div] instead of a [form]
When I try switching my Elm app to a [form], my [input type=sumbit] tags don't seem to call back to Elm. The submit tries to leave the page and add a "?" to my url.
Any hints on how to do this?
WHY: I want to be a using [form], so I can use the "required" attribute on some [input] fields. This is just one part of my validation, but I like the UI that "required" tag presents.
You should use onSubmit in Html.form.
Here is the example.
Html.form [ onSubmit Submit ]
[ input
[ type' "submit"
, value "click here to submit"
]
[]
]
Related
So basically all I need to do is add a 'User' object to a OrderedCollection.
All I need to grab from the user is the username and password.
Once the submit button is clicked, I would need to add the User to the collection and return to home page (which I guess would be done by calling #answer).
Read like 99x times the seaside book on textInput but I fail to understand where is the data stored once the form is submitted.
Any intel is highly appreciated.
This is my current form:
html form: [
html text: 'Username: '.
html textInput
callback: [ ];
value: 'Enter username here'.
html break.
html text: 'Password: '.
html textInput
callback: [ ];
value: 'Enter password here'.
html break.
html submitButton
callback: [ ];
value: 'Add user']
If you read the book 99x times, then you did not read the code samples of forms. Your example is even given directly in the example of ContactView in http://book.seaside.st/book/fundamentals/forms/textinputfields
In your code, the callbacks of the text input fields are empty (i.e. no code). On form submission, Seaside invokes these callbacks with the values entered in the text fields. Finally, it will invoke the submit button callback.
Your code could be:
| user pass |
html form: [
html text: 'Username: '.
html textInput
callback: [:userValue | user := userValue ];
value: 'Enter username here'.
html break.
html text: 'Password: '.
html textInput
callback: [:passValue | pass := passValue ];
value: 'Enter password here'.
html break.
html submitButton
callback: [ self addUser: user withPassword: pass ];
value: 'Add user']
Why isn't my ListView's selection changed event being triggered?
I expect the selected True attribute to generate the InputContentType message.
However it doesn't.
listview =
select [ Html.Events.on "change" (Json.Decode.map InputContentType Html.Events.targetValue) ]
[ option [ value "instructions" ] [ text "Content Type" ]
, option [ value "Article", selected True ] [ text "Article" ]
, option [ value "Video" ] [ text "Video" ]
]
In the actual code that I have (which isn't shown here), I programmatically select an item in my listview based on a value in a textbox. This is done in my view function.
Is there a recommended practice for achieving this?
Appendix:
type Msg
= ...
| InputContentType String
Currently you have a fixed selection. Since the selected attribute is set to always True then "Article" will always be selected. My suggestion would be to add selected to every option, and then make the Bool contingent on which option is currently selected in the moment, information that should be stored in your model.
I have an application where I'm selecting some statuses. Initially, I had a code like this
div
[ classList
[ onClick (SelectStatus (Just status)) ]
But at some moment, I need to stop event propagation. I found that there is an onWithOptions function but I don't know how to use it. Especially what's the Decoder parameter for. I rewrite it to this form but I'm still getting some errors.
div
[ onWithOptions "click" { stopPropagation = True, preventDefault = False } keyCode (SelectStatus (Just status))
This is the error message
Function `onWithOptions` is expecting 3 arguments, but was given 4.
Maybe you forgot some parentheses? Or a comma?at line 171 col 11
Your link is pointing to an obsolete package as of Elm 0.17. Here is the correct version: http://package.elm-lang.org/packages/elm-lang/html/1.1.0/Html-Events#onWithOptions
I think this would give you the functionality you're after:
onWithOptions "click" { stopPropagation = True, preventDefault = False } (Json.succeed (SelectStatus (Just status)))
In Rebol 2, in order to create a password text field it is possible to write
view [
field hide
]
How to do it in Rebol 3?
You can use the hide-input facet of text input widgets to control whether input is shown or not.
There are two ways how to do this. First, you can override the facet directly in your layout specification:
view [field options [hide-input: true]]
Second, you can create a custom widget (let's call it password) derived from field but overriding the hide-input facet:
stylize [
password: field [ ;; Create a PASSWORD widget, derived from FIELD.
facets: [ ;; Override FIELD's facets.
hide-input: true ;; Mask the input with asterisks.
]
]
]
view [password]
I hope that a password widget will eventually come bundled with stock R3-GUI.
I can't get this to work at all:
renderContentOn: html
html form: [
html textInput
on: #newEmp of: self.
html submitButton
callback: [ self addEmployee: newEmp ];
text: 'Add Employee'.
self employeeNames do: [ :eachEmp | html text: Character cr asString. html text: eachEmp.]
]
I just keep getting my output on one line. Am I missing something? I've tried several variations of cr but none have worked thus far.
Don't rely on carriage returns to display your data in the browser. The employee names obviously belong either in a list or a table (you are providing a list of names):
html unorderedList: [
self employeeNames do: [ :eachEmp |
html listItem: [
html text: eachEmp ] ] ]
You most certainly want html break instead of html text: Character cr or any variation thereof. HTML intentionally treats newlines in text as simple spaces.
Other than that, the idea of max-leske to use item lists is much to be preferred.