Chrome doesn't disable submit button with span - html

If I have a submit button with a span inside it, it looks like Chrome still allows the span to be clicked when the button is set to disabled.
<form method="post" action="/changestatus" id="yw0">
<input type="hidden" name="id" value="5">
<input type="hidden" name="status" value="enabled">
<button type="submit" disabled="disabled">
<span>Submit</span>
</button>
</form>
The preceding code works as expected in Firefox, but not in Chrome.
Any ideas on fixing this (without JS if possible).
Thanks!

For submitting the form it does not submit in either browser (as it should).
If, though, with allows the span to be clicked you mean javascript firing the click event when clicking on it, then indeed there is a difference on how they handle this case.. (you will have to handle it through javascript)

If you don't want the form to submit you can add this code to your form element.
<form onSubmit="return false;">
I know its a JavaScript fix, but it is one.

Related

Enter key action when multiple submit buttons exist on a single form

I'm running into a strange issue where Internet Explorer is adding an additional query string parameter that no other browser adds.
The page has a form with auto-submit functionality and a "Reset Filters" button. When a user hits the enter key, it forces the submit. When a user hits enter in Internet Explorer, for some reason the "Reset Filters" operation is selected rather than the submit button.
For example, IE adds this to the query string:
?search=this+is+text&op=Reset+Filters
In all other browsers the same query looks like this:
?search=this+is+text
When I check the $_GET superglobal in PHP, I noticed that op is only being added when I run the application in IE and only when I hit the enter key in the form.
Based on the HTML below, it kind of makes sense that hitting enter would add op to the query string because both the submit button and the reset button are contained within the form. But why would op only get added to IE?
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
...
</form>
Any idea why this might be happening?
UPDATE: One other piece of information that might be important. Because the form is auto-submit, the first submit button is actually hidden. I'm wondering if that's why IE is using the second button as the submit handler.
After doing some more research I realized I asked the wrong question. However, it's not letting me delete the question, so I'm posting the answer to my actual question here.
My question should have been, "When multiple inputs exist in a single form, how does the browser determine which one is chosen when hitting the enter key?"
The answer is, when the enter key is hit, the first input of type="submit" is chosen. However, IE will skip any submit buttons that are hidden with display:none.
I found the answer here:
Multiple submit buttons on HTML form – designate one button as default
My fix was to set the submit button to position: absolute; left: -1000% rather than display:none. I got that solution from #bobince on the linked answer, however, left:-100% did not push it completely off the page for me so I changed it to left:-1000%.
IMHO it seems wrong to be using a submit button do convey some information other than "hey, I've submitted some data". If the user hits enter to submit the form it is reasonable that some browsers would send all the data associated with all the submit buttons.
If you are just resetting the inputs from previous parts of the form you could use:
<button type="reset">
If you do need other input data maybe a checkbox would be more appropriate:
<form>
...
<input type="checkbox" id="edit-reset" name="op" value="Reset Filters">
<label for="edit-reset">Reset Filters</label>
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
...
</form>
If you do not need other input data you could use two forms:
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
</form>
<form>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
</form>
A submit button is an input. It has a name and a value. When you click on one of the submit buttons, it's value gets added to the the submission with it's name. When you hit the enter key, the form is automatically submitted, but since you are using two submit buttons, they are both contributing a parameter. You have a lot of options that others have already suggested. You could change the type to "reset" or "button", but if you need to post to the server for both actions, then you could intercept the keystroke with javascript and click the button in code. I would probably go with a button type that would submit the form like this.
<input type="button" id="edit-reset" name="op" value="Reset Filters"
class="form-submit" onclick="submitform()">
<Script>
function submitform()
{
document.getElementById("your-form-name-here").submit();
}
</script>

Forms must contain a submit button or an image button

