Is it safe to use anchor to submit form?

html forms button anchor

79,100

Solution 1

To use an anchor to submit a form would require the use of JavaScript to hook up the events. It's not safe in that if a user has JavaScript disabled, you won't be able to submit the form. For example:

<form id="form1" action="" method="post">
    <a href="#" onclick="document.getElementById('form1').submit();">Submit!</a>
</form>

If you'd like you can use a <button>:

<button type="submit">Submit!</button>

Or stick with what we all know:

<input type="submit" value="Submit!" />

You can style all three of them, but the latter two don't require JavaScript. You probably just need to change some CSS somewhere if you're having border issues.

Solution 2

<!-- add the anchor token at the end of your action statement -->

<form method='post' action='this_page.php?put_peram=token#anchor_name'>
<input type='submit' value='click here'>

<!-- put the anchor right above where you want the page to  index -->

<a name="anchor_name></a>

Solution 3

Try to avoid javascript for the action. Use always submit button. Some users may be disabled javascript for security purpose.

Although you want to use javascript for submitting the value, add the below line before writing the<html> tag.

 <html>

79,100

Author by

Gregor Menih

Freelance web developer

Updated on May 28, 2020

Comments

Gregor Menih almost 4 years

I've read somewhere, that using anchor tag to submit a form isn't very safe, so that's my question: Is it safe, to use anchor tag instead of <button> or <input type="submit" /> to submit a form? And if it isn't, why? The problem is, that I have a CSS class for a button, that shows what I want on <a class="button">, but if I add it to an actual button it adds a weird border that I don't want.

Thanks
GolezTrol over 12 years

Indeed. But fortunately you can style a button as if it's an a. Just remove the border from the style you currently have. By the way, using <button> has the same problem. Use <input type="submit">.
nfechner over 12 years

Although the number of users, that have Javascript disabled is really small in most settings.
GolezTrol over 12 years

@nfechner Sure, but why take the risk and the effort if there's a perfectly good element that has this functionality built in since about 1872.
Gregor Menih over 12 years

Well, since most of the form is made with JavaScript, it won't hurt if I add a button as well. Thanks.
Mindaugas MG about 11 years

@GolezTrol re: why take the risk. Styling anchor tags is much easier than styling input buttons and they render more consistently with various styles applied across the different browsers. Libraries like Bootstrap abstract the complexity of styling away so that an anchor tag and input look the same, but if you're not using one of these libraries, using anchor tags across the site might make things cleaner from a rendering and styling perspective.
GolezTrol about 11 years

@ckarbass Because you should look from a user/functionality perspective.
James Huckabone about 11 years

input, button does not have a valid :hover state in IE and it's a psuedoclass in other browsers. I would rather take the 0.01% hit of users that would otherwise not be able to use my web app with JavaScript disabled than have to use a library to get :hover working in IE (as well, Pagespeed complains of performance issues with this).
Lèla Null over 7 years

I didn't have the same question, I needed a php action and and an anchor in the same button. This answer solves my problem, I will just use css and make it look like a button.
Roman Susi about 4 years

How the anchor will survive redirect, which is usual after POST?