Is It Safe to Use Anchor to Submit Form

Is it safe to use anchor to submit form?

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.

Submit a form using a anchor element, without javascript

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>

Anchor tag as submit button?

I've made small changes

HTML

<form action="test.aspx" type="POST">
    <label>
        <span>Username</span>
        <input type="text" name="UserName" id="UserName" class="input-text required" />
    </label>
    <label>
        <span>Password</span>
        <input type="password" name="Password" id="Password" class="input-text required" />
    </label>
    <label>
        <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
        <span class="checkboxlabel">Remember Me</span>
    </label>
    <div class="spacer">
        <a href="javascript:void(0)" class="login-button">Login</a>
    </div>
</form>

jquery

$(document).ready(function(){
   $(document).on("click",".login-button",function(){
     var form = $(this).closest("form");
     //console.log(form);
     form.submit();
   });
});

JSFiddle

Submit form with anchor + javascript - bad practice?

you can use <button> in your form. it can contain content, and you can style it as you like.

you can make it look exactly as the <a> you have now, but clicking it will submit a POST form. It is almost as if we have a <a> that does POST!

Javascript: Submit form by clicking on any anchor tag within a form

Change the action of the form to the href of the <a> selected and then submit form

$('form a').click(function(event){
    event.preventDefault();
    $(this).closest('form').attr('action', this.href ).submit();
});

i want a anchor should act like and input type submit button

If you want an anchor tag to act like a button just do this

<!--YOUR FORM-->
<form id="submit_this">.....</form>
<a id="fakeanchor" href="#"></a>

<script>
    $("a#fakeanchor").click(function()
    {
    $("#submit_this").submit();
    return false;
    });
</script>

---

Related Topics