I have the form below ..
<form name="myForm" novalidate>
<label for="test_element">Test</label>
<input required id="test_element" type="text" ng-model="ctrl.test">
<button ng-click="ctrl.save(myForm.$valid)">
Submit
</button>
</form>
I'm using the Dynamic Assessment Plugin from here:
https://chrome.google.com/webstore/detail/dynamic-assessment-plugin/aahpafpbmmgednbflpalchnlbicaeppi
The tool doesn't give a great example of how to fix the error:
Submit buttons and image buttons allow users to explicitly request submission of the form and to control the change of context. Forms that are submitted by other mechanisms might change the user's context before they are ready, causing frustration or confusion.
What would be the best way?
I dont want to change <button> -> <input type="submit"> since there's angularjs code behind the scenes handling the submit
I have read a little bit about ng-submit, here's the link.
I think for that we can make it something like this:
<form ng-submit="ctrl.save()">
<input type="text" ng-model="ctrl.test">
<input type="submit" value="Submit">
</form>
I hope that documentation can help you :D
There's no obligation of having one submit button inside a form.
You can view an example in the documentation stating:
Finally, to make the form submittable we use the button element
with no input[type=submit] button.
You can also perfectly have no button at all, for instance a form consisting only in checkboxes.
<button type="submit" ng-click="ctrl.save(myForm.$valid)">
Submit
</button>

How to position submit type input away from its form

I have the following type of form
<form method="post" action="genTable.php" target="myIframe">
<select id="leftValues" name="cols[ ]" size="5" multiple>
<option>paper</option>
<option>authors</option>
</select>
<div class="submitbutton">
<input type="submit" name="submit" value="Refresh Table" onclick="selectAll();">
</div>
</form>
Fiddle
In that way the select form is always grouped together with the submit button. I want the button to be in a separate div with other buttons which is positioned separately from the form. However, if I separate them the button is not associated with the action of the form anymore. How can I do this?
You can give the form an id:
<form id="MyForm" method="post" action="genTable.php" target="myIframe">
</form>
And then you can position your inputs anywhere on the page and just add the form attribute to attach them to the form:
<input type="submit" name="submit" value="Refresh Table" onclick="selectAll();" form="MyForm">
Note though, that this is not supported in Internet Explorer, but since you also have a selectAll() event handler, you can also submit the form through JavaScript:
function selectAll()
{
// submit the form
document.getElementById('MyForm').submit();
// Prevent the default submit in non-IE browsers, otherwise you'll have two submits.
return false;
}
This way, it will work everywhere, except in IE browsers where JavaScript is disables. That audience is probably small enough to be acceptable.

Disabling native form validation for a certain button

I have an HTML form in which I use the browser's native validation. However, inside my form I have another button unrelated to the submit that does a different action. When I press that button howver, it fires off the browser's validation, how can I disable that
<form>
<input type="text" required />
<button>I shouldn't fire validation</button>
<input type="submit" value="I fire the validation">
</form>
In HTML 5, button has a default behavior as a submit type. So
<button type="button">Button</button>
A button by it's own don't fire the submit. You probably have an event setted on it. If you don't, try this other sol
You could use
<form>
<input type="text" required />
<button type="button">I shouldn't fire validation</button>
<input type="submit" value="I fire the validation">
</form>
It seems weird, but I got if from this example (just in the end of 4.9 section):
http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#concept-button
And you can see it working: http://jsfiddle.net/xmhpF/

how use button in internet explorer?

on my source i use
<a href='pag.php'><input type='button' value='Next'/></a>
in firefox and crome when i click on the button i'm redirected to pag.php
but in ie it don't work. how can i do?
The simple way is:
<input type='button' value='Next' onclick="location.href='pag.php'"/>
Form buttons are meant to be used for submitting a form to the page specified in the action attribute, not to be wrapped in <a> tags, which is bad syntax. If this is for a multi-part form, simply add the action attribute to the <form> tag like
<form method="POST" action="pag.php">
<!-- your form elements -->
<input type="submit" value="Next">
</form>
And that will submit the form to pag.php. Otherwise, just use a link, or, if you insist on having it look like a button, use an image link like:
<img src="image_that_looks_like_a_button.png">
Hope this helps.
Instead of what you are doing right now, go for:
<form action="pag.php" method="post" enctype="multipart/form-data">
<INPUT TYPE="submit" name="Submit" value="Next">
</form>
But if you want image instead in place of button, go for:
<INPUT TYPE="image" SRC="image location" ALT="Next">
Hope it solves your problem! :)