CODEWITHSUNDEEP
javascripthtmlformshyperlink
sandy
sandy

Reputation: 1651

How to submit a form with JavaScript by clicking a link?

Instead of a submit button I have a link:

<form>

  <a href="#"> submit </a>

</form>

Can I make it submit the form when it is clicked?

Upvotes: 162

Views: 838784

Answers (9)

Adam Pery
Adam Pery

Reputation: 2102

My suggestion is:

<form action="/logout" method="POST">
    <button type="submit" style="display:none;">Log Out</button>
    <a href="/logout" onclick="event.preventDefault();this.closest('form').submit();">Log Out</a>
</form>

Upvotes: 7

Darren Murphy
Darren Murphy

Reputation: 1164

HTML & CSS - No Javascript Solution

Make your button appear like a Bootstrap link

HTML:

<form>
    <button class="btn-link">Submit</button>
</form>

CSS:

.btn-link {

    background: none;
    border: none;
    padding: 0px;
    color: #3097D1;
    font: inherit;

}

.btn-link:hover {

    color: #216a94;
    text-decoration: underline;

}

Upvotes: 6

ComFreek
ComFreek

Reputation: 29444

The best way

The best way is to insert an appropriate input tag:

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

The best JS way

<form id="form-id">
  <button id="your-id">submit</button>
</form>

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

Enclose the latter JavaScript code by an DOMContentLoaded event (choose only load for backward compatiblity) if you haven't already done so:

window.addEventListener("DOMContentLoaded", function () {
  var form = document.... // copy the last code block!
});

The easy, not recommandable way (the former answer)

Add an onclick attribute to the link and an id to the form:

<form id="form-id">

  <a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>

</form>

All ways

Whatever way you choose, you have call formObject.submit() eventually (where formObject is the DOM object of the <form> tag).

You also have to bind such an event handler, which calls formObject.submit(), so it gets called when the user clicked a specific link or button. There are two ways:

  • Recommended: Bind an event listener to the DOM object.

    // 1. Acquire a reference to our <form>.
//    This can also be done by setting <form name="blub">:
//       var form = document.forms.blub;

var form = document.getElementById("form-id");


// 2. Get a reference to our preferred element (link/button, see below) and
//    add an event listener for the "click" event.
document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

  • Not recommended: Insert inline JavaScript. There are several reasons why this technique is not recommendable. One major argument is that you mix markup (HTML) with scripts (JS). The code becomes unorganized and rather unmaintainable.

    <a href="#" onclick="document.getElementById('form-id').submit();">submit</a>

<button onclick="document.getElementById('form-id').submit();">submit</button>

Now, we come to the point at which you have to decide for the UI element which triggers the submit() call.

  1. A button

    <button>submit</button>

  2. A link

    <a href="#">submit</a>

Apply the aforementioned techniques in order to add an event listener.

Upvotes: 266

iamwave007
iamwave007

Reputation: 353

here's the best solution to your question: inside the form you have these code:

<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>

in the CSS file, do this: 

button{
  display: none;
}

in JS you do this:

$("a").click(function(){
   $("button").trigger("click");
})

There you go.

Upvotes: 0

Shashank
Shashank

Reputation: 41

<form id="mailajob" method="post" action="emailthijob.php">
    <input type="hidden" name="action" value="emailjob" />
    <input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>

<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>

Upvotes: 3

Chintan Thummar
Chintan Thummar

Reputation: 1552

document.getElementById("theForm").submit();

It works perfect in my case.

you can use it in function also like,

function submitForm()
{
     document.getElementById("theForm").submit();
}

Set "theForm" as your form ID. It's done.

Upvotes: 2

chris
chris

Reputation: 61

this works well without any special function needed. Much easier to write with php as well. <input onclick="this.form.submit()"/>

Upvotes: 6

Maurice
Maurice

Reputation: 4940

If you use jQuery and would need an inline solution, this would work very well;

<a href="#" onclick="$(this).closest('form').submit();">submit form</a>

Also, you might want to replace 

<a href="#">text</a>

with

<a href="javascript:void(0);">text</a>

so the user does not scroll to the top of your page when clicking the link.

Upvotes: 78

Darin Dimitrov
Darin Dimitrov

Reputation: 1039528

You could give the form and the link some ids and then subscribe for the onclick event of the link and submit the form:

<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>

and then:

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};

I would recommend you using a submit button for submitting forms as it respects the markup semantics and it will work even for users with javascript disabled.

Upvotes: 26

Related Questions