CODEWITHSUNDEEP
javascriptjqueryhtmlformspost
code-8
code-8

Reputation: 58642

Submit a form with an a link does not work

I have this form 

<form method="POST" action="http://site.test/nodes/destroy" accept-charset="UTF-8" class="form-horizontal" role="form"><input name="_token" type="hidden" value="G2Mk8eZLwPOw5YYvKMSLj7kw6ThR4e2fP7aAWoGt">

    <a href="" onclick="form.submit();">
        <i class="fa fa-trash text-danger"></i>
    </a>


    <input name="ip" type="hidden" value="172.18.29.241">

</form>

When I click the trash can it suppose to submnit the form, it does not.

I can see the page getting refresh, but it never reach my controller.

What did I miss ?

Upvotes: 0

Views: 709

Answers (1)

David
David

Reputation: 218818

In short, don't use a link (anchor) for this. Doing so is causing you to try and write JavaScript code (and hacks such as href="#") to try to fight the semantics of using a link when you should just be using a button.

Since you have Bootstrap, styling the button to look like a link is trivial. For example:

<button type="submit" class="btn btn-link">
    <i class="fa fa-trash text-danger"></i>
</button>

It keeps the HTML clean and simple, doesn't introduce unnecessary complexity, will work without JavaScript and is more accessible to tools like screen readers, and uses the semantics of the elements rather than fighting them.

Upvotes: 5

Related Questions