This may be too short and sweet, but this is all I have to ask. When I have two buttons in HTML, I use one button for form submission, and another to trigger a javascript event. However, what is happening is that both buttons perform form submits. I want to use the other button for submits without making it unusable by javascript. WHat are the possible methods I can do this?
To expand on what Saravanan Sachi and aladin8848 already said:
If you are using <input> for your buttons, type="submit" will always submit your form and type="button" will be a plain, non-form submitting button.
If though you are using <button></button> tags for your buttons (as I tend to do), they have a 'default' type of submit, so you have to explicitly set their type to button ex. <button type="button">Do JS click things</button> to prevent it from submitting your form.
Use
<input type="submit">
to submit the form and
<input type="button">
to call JavaScript method
Use
<input type='button' onclick='....'>
instead of what you are probably using
<input type='submit'>
you can do the next:
var buttonList = document.getElelmentsByTagName('button');
buttonList[2].addEventListener('click', function(event){
event.preventDefault();
this.removeEventListener("click", this, false);
//do something, like add your own event
});
you should be more specific getting the buttons, and i don't test the code, but the idea is that, remove events and default behaviour of the second button.
i hope this helps you.
I need to put an image that acts as a button which takes you back one screen. I've written the following for going back to the previous screen:
<input type="image" src="../../img/button_cancel_gray.gif" type="button" onclick="history.go(-1);"/>
Which works, except it's also submitting the form. I need it to prevent submitting the form.
For an alternative, I've tried to wrap the image inside a button.
This one works too but now it shows the default border of the button outside the image, which makes it look ugly.
So how do you make an image act as a button that runs onclick but not submit the form?
Make the onclick event return false, which will prevent form from submitting.
onclick="history.go(-1);return false;"
Hi I was trying to make a textfield dynamic. This is my code
<input type="text" id="test1" value ="dynamic" onfocus="this.disabled=true" onblur="this.disabled=false">
<input type="text" id="test2">
so fields get disabled perfectly but doesnt get enabled on blur. If any one here can solve my problem that would be great.
Perhaps in this situation it is better to make the field readonly and add some custom class to make it look like it is disabled.
Since disabled element are well... disabled :)
EDIT
I've done some testing and it gets enabled again on blur!
http://jsfiddle.net/dfhHz/
You still need to click outside the input to trigger the blur ofcourse
EDIT2
WHat would you like to achieve. Since this functionality looks a bit strange (disable on focus and enable on blur) to me :)
Why don't you use onmouseover and onmouseout events on your text field instead ?
<input type="text" id="test1" value="dynamic" onmouseover="this.disabled=true" onmouseout="this.disabled=false">
I have a page with two buttons. One is a <button> element and the other is a <input type="submit">. The buttons appear on the page in that order. If I'm in a text field anywhere in the form and press <Enter>, the button element's click event is triggered. I assume that's because the button element sits first.
I can't find anything that looks like a reliable way of setting the default button, nor do I necessarily want to at this point. In the absence of anything better, I've captured a keypress anywhere on the form and, if it was the <Enter> key that was pressed, I'm just negating it:
$('form').keypress( function( e ) {
var code = e.keyCode || e.which;
if( code === 13 ) {
e.preventDefault();
return false;
}
})
As far as I can tell so far, it seems to be working, but it feels incredibly ham-fisted.
Does anyone know of a more sophisticated technique for doing this?
Similarly, are there any pitfalls to this solution that I'm just not aware of?
Thanks.
Using
<button type="button">Whatever</button>
should do the trick.
The reason is because a button inside a form has its type implicitly set to submit. As zzzzBoz says, the Spec says that the first button or input with type="submit" is what is triggered in this situation. If you specifically set type="button", then it's removed from consideration by the browser.
It is important to read the HTML specifications to truly understand what behavior is to be expected:
The HTML5 spec explicitly states what happens in implicit submissions:
A form element's default button is the first submit button in tree order whose form owner is that form element.
If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.
This was not made explicit in the HTML4 spec, however browsers have already been implementing what is described in the HTML5 spec (which is why it's included explicitly).
Edit to add:
The simplest answer I can think of is to put your submit button as the first [type="submit"] item in the form, add padding to the bottom of the form with css, and absolutely position the submit button at the bottom where you'd like it.
Where ever you use a <button> element by default it considers that button type="submit" so if you define the button type="button" then it won't consider that <button> as submit button.
I don't think you need javascript or CSS to fix this.
According to the html 5 spec for buttons a button with no type attribute is treated the same as a button with its type set to "submit", i.e. as a button for submitting its containing form. Setting the button's type to "button" should prevent the behaviour you're seeing.
I'm not sure about browser support for this, but the same behaviour was specified in the html 4.01 spec for buttons so I expect it's pretty good.
By pressing 'Enter' on focused <input type="text"> you trigger 'click' event on the first positioned element: <button> or <input type="submit">. If you press 'Enter' in <textarea>, you just make a new text line.
See the example here.
Your code prevents to make a new text line in <textarea>, so you have to catch key press only for <input type="text">.
But why do you need to press Enter in text field? If you want to submit form by pressing 'Enter', but the <button> must stay the first in the layout, just play with the markup: put the <input type="submit"> code before the <button> and use CSS to save the layout you need.
Catching 'Enter' and saving markup:
$('input[type="text"]').keypress(function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
// also submit by pressing Enter:
$("form").submit();
}
});
Pressing enter in a form's text field will, by default, submit the form. If you don't want it to work that way you have to capture the enter key press and consume it like you've done. There is no way around this. It will work this way even if there is no button present in the form.
You can use javascript to block form submission until the appropriate time. A very crude example:
<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">
<input type='text' name='txtTest' />
<input type='button' value='Submit'
onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />
</form>
Pressing enter will still trigger the form to submit, but the javascript will keep it from actually submitting, until you actually press the button.
Dom example
<button onclick="anotherFoo()"> Add new row</button>
<input type="text" name="xxx" onclick="foo(event)">
javascript
function foo(event){
if(event.which == 13 || event.keyCode == 13) // for crossbrowser
{
event.preventDefault(); // this code prevents other buttons triggers use this
// do stuff
}
}
function anotherFoo(){
// stuffs.
}
if you don't use preventDefault(), other buttons will triggered.
I would do it like the following: In the handler for the onclick event of the button (not submit) check the event object's keycode. If it is "enter" I would return false.
My situation has two Submit buttons within the form element: Update and Delete. The Delete button deletes an image and the Update button updates the database with the text fields in the form.
Because the Delete button was first in the form, it was the default button on Enter key. Not what I wanted. The user would expect to be able to hit Enter after changing some text fields.
I found my answer to setting the default button here:
<form action="/action_page.php" method="get" id="form1">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
Without using any script, I defined the form that each button belongs to using the <button> form="bla" attribute. I set the Delete button to a form that doesn't exist and set the Update button I wanted to trigger on the Enter key to the form that the user would be in when entering text.
This is the only thing that has worked for me so far.
You can do something like this.
bind your event into a common function and call the event either with keypress or button click.
for example.
function callME(event){
alert('Hi');
}
$('button').on("click",callME);
$('input ').keypress(function(event){
if (event.which == 13) {
callME(event);
}
});
I added a button of type "submit" as first element of the form and made it invisible (width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Works like a refresh of the site, i.e. I don't do anything when the button is pressed except that the site is loaded again. For me works fine...
I'm using an image as the submit button for a search form, i.e.:
<input id="search" type="image" alt="Search" src="/images/searchButton.png" name=""/>
This has an unfortunate side effect in Chrome and Firefox--the parameters &x=0&y=0 appear on the end of the search results URL, for example if I search for "food" I am directed to the page:
main/search?search=food&x=0&y=0
Some hunting around online has indicated that this is standard behavior when you use an image to submit a form.
I noticed that Digg.com uses an image to submit its search form but avoids this behavior. I can't figure out how they do it. They don't seem to be using Javascript to submit the form. Can anyone tell?
Digg is using JavaScript to do that. Try submitting the search form with JavaScript disabled in your browser.
Instead of using an <input type="image">, you could use a <button> element:
<button type="submit" style="border: 0; background: transparent">
<img src="image.png"></img>
</button>
Those parameters denote the location in which the click was exercised upon the image, which is the default behavior of most if not all browsers when it comes to using images as submit buttons. You can use a workaround that basically goes through JavaScript to submit your form, much like what you see in watain's example. Or you can create a submit button thats not a form element, by utilizing form.submit() as the action attached to that image.
You could use Javascript to submit the form like that, it's still the easiest way:
<script>
yourForm.onSubmit = function() {
location.href = 'main/search?search=' + encodeURIComponent(yourForm.elements['query'].value);
return false;
}
</script>
Unfortunately I don't know how they do it without Javascript.
EDIT: Btw you could also use a simple which will submit the form when it gets clicked.