Develop Reference

Which button type should be used for HTML dialog cancel buttons?

I am writing HTML dialog forms, with data-entry fields, where a "Cancel" button can be clicked to exit the modal dialog. Which one of the "submit", "reset", and "button" <input> types is most appropriate for a cancel button and why?
Research
The MDN page on <dialog> elements provides an example where <button> (without type attributes) is used for both cancel and confirm buttons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#Advanced_example
The MDN page on the HTMLDialogElement.showModal() function provides a similar example where <button type="reset"> is used for the cancel button: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal
I've also read around online, including some answers on this site, where <input type="button"> was used in recommendation examples.
To summarize my understanding:
Omitted type or type="button" buttons do not imply that the button will submit a valid form nor' that the form will explicitly reset your data entries. However they require you to write more JavaScript to close the dialog unlike type="submit". The markup also doesn't indicate that this is one of the ways of closing the dialog form.
Buttons with type="reset" imply that the data entries will be cleared and event.preventDefault() is required to contradict the markup. However, resetting is not ideal (https://ux.stackexchange.com/a/42773), you still need to write JavaScript to close the dialog, and the button's function contradicts the markup due to the form being closed with JavaScript or if you decide to prevent the data reset.
Buttons with type="submit" may imply being alternative means of closing/completing the dialog and the dialog is automatically closed when submit-type buttons are clicked. You only need JavaScript to listen for close events and to check the <dialog>'s returnValue attribute to see if cancelling happened. However, the markup / submit-type may imply that the form will be submitted with valid entries instead of cancelling.
Considering this, if my understanding is valid (?), and any other reasons that I might be oblivious to (concerning what markup is most readable and presents the most elegant use of JavaScript), which approach should be taken for Cancel buttons in dialog forms?
Sample:
<dialog id="forCloseEventListener">
<form method="dialog">
<input type="text" name="data-entry" placeholder="Enter your post code">
<input type="??" value="Cancel">
<input type="submit" value="OK">
</form>
</dialog>
P.S.: I've noticed there's an experimental HTMLDialogElement 'cancel' event, but it's subject to change and its MDN page seems inaccurate or incomplete.

Type type="button" is the best choice. You can write a function and use in the onclick event to exit the modal as you want.
If you use submit or reset you will need to prevent their default behavior, using event.preventDefault().

onkeyup vs onchange for number type input

I'm having a small issue dealing with number inputs on forms, specifically when trying to call a validation js function when the user modifies them.
<input type="number" name="somenumber" onkeyup="validateForm()" />
This method only calls if the user types a number in the box and is ignored when the user uses the up/down buttons supplied by the browser. So it isn't fully effective.
<input type="number" name="somenumber" onchange="validateForm()" />
This method works great for users using the up/down buttons, but if they type a number into box, it won't execute until they move to another element or click outside the box. It's not the end of the world, but I'd like users to be able to type in the box and immediately be able to click the currently disabled submit button, rather than having to click elsewhere to enable the button.
<input type="number" name="somenumber" onchange="validateForm()" onkeyup="validateForm()" />
So to get the best possible user experience, I'm doing this. The problem is that the function often gets called twice. It works fine I guess. The users don't even notice it's running twice. Still, it seems like I'm missing something and there must be some "right" way to deal with this.
Is there? Or is this just one of those things we have to work around?

You could use the oninput event.
function validateForm() {
console.log('changed');
}
<input type="number" name="somenumber" oninput="validateForm()" />

Unable to click a label programatically with javascript

I have a js problem. This site: http://befwifi.bobevans.com/Mobile.aspx (not my site)
How can you simulate a click on the “I AGREE TO THE TERMS” label with js programmatically?
The simulated click must do exactly what a real click does. ie Make the box look checked, without refreshing the page.
For example none of these work!
document.getElementsByTagName("label")[0].click()
$(document.getElementsByTagName("label")[0]).click()
$(document.getElementsByTagName("label")[0]).trigger("click")
(Site uses jquery)
Purpose:
I am creating a generic js script to record all clicks and inputs on a page. You can then replay those events when you land on the page again. I got stumped by this page because although i can easily record the onclick to the label, when i replay the click() programmatically it doesn't do the same as when i click on the element myself.

Try clicking the checkbox instead of the label. This will do what you want.
document.getElementById("chkAcceptTerms").click();

You need to raise click on the related input, e.g. with an ID selector;
$("#" + $("label").attr("for")).click();

the webpage uses jquery mobile
<input id="chkAcceptTerms" type="checkbox" name="chkAcceptTerms"/>
<label for="chkAcceptTerms">I AGREE TO THE TERMS</label>
to simulate click event try this:
$("#chkAcceptTerms").click();

javascript form textbox post js and html

I have a textbox somewhat like the main google search textbox. When you start typing, the javascript triggers a php script that offers suggestions that you can click on . That part works fine. However, I also want the user to be able to enter text and then just submit it--analagous to rejecting Google's hints and typin in your own search term. Right now, I am trying to do this in html and it is not working. Here is my code:
<form action="mail.php" method="post"><input type="text" name="maddress" size="30" onkeyup="showResult(this.value)"><input type="submit" name="submit" value="Email"></form>
Basically, the javascript within the onkeyup works fine. However, the form is not posting the value in the textbox" to the php script. Perhaps I have a typo somewhat but I can't find it. or maybe the onkeyup is preventing the form from posting...
Would appreciate any suggestions.

showResult() should explicitly return true (or in any case, something non-falsy). Returning false (or a falsy value) from an event handler prevents the default action, in this case, posting the form.

I dont know if this is what you're looking for but if you use the concept of this:
<script type="text/javascript">
function insertText(val,e){
document.getElementById(e).innerHTML+=val;
}
</script>
<textarea id="textIns"></textarea><br />
Insert 'Hello'<br />Insert 'GoodBye'
You can change the 'hello' and 'goodbye' with vars from your php script or where ever you get the items from and it should insert it and allow you to post it.
So just insert this into your function and then it should work. I tested it by adding the textarea in the code to a form and echoing it int he php and i got exactly what was added by the javascript... hope it works. Sorry if it wasn't exactly what you were looking for. The question wasn't to easy to understand because I couldn't see the rest of your source.

One form, multiple submit buttons and submit links [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Multiple submit buttons in an HTML form
I have web form with multiple submit buttons. To determine which button was pressed, each has a different name, like so:
<input type="submit" name="foo" value="Foo Foo">
On the form there are also normal links that act as submit buttons, like so:
<a href="" onclick="parentNode.submit();return false;">
Bar
</a>
How do I also distinguish between the links being used as submit buttons?
I am not sure if this is relevant:
Here is the start of the form
<form action="foobar" method="post" enctype="multipart/form-data">
I am using Flask (a micro-framework based on Werkzeug) which uses Python (2.6 in this case).

My first question would be to ask if you need that many distinct ways to submit the same form? This sounds like your design should be changed up to make it more simplistic for the user, which will in turn solve your issue.
If you absolutely HAVE to have all the different submit buttons/links and need to know which one was pressed, use something like:
<input type="hidden" id="submitClicked" />
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='linkName';return true;" id="linkName">Submit</input>
NOTE: I didn't test this code, it was just off the top of my head, and thus some modification may be needed.

You can create a hidden input called submitSource, and set the value of that as you wish from the link or button onclick event handlers. Then you can check that value server-side.

Another solution you should consider: Use <ìnput type="submit"> for "submit links" just like the normal submit buttons and use CSS to style them to look like links.
This has the two huge advantages that it will (a) work with out any extra code that could potentiality break and will (b) work on every single browser on this world.

RedFilter's answer is certainly a solid way to go, but here's another option for you:
I normally use one name for all my submit buttons ("command" or similar), since of course only one of them is ever sent. Then my server-side code just looks at the value of that field to figure out what to do.
Your submit links could append a "command" parameter to the form's action, e.g.:
<a href="" onclick="parentNode.action += "?command=bar"; parentNode.submit(); return false;">
Even if you don't want to use just one name, the concept still holds, e.g.:
<a href="" onclick="parentNode.action += "?bar=bar+bar"; parentNode.submit(); return false;">
Of course, if you do either of the above and your form uses POST rather than GET (as most forms do), then whether you get the parameter value from the same source on the server will depend on what server-side mechanism you're using. For instance, Java's ServletRequest#getParameter method doesn't care, it looks in both the GET and POST data, whereas with some other technologies more of a distinction is drawn. Not a problem, you just have to be sure you're getting from the right place.

I would recommend instead of using onclick="parentNode.submit();return false;" that you create a js function that all links call to perform the submit. Then you could use a hidden field or get variable or whatever to transfer the link's id.
function submitMe(linkID)
{
document.getElementById("hfWhichButtonSubmittedMe").value = linkID;
document.getElementById(linkID).parentNode.submit();
return false;
}
...
blah blah