My application has a form with 2 submit buttons:
<input name="rating" class="Show" type="submit" value="Show answer">
<input name="rating" class="Skip" type="submit" value="Skip">
However I noticed some errors in GAE logs:
ValueError: invalid literal for int() with base 10: 'Voir la r\xe9ponse'
ValueError: invalid literal for int() with base 10: 'Sauter'
Basically it's the value of the form buttons, in French, whereas my app is in English.
How can a user change the form submit values? For example with google translate etc?
How can I handle this?
Yeah, that'll be Google Translate. It translates the text on the buttons as well. If you really want to prevent this, you'll have to make sure Google can't translate the text on the button. Note: these answers are not semantic HTML. Not sure if there's a cleaner method, I hope so, but this is what first springs to mind:
Method 1: hidden inputs
Since you're using buttons anyway, you might as well have them submit something. Put each button in its own form, add a hidden field, and use the value of the hidden field to determine what page to load next.
Downside: a lot of extra html, not really maintenance-friendly
Method 2: numeric value
Change the value of the buttons into something numeric, like 0 and 1. Hide the button's value with CSS and give the button a background image that shows the text. Load the page based on the numeric value.
Downside: very bad accessibility (screen readers, etc.), text on button won't be translated.
I really do hope there's better alternatives I haven't thought of yet.
Related
I'm building a form with Apache Freemarker that contains data for a data structure. For some reason I have to prohibit the character * from ever being submitted into one of the fields. I have been able to successfully forbid the character using my input field like so:
<input type="text" name="permission" id="permission" class="form-control" pattern="^[^\*]*" value="<#if permission??>${permission}</#if>"/>
However, I can still input the * character. This is still fine to me, but what isn't is that one only gets the message, that the input is invalid, once one clicks send. This looks like this:
This does not only not match my style, but the message is rather unhelpful. How do I
customize this box, if I even can.
make the hint appear, as soon as someone enteres a forbidden character
<FormControl variant="standard">
<InputLabel className="input-box-label" htmlFor="component-helper">My Value</InputLabel>
<Input
id="component-helper"
value={myValue}
onChange={handleChangeMyValue}
/>
</FormControl>
In this block of code, I'm wanting to make sure a user can't put any spaces as part of myValue. I can't really work out from the docs https://mui.com/material-ui/api/text-field/ how to put validation on form inputs (this includes adding other restraints such as only lower case letters, or any regex pattern for example).
Another aside thought, are forms redundant when one is dealing with 'state' as opposed to 'submitting' a form as would happen when not writing a single page app with a system like React? What is the benefit of actually having a <form> element in there if nothing is ever submitted?
I've seen the same thing enough times now that it's sparked my curiosity. It's even on this site!
The <input id=title ... > element on the "https://stackoverflow.com/questions/ask" sets maxlength=300 and data-max-length="150".
Namely, the input box will allow you to type 300 characters into it, but the form will not accept anything above 150.
Is there a reason one might do this?
It's most likely to prevent user from loosing end of the text while not noticing that input is limited or when pasting. After getting an error user can edit input while text is intact.
I'm developing a browser and I want to automatically insert a string in googles search field, when loading the page. The problem is, that it has no type="text". I've seen an approach to search for an element with name="q" (that's the name of the field), but it seems to be not very elegant, since it's possible, that the name changes over time.
Does anyone has a better idea?
THX
I just checked, when I call both "google.com" and "google.at" the text field has type="text":
<input id="gbqfq" class="gbqfif" name="q" type="text" [...]>
But: Searching for an input field with type="text" is just as brittle as searching for an input field with name="q": Google might add more input fields, rename them, do even more JavaScript magic, ...
If you just want to search for stuff, you cann use the following GET request: https://www.google.com/search?q=QUERY_GOES_HERE - This is probably a lot more stable than inserting text into text fields. (HT to Ethan Brouwer who mentioned this in a comment on your question).
Im not sure on how to explain this but, what I want to know is there if there is any way to "lock" just one part of an text area in a html form. Example:
<input name="example" type="text" id="example" valeu="__this part cant be modified__, and here user insert aditional info" />
And then I get this field value as like: "this part cant be modified + what user typed"
Thank you
I don't think you can, your best bet would probably to just append your default value to their input upon submission.
No, there isn’t, not for input elements, not for textarea elements.
You can however create an impression of such behavior, e.g. having some text and an input element on the same line and setting their style as similar as possible (setting all text, background, and border properties). Of course, the form data would still consist of the input value. And prepending the fixed text to it in client-side JavaScript would be possible but normally pointless, since it would be inherently unreliable and since you can simply make the form handler behave as if it got that string (i.e., make it have it as built-in data).