Sorry if this seems redundant. I have read through quite a few posts and cannot seem to figure out how to accomplish this. I need an element that behaves like a button but I thought to use a css class object instead. I have found a number of references showing how to do this by making href="#" and adding javascript command.
<p><input name="Test" type="Button" value="Click" /></p>
However, due to the server side software I am using I need to exactly duplicate the behavior of the button in order to make it submit my form.
I am guessing it is something obvious like:
<p><a class="button" href="#" onclick="submit()">Click</a></p>
Thanks for any help you can provide!
You have to reference to the form element, and then call the submit:
<p><a class="button" href="#" onclick="document.getElementById('myFormId').submit()">Click</a></p>
Though you should not be using inline event delegation:
HTML:
<p><a class="button" href="#" id="submit-anchor">Click</a></p>
JS:
document.getElementById("submit-anchor").addEventListener("click", function() {
document.getElementById('myFormId').submit();
});
This will do the job:
<a class="button" href="#" onclick="document.forms[0].submit();">Click</a>
If you have one form in the document, else change 0 accordingly.
OR
<a class="button" href="#" onclick="document.forms['formName'].submit();">Click</a>
Uses form name.
OR
<a class="button" href="#" onclick="document.getElementById('formID').submit();">Click</a>
Uses form id.
you have to use "form.submit();"
you should check out this question: Use a normal link to submit a form
Related
I have a link that opens a small popup (not a new tab) to a page.
I would like to integrate this function into a button. Unfortunately this doesn't work as hoped.
Good example link:
<a href='#' onclick='window.open **
("https://google.com","mywindow",
"menubar=1,resizable=1,width=500,height=500")'>
Link</a>
Current button that should do the same:
<form>
<input class="btnstylega" onclick="window.location.href='https://google.com'" type="button" value="Link" />
</form>
why you not try:
<form><input class="btnstylega" onclick="window.open('https://google.com','mywindow',
'menubar=1,resizable=1,width=500,height=500')"
type="button" value="Neue Versicherung hinzufügen" /></form>
Use _blank with the target attribute; this will open a new tab:
<form>
<input class="btnstylega" type="button" value="Neue Versicherung hinzufügen" target="_blank" />
</form>
Or if you want to open a new window, use the onClick attribute:
<button class="button" onClick="window.open('http://www.example.com');">
<span class="icon">Open</span>
</button>
Here, do NOT forget the quotation marks around the "window.open('http://www.example.com');".
This is happening because you are setting the window location in one and not creating a new window.
This amended code should work as intended:
<form><input class="btnstylega"
onclick="window.open('https://google.com','mywindow',
'menubar=1,resizable=1,width=500,height=500')"
type="button" value="Link" /></form>
I use the program NVDA to test my website and make a website accessible to all people. Recently I saw on MDN Web docs an attribute allowing me to use a instead of button. It is role="button".
MDN and Bootstrap 4 Doc says:
these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.
<a class="btn btn-primary" href="#"> Anchor without ROLE </a>
<a class="btn btn-primary" href="#" role="button"> Anchor with ROLE </a>
<button class="btn btn-primary" type="button"> Just a Button </button>
I tried to use NVDA and I press B (a shortcut to find buttons in website), and the only button that it found is the button with <button> tag. What role="button" is being used? What is the correct way?
Ref: Bootstrap V4 and MDN Docs
I tried to use NVDA and I press B (a shortcut to find buttons in website), and the only button that it found is the button with tag. What role="button" is being used? What is the correct way?
Browser support and behaviour for ARIA roles can vary depending on browser/screenreader combination.
You should use the native <button> element.
Remember the first and second rules of ARIA:
First rule:
If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
Second Rule:
Do not change native semantics, unless you really have to.
<a> tags should go to a link.
You should use <div>, <span>, <button>, or <input type="button">, <input type="submit"> or <input type="reset"> as a button.
Reference: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
Please help,
I am getting error via http://validator.w3.org/ while validating my html5 template. I get the message "The element button must not appear as a descendant of the a element.". I can't understand this. Could anyone help me to solve this?
Here is my code:
<div class="post-response btn-group btn-group-lg">
<button type="button" class="btn btn-default"><i class="fa fa-comment"> 5 Comments</i></button>
<button type="button" class="btn btn-default"><i class="fa fa-heart"> 5 Likes</i></button>
</div>
The usual error from the W3C validator is:
The element button must not appear as a descendant of the a element
This makes more sense for your question, as you have a button that is a descendant of an anchor.
Normally, you could solve the issue by simply styling your anchor tag, or by placing the button within a form element:
<form style="display: inline" action="http://www.example.com/" method="get">
<button>Some Call to Action</button>
</form>
But in your case, I don't think you even need the anchors as you aren't linking anywhere using HTML (and if you are attaching events using JavaScript, you could simply attach those events to the button rather than the anchor.
I am working on a project, in which needs generation of bill. what is the code for which if we click a button then it will print a hard-copy for the user
try this:
<button onclick="window.print()">Print</button>
you can obviously use <a> or <input> and put onclick="window.print()" in there
You can do it using javascript...Try like this
<input type="button" value="Print This Page" onClick="window.print()" />
How to replace the submit button with a link without using javascript ? is there any way to add the submit attribute to a link ? because the form will not be sent by a simple link without "submit".
<form:form action="/getPage" >
<div class="buttons">
<a class="link" href="">
<img src="icon.png" />
</a>
</div>
</form:form>
I work in an application web so if i use javascript the link will not be mapped by the server ..
You can not submit a form using an <a> tag alone. You will need some type of javascript to assist, if you insist on using the <a> tag:
Submit the Form
or
Submit the Form
or super hack:
Submit the Form, then on backendPage.php you can use $_GET requests to process information, and redirect the visitor to the intended page. But that's a horrible idea haha
Try this:
CSS
button {
background:none!important;
border:none;
padding:0!important;
/*border is optional*/
border-bottom:1px solid #444;
}
HTML
<button>your button that looks like a link</button>
This can achieve the same effort and it looks like <a>
Note: btn btn-link comes from bootstrap
<button class="btn btn-link" type="submit"><img src="icon.png" /></button>
There is an another way out. Using this method you can use any element to submit a form.
Following is an example:
<span onclick="$('#submit').trigger('click')" style="cursor:pointer;">
anything
</span>
Add a hidden submit button:
<input style="display:none;" type="submit" id="submit"/>
This will behave exactly as actual submit button.