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...
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 have 4 links. Previously implemented as A tags.
My goal is to switch the request method (GET) with POST. Everything else have to remain the same!
The problem - it must be implemented using pure HTML - to be exact - no ajax and no window.open().
My solution is half way there. Hopefully to get a creative second half from you (impossible is also an answer)
Here is the (simplified) HTML:
<form
id = "resultsForm"
target="_blank"
action="http://example.com"
method="post"
>
<input type="hidden" name="data" value="someData">
<button type="submit" value="submit">
<p class="contextual"> title </p>
<span></span>
</button>
</form>
Now, it looks and feels like the old implementation and also sends POST requests
But - contrary to a link - a button can't be middle clicked or opened in new window when right clicking on it (by default...)
Can I somehow wrap it in an A tag to achieve the explained behavior without using js events or be conflicted with form subbmission?
Your help is really appreciated
No, this is impossible.
Anchor elements cannot contain interactive elements such as button elements.
Forms should be posted to the target window, so a normal click on the submit button, by virtue of the _blank value, should open an unnamed browsing context (a new window or tab).
Users should be accustomed to not middle-clicking on buttons, although there is a habit of developers to style links to look like buttons, throwing off users' expectations (end rant:)).
I want to track clicks on the following button/link with Google Tag Manager. I created a trigger in Google Tag Manager that triggers when the element_id = 100. This works fine, except that when I click exactly on the text, it doesn't do anything, the link looks like a button, with the text in the middle of it. I can't change anything to the html or css, otherwise I can think of multiple things, so I need to find a solution without changing the html. Also, the 'myclass' class and the 'label' class get used in other elements.
<a class="myclass" id="100" href="http://www.url.com">
<span class="label">Text</span>
</a>
Anyone an idea?
Thanks a lot,
The following workaround worked:
Create trigger when element text contains "Text". This will trigger events on the button and the label on the button, of all buttons with "Text" as label.
Create tag for that trigger that checks with simple javascript if either the id of the current element = 100, which will happen when you click the button but not the label, or that the id of the parent = 100, which happens when you click the label. You can get the element that triggered the tag using the built-in variable "Click Element". Which you need to access the parent element.
Technically, you shouldn't have a CSS ID that starts with (or is) a number, so not sure if your code example is accurate or not. Whatever the case, you're probably better off using "matches CSS selector" so that you don't need to use any custom JS.
If indeed your HTML uses id="100", then the above will work. If it's anything else that doesn't start with a number, then you can use
#whatever > span
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.
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>