I have a page with a form and buttons that are separate like so:
<form
method="post"
action="index.php?Page=team_schedule&week_commencing=2018-01-29"
name="apply_filter"
>
// Select box with onchange submit
</form>
<a href="index.php?Page=team_schedule&week_commencing=2018-02-05">
// Button
</a>
When I click the button it takes the entire action value from the form instead. I have tried disabling the JavaScript on the page but it makes no difference.
Why is the wrong parameter being passed when the button is clicked?
Ok I figured it out with the help of the Validity plugin and view source.
I was missing a </form> closing element. The Chrome DOM adds this in retrospectively, but doesn't change the behaviour to match the now closed form. <button> elements have a default type of submit so it was submitting the unclosed form and ignoring the anchor element that was wrapping it.
Related
This question already has answers here:
Difference between <input type='button' /> and <input type='submit' />
(4 answers)
Closed 1 year ago.
Is there a difference between a button with type="button" vs type="submit"? Are there functional differences, or is it just a descriptive name for easier code reading?
Is this different than input?
From MDN:
type
The type of the button. Possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
As for the difference between button and input:
A button can have a separate value as data, while for an input the data and button text are always the same:
<input type="button" value="Button Text"> <!-- Form data will be "Button Text" -->
<button type="button" value="Data">Button Text</button>
A button can have HTML content (e.g. images), while an input can only have text.
A button may be easier to tell apart from other input controls (like text fields) in CSS. Note backwards browser compatibility.
input {
}
button { /* Always works */
}
input[type=button] { /* Not supported in IE < 7 */
}
A button with type "button" won't submit a form but one with no type or type=submit (the default) will. Buttons with type=submit are nearly the same as inputs with type=submit but buttons are able to contain HTML content.
<input type="button" />
buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.
<input type="submit">
buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.
when form submit by below code, We should use type=button instead of type=submit to prevent form submit twice.
#using (Html.BeginForm("View", "Controller", FormMethod.Post, new { id = "signupform" }))
{
//Form elements
}
Buttons can be stylized much better than inputs can be used for anchor tags(links).
Images
Content etc.
Inputs can achieve the same functionality as buttons but uglier design.
Let's say inputs are oldschool, buttons are cooler.
They have different default behaviour regarding submitting form data to the server
The button has an attribute named "type" and can contain those values:
submit: Has default behaviour of submitting the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
<button type="button"></button> buttons will not submit a form - they don't do anything by default. Button won't submit form on its own.It is a simple button which is used to perform some operation by using javascript whereas Submit is a kind of button which by default submit the form whenever user clicks on submit button.
I've run into this html:
<button type="button></button>
What's the difference between the html above and this:
<button></button>
From the MDN page on the <button> tag:
For the type attribute of the <button> tag, the possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
So, if the button is inside a <form> and there is no type specified, it defaults to a submit button. So, if you want it to be just a normal button that does not default to a submit button, then you specify type="button".
1.only button has type = "submit" on it by default which on click submits form .
2.button type="button" is only clickable and does not have any event handler on it.You can assign one if you want
I have a little <form> in HTML, (for logging into something), but the page with the form in in an <iframe> …
When you click the submit button (<input type="submit" value="submit">) , it should open the page where you are logged in in the parent page… How can i do this ?
Maybe possible by using instead of <input> just <a> , if that's possible ?
I have a form with some
<button>
elements and a normal
<input type="submit">
button to submit the form.
However, when I press Enter when I'm in a textfield, the form does not get submitted but much rather the first Element is "pressed".
How can I change this behavior?
I would recommend changing the <button> tag and turning it into an <input type="button" /> tag. This should force the form to submit the way you want.
You can use javascript to capture that the Enter key was pressed and submit the form.
See this example.
For a complete answer, could you please post your HTML?
as far as I know there are three methods to submit an HTML form without JS or keyboard:
1. input type=submit
2. button tag
3. input type=image
Is there another way to create an element submitting the form on being pressed?
Is it correct to handle button tag (type=submit) same as input type=submit (I mean, if we discard the fact button can contain inner html, we can simply replace button with input type="submit" and the form will be sent correctly)?
Is adding name.x and name.y the only difference when using input type=image?
Not that I know of, those should be the only pure html ways to submit the form other than directly invoking the submit method which is internal Javascript, but that is what the submit button does anyway.
The button element has issues in Internet Explorer regarding which
value it passes, I do not recommend
the use of it.
Yes, they're pretty much the same
As far as I know input type=image is exactly the same except that it
sends those extra coordinate
parameters which you can ignore on the
server-side.
With JavaScript, you can call the form's submit method. However, this should be avoided as it will not work if the user has JavaScript disabled.
No, because a button tag can be given a value separate from the text displayed on the button, not to mention the <button> tag's ability to inline HTML. (For example <button type="submit"><img src="submit.png" alt="Submit"></button>).
Yes, the main feature of <input type="image"> is the addition of the x and y coordinates.
You can use JavaScript to simulate it. I'd take an <input type="submit"> and replace it with the element that you'd like to submit a form with, so it's still accessible for users without JavaScript.
<input type="submit" id="submit-button" value="submit" />
Then in JavaScript (using jQuery in this example):
$('#submit-button').remove().after('Submit form');
$('#submit-link').click( function(event){
event.preventDefault();
$('#submit-link').closest('form').submit();
});