This is a very rudimentary question, but I am sure someone out there knows why. In HTML, when I make a button element by itself, and do not give it and onclick and no jQuery .click() the button will just do nothing. Perfect. But when I do this and but the button inside a <form> element, it tries to send GET data of all the form elements to the root address of my website? Why is it doing that? I didn't make it a submit button or even define a method or action on that form??
Thanks for the info in advance!
** EDIT **
This is what I did to fix the problem. For buttons inside the <form>, use:
<button type="button"></button>
And it will not do anything by default.
As can be seen at the respective MDN entry, the default value for the type property of a button element is submit. So if you omit it or don't change it to button or reset, the default behaviour will kick in and the form gets submitted.
<form action="">
<button type="button">Nothing will happen</button>
<button>Form gets submitted</button>
</form>
I didn't make it a submit button
<button> elements have a type attribute. The default value is submit. Set type="button" if you don't want it to submit a form.
or even define a method
method defaults to GET
or location on that form??
action defaults to the current URI.
It was designed that way because you sometimes need to know WHICH button was pressed on the server-side. If you want button functionality without a button, use a styled A-tag.
Buttons are treated as submit controls in forms, not sure why.
The reason it gets posted to your root is because you didn't specify an action and so the default is used.
The reason it used GET is because that's the default method.
To prevent it happening, add return false; to the end of your button's onclick.
Related
How to semantically structure HTML to delete an item?
I know that HTML's <form method="..."> only permits "POST" and "GET". But that doesn't matter to me, since all forms are submitted via AJAX. ( Btw. I found some old draft that requests "PUT" and "DELETE" in forms: http://amundsen.com/examples/put-delete-forms/ ). This question is just about the HTML semantics.
In some rare cases there are forms that use an input field, in order to let the user confirm his delete action (like GitHubs "Delete this Repository").
But what about having a form that contains no inputs at all, but only a single submit button?
Bonus question: Would it make any difference if it's a real delete vs. a soft delete (a.k.a. "move to trash")?
If you're unable to use HTML <form> methods and must rely on javascript to send information to the server, in this specific case, a <button> element by itself (without a wrapping form element) is most appropriate. Buttons don't have to be wrapped in forms to be used to trigger actions.
The HTML <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
— Mozilla HTML Elements Reference: Button Element
A standalone button should be used regardless of if the button action is a "soft" or "hard" delete, but you should use text or another method to make sure users understand which action is being performed.
<button class="soft-delete" type="button" data-item="1234">Move to Trash</button>
<button class="hard-delete" type="button" data-item="1234">Delete Forever</button>
I come across two following code snippets :
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
<p id="demo">Click the button to change the layout of this paragraph</p>
<button onclick="myFunction()">Click Me!</button>
<h1>My First JavaScript</h1>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button>
<p id="demo"></p>
I am not able to understand why the different type="button" attribute has been added in second code snippet?
What's the difference between two buttons?
In your examples the addition of the type="button" makes no difference whatsoever (remove it and you'll see).
Typically you would specify the type of your button if it is being used in a form, as the default type of <button> is submit, and clicking it would cause a <form> to be submitted, and typically either reload the current page or load a new page.
By specifying the type as button instead of the default submit, you prevent that behavior.
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
It has so many Attributes and type is one of them and this type has 3 values:
button (Normal button)
reset (to handle reset action, specially for form)
submit (to handle form submit)
To know other properties you can read:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
https://www.w3schools.com/tags/tag_button.asp
The attribute type decide the style of <Button>. It's default value is button in Internet Explorer.However, in other browser,it's default value is submit even in standard of W3C.
So you need to define the type of button always.
There are three types of buttons:
submit — Submits the current form data. (This is default.)
reset — Resets data in the current form.
button — Just a button. Its effects must be controlled by something else (that is, with JavaScript).
Button attribute is not that big deal, because it changes nothing in your code.
The only difference in your two code versions are writing the whole code after the "onclick" attribute (code2) and writing the function name after the "onlick" attribute (code1).
You can read about the button attributes and differences between input and button with the same attributes on this site http://html.com/attributes/button-type/
I hope it will help you a lot.
Writing <button type="button"> defines the button as a clickable button.
There is no big difference with <button>, but it is more safe to put a type attribute to the button element because some browsers may use different default types for the <button> element, which could lead to bugs.
How to make the html input field allow to be blank, when i click the submit button on the form view?
the idea is when I click the submit button, the input is a must to key in something else the behind code is unable to run, I am using the asp.net and the button is the asp button not html button
http://s15.postimg.org/wtl7xtuyx/myinputpic.png
I want to allow the new password can be blank
If clearing fields is what you want, use .reset() method.
document.getElementById("YourFormName").reset();
A working fiddle here:
https://jsfiddle.net/4fpk2z9o/
I may comprehend it wrongly as I do not really understand what do you want.
Update (To disable html 5 form validation) :
Add novalidate='' or <form action="yourform.asp" novalidate> to your form.
In my AngularJS project I have an account details page where you can change your personal account information. This page allows for multiple phone numbers and e-mailaddresses to be supplied. Using mouse input (or tabbing to buttons and pressing them with space bar) works perfectly, however I'd like to add the convenience of the enter key pressing the 'logical' buttons.
My form looks like (accidentally forgot to translate a few items):
A simplified version of the HTML for the form can be found on PasteBin, I've mainly removed the directives for managing the lists.
All buttons are <button> elements except for the cancel button which an <a> to the previous page, and the submit button is <button type="submit">.
When selecting any text box and pressing enter, the first (non-disabled) <button> element is 'clicked'. Meaning if I would change the last name, hit enter, the first phone number would be removed.
When you're in a new entry of phone numbers or e-mailaddresses (the row with the green + button) it should click that button, and if it's disabled do nothing.
When you're in any other text box on the form it should hit the save button, and also if the save button's disabled, do nothing.
Both buttons will be disabled based on form validation.
There'd be no trouble in changing the type of a button from button to submit if that'd help.
I would preferably have an all HTML solution, using just semantics, but I doubt that's really possible. So the logical alternative would be to use an AngularJS directive.
Please do not provide a jQuery or plain JavaScript solution relying on IDs or something like that. I don't want to hack my way around AngularJS, rather embrace it.
In the meantime I've worked on a directive that allows me to declare what I've called 'submit scopes'.
In essence you have actions (inputs) and targets (buttons), they're bound through a service by a key you can assign in the template. To avoid keys from clashing and from simple annoying work you can create a submit-scope which will cause it's children to prepend a unique key to the value they're accessing.
Within a submit-scope you can still override an action to use a global key instead by setting the attribute global-submit="true".
Example code:
<div submit-scope>
<input type="text" submit-action />
<button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>
You can view the entire source code and a slightly larger example on Plnkr.
I just tried to replace
<button>Cancel</button>
with
<input type="button" value="Cancel">
and it seems to work correctly...
I have a form in which there is a reset button and three list box(Select Box) and submit button.
In which i have reset button like.
<s:reset name="reset" type="reset" id="reset" ></s:reset>
when i click on this before submit the page. it will reset the list box means it will select the default value of 'Select' Index = -1 means working fine. but after i submit the page. this will come to the same page with latest records. after that when i click the reset button. it will not give any response to that page. it should be change the default value of list box means "select" but it will select the last value of the list box (The value i selected before save button clicked). i change it to simple Html reset button also but still not get success. can you please help me abt this solution.
Thanks in Adv
Dhrumil Shah
the reset functionality only works in the current page stage (ie., it will reset the page to whatever state the page was in when it was loaded). since http is a stateless protocol it can't remember what was the value of the select box before the page was reloaded or submitted.
you can use javascript (jquery preferably) to accomplish things like this...
$("select").val(-1);// this would reset all combo boxes in the page to value -1
$(":text").val("");// this would reset all textboxes in the page to blank
$("textarea").val("");// this would reset all textarea in the page to blank
you can find more about jquery here.enter link description here
The <s:reset /> will renders as html <input type="reset"...>, of course it will not reset the submitted form.
#Dhrumil Shah
In which i have reset button like.
<s:reset name="reset" type="reset" id="reset" ></s:reset>
when i click on this before submit the page
The type is type of submit to use, valid values are input, button and image, default is input
You should use <s:a> to reset the form (reload the page). e.g.
<s:a><button>Reset</button></s:a>
Or
<s:a cssClass="button-like-css">Reset</s:a>