Internet Explorer 9 Posts Forms Differently? - forms

I've been using buttons for quite some time that are structured as follows:
<button type='submit'><em class='ui-icon ui-icon-disk'/><span>Save</span></button>
The tag then uses the jquery-ui icons to show a disk image for the button. PROBLEM: As soon as users started using IE9, they were getting the server error:
A potentially dangerous Request.QueryString value was detected from the client (<em class=ui-icon)
I can only assume that IE9 is posting the form values differently - does anyone know how to stop the browser submitting certain form elements or how to resolve this issue?

PROBLEM SOLVED
If you remove the name attribute from the button element then the form will not submit its value or the value of any element within it.

Use <input type="image"> instead.

Related

Laravel 5.4 - Display errors to appended inputs in a form

Whatsup guys
I am struggling with an issue which is displaying errors on appended inputs in a form after submit. I guess there is a simple solution on this which i dont know of because i am a newbie in Laravel.
Scenario:
I have a form where a user needs to select a category and depending on the selection, a few inputs should be appended (with ajax) into the same form below the category dropdown. I have set up the validations and the error rendering on the html but it doesnt seem to work yet the request doesnt pass since it detects the validations.
Any clues?
You will not be able to display the errors next to form inputs that have been retrieved with Ajax. However, you may use an error box at the top of the screen describing the problem. Or you may simply post the form using Ajax instead of a page refresh, then using JavaScript, you can display the errors to the appended input.
If this is not an answer to the question you are asking, please provide code and more details.

How do I make a link that pre-fills a form checkbox?

I have a page called contact.htm with a working form. One of the checkbox fields on the form is named Garden (so either it is checked or not when using the form).
I have another page that I want to link to my form page, so that if a user clicks a particular link, they are sent to the form page and the field Garden is pre-clicked.
I have not been able to do this though I have tried several methods...such as:
a href="contact.htm?checkbox=Garden,on" or
a href="contact.htm?checkbox=Garden,checked" or
a href="contact.htm?input type="checkbox" name="Garden" value="checked", and some others.
I would appreciate any help.
You'll need to use JavaScript on the target webpage to process the argument and fill the values in. There is no automatic way of doing this just by URL.
This link shows how to retrieve URL arguments from JavaScript. From there, it's a matter of using standard JavaScript or JQuery to fill the values in.

Chrome HTML5 field validation message disappears under the dom?

I am dealing with html5 forms and I have a field with a required attribute set. When the user wants to submit the form, chrome displays the validation message, that the field must not be empty. Strangely, this message seems to slip under the other html markup. I dont think I have any css set that could cause this.
Is this a bug or am I missing something?
http://www.abload.de/img/errorogbcv.png
the html5 validation message was cut off/ under the dom due to overflow:hidden.

HTML5 Validation - PHP Form Action Attribute Empty

I was just validating some of my html5 pages on W3C with forms (PHP) on them and I get the following validation error:
Error: Bad value for attribute action on element form: Must be non-empty.
I thought that when the form submits to itself, it is good practice to leave the action attribute empty. Is this not the case? How can I fix this?
Thank you!
Simply put in "#".
<form action="#" method=post>
While browsers currently support the empty action since the spec says it's needed browsers in the future may not support it. In my opinion this is unlikely but you never know.
The reason I would add the action attribute is so if there is JavaScript somewhere that is actually posting the form the next developer in line is certain that this is were the form posts to and doesn't have to look though the relevant JavaScript files to see if this is intended or left out on mistake.
It can be fixed my putting the current page in the action attribute.
Hope that helps.

Form Automatically Submitting Upon Pressing 'Enter'

I have a very simple form with a single autocomplete widget. No submit button. I would like the form to act in such a way that it submits the form when the user selects a suggestion from the autocomplete, but does not submit otherwise. The problem is, the form automatically submits, filled in or not, whenever I press enter. However, if I add a hidden text input box, it resolves the issue, and I can only submit the form by selecting a suggestion from the autocomplete (submission via this mechanism is handled by some jQuery). Is there a more 'graceful' way of turning off the submit-on-return feature? Adding a hidden text input that I don't actually need definitely does not seem like the 'proper' way to do this and is probably a browser-dependent fix anyways (I'm using Chrome).
The "submit on enter" is a browser specific implementation. So I don't think there is anything we can do from JS to turn it off.
You might be able to force the issue by listening to "keypress" event in jQuery, but that seems heavy handed.
Another way you could possibly approach this (in theory, never done this) is using HTML5 Data attributes. i.e. on your form, have
<form data-ready="false">
</form>
Then set that attribute to "true" when you've selected your suggestion item.
In your Form submit handler, check for that attribute before deciding to allow form submission, or use .preventDefault() to stop it from submitting to server.