I am wanting to create a page that can load a property file into a text box, edit the properties, and then save the new properties to the file.
Would this be possible by simply using HTML markup? How do I get the push buttons to correlate with my Grails application?
The HTML seems simple enough:
<p>
Select property file:
<input type="file" name"propertyList" size="50"/>
</p>
<p>
<input type="submit" value="Open File"/>
<input type="submit" value="Save File"/>
</p>
<p>
<input type="text" name="properties" size="300"/>
</p>
I'm not quite sure about the submit button as I don't know a whole lot of HTML.
My goal is to simply locate the property file, use groovy to open it and read it line by line and display it in the text box, then be able to edit the properties and save it.
My biggest question deals with the buttons. How do I have the Open File use the button event (onclick) to activate a function I have written in groovy? Or instead of a submit button, what type of input should I use?
Any information leading me in the right direction would be appreciated
EDIT
Is it correct to do something like the following:
<input type="button" onclick="<g:link action="readFile" controller="propertyRead">Open File</g:link>"/>
If not, what would be the proper way to go about it?
EDIT 2
I looked into actionSubmit and also looked a bit more into g:link and was wondering which way (if either) is the better way to go:
actionSubmit (unsure if it allows one to specify the controller as it wasn't stated in the attributes):
<g:actionSubmit value="Open File" action="readFile" controller="propertyRead"</g:actionSubmit>
Or using a menuButton and g:link
g:link:
<span class="menuButton"><g:link action="readFile" controller="propertyRead">Open File</g:link>
Also forgot to ask, is there a way to get the file path from the input type="file" ?
In order to make full use of Grails functionality, you'll probably want to use the associated HTML tags - form (or uploadForm for a form that's uploading the file) and actionSubmit. Grails doesn't offer a custom file input for reasons which I don't remember, so you'll need to use the <input type="file" ...> as shown in your example.
Related
I am new to programming please forgive me if my question is out of place or if it does not follow community guidelines.
I was following a youtube tutorial and this is the simplified code:
<form class="form" id="form">
<input type="text" id="input" autocomplete="off"/>
<button type="submit" class="btn">Submit</button>
</form>
My question is why is there a need to state type="submit" ? I tried removing the type and it seems to work fine.
Also, I saw another question on StackOverflow that states the default for button when it is used in a form is already submit.
Is the person in the tutorial just being thorough or is there another reason as to why it needs to be stated?
You don't need to because button's default type is submit.
But, you have to because your purpose is not writing something that "just works". You read code 90% of time and write code 10% of time, so readability is essential. (though there are some weird places where the purpose is exactly the opposite, but that's an edge case)
If the form is so large that you don't know if your submit button is inside the form or not, simply stating type="submit" will give you a clear idea that it's inside a form.
There are many more examples in coding that you simply write "unnecessary" code for documentation purpose, such as naming a function catchButterfly() instead of f().
In general, it's always a good practice to be VERY verbose and explicit about every piece of code you write because it's just a few extra lines of code but the advantage is HUGE.
<button type="submit"> and <button> are the same thing.
The reason is the default type of a button is submit.
So you can leave it off if you want. If you do not want the button to submit the form, then you want to use type="button".
It is explained in the docs on MDN or www.w3.org
It works fine when removed because submit is the default type :
https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type
I'm using ember input helper to get some value in the application. The text field should not allow any text to be pasted. (Something like re-enter some value)
I've just tried
{{input value=inputText onpaste="return false"}}
This didn't work. But in normal html, The following works.
<input value=inputText onpaste="return false">
But the problem here is no two-way binding (which supports in ember input helper).
You don't need two way binding:
<input value={{inputText}} oninput={{action (mut inputText) value="target.value"}} onpaste="return false">
Sidenote: Never do this! This can be horrible to accessibility and user experience. It also never really works. You can always have browser plugins disabling this, or in this simple case people pasting by right click.
I use Microsoft Translator widget on my site, and it generally works. However, some items on my page are not translated:
Item1
<asp:FileUpload />, which becomes:
<input type="file" />, which is displayed as untranslated English:
* Chrome: "Choose a File..." | No file chosen
* IE: Browse...
I guess this one depends on the browser's display language.
Item2
<asp:Button Text="Submit something", which becomes:
<input (...) type="submit" value="Submit something",
in which "Submit something" is not translated.
Is there any way I can get Microsoft Translator to translate these? I guess I could do the widget's work, call MT API myself and update the value (in the second case), but I'd really rather not.
Microsoft Translator only supports <Button id="Button1" runat="server">My Button</ Button> translations. It doesn't translate the input type=button, asp:Button or telerik:Button nor any other flavor of buttons that you don't place the text for the button in between the tags. Check this article out.
http://social.msdn.microsoft.com/Forums/en-US/a840884b-4efe-4cd4-a598-0ca81842404c/widget-does-not-translate-button-text
I have been looking for a solution similar to what you are but I have found nothing.
So outside of changing all your buttons to this type I am assuming that we would need to use the api to do the translations.
Short version:
How can I have my form's button label text differ from the value submitted to the server without using the <button> tag?
Long version:
I wanted to have the text that appeared in a button in a form to be different than the value submitted in the query string. So, I looked around, and came across this approach...
<button name="method" type="submit" value="repackage">Update Config</button>
...and that worked on IE9 on one of my laptops and I was happy. The user saw "Update Config" and the server received method=repackage in the query string.
Then I brought this app to work and ran it on a workstation, also with IE9. But something had gone wrong. The user still saw "Update Config", but the server now received method=Update%20Config in the query string.
So I investigated some more. I found that www.w3schools.com recommmended not using a <button> tag in a form. They say: "If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form" in this article. This seems to be what I am experiencing.
So I looked some more, and found lots of conflicting information about the right way to do this. For example here is a Stack Overflow post that asks exactly this question, but the accepted answer is to use the <button> tag. I can say from experience and research that this is not a reliable approach.
For newcomers: With some CSS this works like a charm as of September 2017:
<form>
<label style="padding:5px; cursor:pointer; border:solid 1px; border-color:#ccc">
<input style="display:none" type="submit" name="method" value="repackage">
<span>Update Config</span>
</label>
</form>
If there's no other way try this:
Use an image button, instead of button. An image button will work as ordinary submit button, but you create an image of the desired button text (no one can change your text then).
<input type="image" src="http://images.webestools.com/buttons.php?frm=2&btn_type=31&txt=Update+Config" name="method" value="repackage">
This works as well. Manipulate the appearance using the bootstrap button classes.
<label class="btn btn-primary">
<input class="d-none" type="submit" name="method" value="repackage">
Update Config
</label>
So I was having issues with the form / hidden iframe file upload technique and spent several days trying to figure out why files wouldn't upload until finally figuring out what the issue was.
When I am building the form dynamically, I insert the file input element as a child of the form:
<input type="file" id="file-select-input" />
... and I had something like this:
<form enctype="multipart/form-data" id="file-select-form" target="select-file-iframe" method="POST" action="/upload/">
<div id="file-select-button" class="">
<input type="file" id="file-select-input" />
</div>
</form>
<iframe style="display: none" id="select-file-iframe" src="javascript:false;" name="select-file-iframe"></iframe>
It turns out that when I submit the above form, the input file information was not being sent. The reason for this, is that I didn't have the name attribute specified on the file input element. So when I changed it to this:
<input type="file" id="file-select-input" name="file" />
... things worked.
So why does the name attribute of an file input element need to be set for a file to be uploaded? According to the W3C specs, the name attribute assigns the control name, but what is the control name? Why is it important?
According to the W3C specs, the name attribute assigns the control name, but what is the control name? Why is it important?
The name of the form control controls the key in the key/value pairs that make up the POSTed data or the query string.
Without knowing the name of the control, there's no way to transform it into the data to be sent to the server.