sorry about title, i know its messy but i dont know how can i describe this situation.
we have an input field. but no form element. here is the code
<input name="search" id="search" onkeypress="SearchBox(this.value);" type="text" value="Search"/>
<input name="searchbutton" align="left" class="okbutton" id="searchbutton" onclick="SearchBox(search.value);" type="button"/>
SearchBox function checking keycode and if it is 13 (enter button charcode) sending search request. this code works in IE8/9 but in IE10 have interesting behaviour.
above code middle of the page. and we have a button element top of the page for LOGIN.
in IE10;
i enter a word in input and press enter:
SearchBox function work,
but behave like LOGIN button is clicked also and its a problem
note:sorry about language, english is not my native language.
note 2: SearchBox() function removed. check the jsfiddle link for the latest code.
another solution
define your buttons type as button. because default type is submit
<button type="button" ....
Well, IE10 for Windows7 is a pre-release, and this seems to be one of the things MS should fix. Anyway, I don't know why this happens, but I've found a workaround for the problem:
Instead of button, use <input type="button">.
Live demo at jsFiddle.
I was having the same problem. Adding type="button" to all my buttons worked.
<button type="button">...
Even though my buttons are not in a form.
From other testing I've done IE 10 works exactly like Chrome. This is the only exception I've seen.
For starters, here is my markup:
<form action="/People/_Delete/AUG0003/10?searchType=IdentityCode&Filter=a&searchOption=StartsWith" method="post" onsubmit="return confirm('Are you sure you want to delete AUG0003?')">
<input id="rowcount" type="hidden" value="10" />
<button alt="Delete" class="g-button user_delete.png" title="Delete AUG0003" type="submit" value="Delete"></button>
</form>
When, i press the button, i receive the confirmation dialog, after i press OK, there is a 2-3 second delay before anything happens.
If i remove the confirmation, it happens fast and instantaneously.
Has anyone encountered this before? It is a real pain.
Thanks,
Nick
I've tested this behaviour in Chromium ("Chrome"), and cannot reproduce your issue. JavaScript functions properly:
<script>var time=0;</script>
<form action="javascript:alert((new Date).getTime()-time)" method="post" onsubmit="return confirm('Are you sure you want to delete AUG0003?')&&(time=(new Date).getTime())">
<input id="rowcount" type="hidden" value="10" />
<button alt="Delete" class="g-button user_delete.png" title="Delete AUG0003" type="submit" value="Delete"></button>
</form>
(Link: Fiddle)
When I hit the button, an alert box appears. This alert box shows the delayed time between return confirm(""), and the following of the action targer. I have hit the button multiple times, each time getting 0 (indicating that the issue is not caused by the use of onsubmit.
The "delay" is very likely caused by coincidence, impatience or a server-side issue.
I am using below line so that when i click a "New" button it will empty all the fields.
using onClick="history.go(0)" which works in IE but fails Mozilla.
<INPUT TYPE="button" onClick="history.go(0)" VALUE="New">
To empty all the fields, use reset button:
<button type="reset">New</button>
No need in JavaScript.
I have come across some strange behaviour, and I'm assuming a bug in Firefox, when removing a input submit element from the DOM from within the click event.
The following code reproduces the issue:
<form name="test_form">
<input type="submit" value="remove me" onclick="this.parentNode.removeChild(this);" />
<input type="submit" value="submit normally" />
<input type="button" value="submit via js" onclick="document.test_form.submit();" />
</form>
To reproduce:
Click "remove me"
Click "submit via js". Note that the form does not get submitted, this is the problem.
Click "submit normally". Note that the form still gets submitted normally.
It appears that, under Firefox, if you remove a submit button from within the click event it puts the form in an invalid state so that any future calls to form.submit() are simply ignored. But it is a JavaScript-specific issue as normal submit buttons within this form still function fine.
To be honest, this is such a simple example of this issue that I was expecting the internet to be awash with other people experiencing it, but so far searching has yealded nothing useful.
Has anyone else experienced this and if so, did you get to the bottom of it?
Seems to be related to the fact that you're removing the node while processing the event.
This indeed looks like a bug from Firefox.
In the meanwhile, this hack seems to work but delaying the removal:
<script type="text/javascript">
function delsubmit(el) {
window.setTimeout(function() {
el.parentNode.removeChild(el);
}, 50);
return false;
}
</script>
<input type="submit" value="remove me" onclick="return delsubmit(this)" />
Let's imagine a HTML-form with with two submit buttons. one of them is positioned in the upper half of the form and does something less important. the other button is the actual submit button, which saves the entered data. this button is positioned at the end of the form. the two buttons will trigger different action-urls.
experienced users like to submit their forms by pressing "enter" or "return" instead of clicking on the according button.
unfortunately, the browser will look for the first submit-button of the current form and use this to execute the form-submit. since in my form the second button is the actual submit-button, i need to tell the browser to use this particular button (or the action-url that is associated with it).
i don't link javascript listeners, which are looking for key pressed or something like that. so i'm looking for a better approach to this problem. however, javascript or jquery solutions (without keypressed-listerner) are welcome.
thank you very much for your help in advance.
change your first button to a <input type="button" />.
You could, theoretically at least, have three submit buttons in your form.
Button two is the existing 'less-important' button (from halfway down the form), button three is the existing 'actual-submit' button from your existing form.
Button one should be hidden (using CSS display:none or visibility: hidden) and should perform exactly the same function as your current 'actual-submit.' I think it'll still be the first button to be found by the browser, regardless of its visibility.
<form method="post" method="whatever.php" enctype="form/multipart">
<fieldset id="first">
<label>...<input />
<label>...<input />
<label>...<input />
<input type="submit" value="submit" style="visibility: hidden;" <!-- or "display: none" --> />
<input class="less_important" type="submit" value="submit" />
</fieldset>
<fieldset id="second">
<label>...<input />
<label>...<input />
<label>...<input />
<input type="submit" value="submit" class="actual_submit" />
</fieldset>
</form>
Edited in response to comments:
I thought hidden buttons were also disabled by default? [md5sum]
A valid point, but I made the mistake of testing only in Firefox (3.5.7, Ubuntu 9.10) before posting, in which the technique worked1, for both. The complete xhtml file is pasted (below) that forms the basis of my testing subsequently to these comments.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>3button form</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('input[type="submit"]').click(
function(e){
alert("button " + $(this).attr("name"));
}
);
}
);
</script>
</head>
<body>
<form method="post" method="whatever.php" enctype="form/multipart">
<fieldset id="first">
<label>...<input />
<label>...<input />
<label>...<input />
<input name="one" type="submit" value="submit" style="display:none;" /><!-- or "display: none" -->
<input name="two" class="less_important" type="submit" value="submit" />
</fieldset>
<fieldset id="second">
<label>...<input />
<label>...<input />
<label>...<input />
<input name="three" type="submit" value="submit" class="actual_submit" />
</fieldset>
</form>
</body>
</html>
display: none should prevent a button from being an active part of the form (included in the result set, and eligible for default-button-ness); visibility: hidden should not. However both of these cases are got wrong by some browsers. The normal way to have an invisible first submit button is to position: absolute; it and move it way off the page (eg. with left: -4000px). This is ugly but reliable. It's also a good idea to change its tabindex so it doesn't interfere in the expected form tabbing order.
There are, at least, two points I have to raise to this comment. In order:
"The normal way..." I was unaware that there was a normal way, and presented this option as a possibility to achieve an aim, in the full knowledge that there were/are almost certainly any number of better ways, particularly given that I don't see a good reason for multiple submit buttons on the same form.
Given the latter sentence of the above point, I'd like to make it clear that I don't advocate doing this. At all. It feels like an ugly, and non-semantic, hack to have more than one submit button, with -in the OP's instance- one button apparently not being a submit button.
The notion of `position: absolute; left: -4000px;` had occurred to me, but it seemed to effect much the same as `visibility: hidden;`, and I have an innate dislike of `position: absolute;` for whatever reason...so I went with the option that was less objectionable to me at the time of writing... =)
I appreciate your comment about the tabindex, though, that was something that I never gave any thought to, at all.
I'm sorry if I sound somewhat snippy, it's late, I'm tired...yadda-yadda; I've been testing in various browsers since my return home and it seems that Firefox 3.5+ gives the same behaviour -reporting 'button one' on both Windows XP and Ubuntu 9.10, all Webkit browsers (Midori, Epiphany, Safari and Chrome) fail and report 'button two.'
So it's definitely a fail-worthy idea to display: none; the submit button. Whereas the visibility:hidden at least works.
By which I mean that hitting 'enter' triggered the form-submit event, or the click event of the first submit button of the form, regardless of whether that first submit was `display: none;` or `visibility: hidden`.
Please be aware that my jQuery skills are limited, so the tests employed (I ran only at a time to try and prevent conflicts occurring in execution, commenting out the one I didn't run at that time, both are presented -one, clearly, commented out) may well be insufficient and non-representative.
What does the first button do? If you just need a button to attached a js listener to, which doesn't submit, use
<button type="button" id="myButton">Text Here</button>
Is it an option to use absolute positioning on your less important submit button and have it appear after your primary submit button in the HTML? So, you can have:
<form>
<p>
Stuff
<input type="submit" value="This is my main submit button" />
<input type="submit" value="This is my secondary submit button" style="position: absolute; left: 0px; top: 0px; />
</p>
</form>
Your secondary submit button will appear first on the screen, but the primary submit button should take precedence when enter is pressed.
<script>
$(function(){
$('#button-new-captcha').click(function(){
$('input[name=button-submit]').prop('name', 'button-new-captcha').click();
});
});
</script>
<div class="buttons">
<a class="btn btn-cancel" href="/login">Cancel</a>
<a class="btn btn-default" href="#" id="button-new-captcha">New Image</a>
<input type="submit" name="button-submit" class="btn btn-default" value="Send Username">
</div>
Another workaround is to create an extra non-functional submit input at the very beginning of the form and hide it using opacity:
<input type="submit" value="" onclick="return false;" style="opacity: 0">
The button will still be rendered on the page, albeit transparent, so you will have to provide some real estate for it. Alternatively you could play with pushing it behind another element using z-index or rendering it outside the page as others have suggested here before.
What you gain with onclick="return false;" is that the form will not be submitted when hitting "Enter" anymore; no page reload, either.