How to Submit a Form With JavaScript by Clicking a Link

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

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.

How best to make a link submit a form

loop through parent nodes until you find an element with tagname that indicates it's a form!

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="get_form(this).submit(); return false">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>



<script type="text/javascript">
    //<![CDATA[
    function get_form( element )
    {
        while( element )
        {
            element = element.parentNode
            if( element.tagName.toLowerCase() == "form" )
            {
                //alert( element ) //debug/test
                return element
            }
        }
        return 0; //error: no form found in ancestors
    }
    //]]>
</script>

Send form after clicking on link

If you want to set the action of your form the href of your link when it's clicked, try the following:

 $( "#myLink" ).click(function() {
   var form =  $( "#searchForm" ); 
   form.action=$(this).attr('href');
   console.log(form.action);
   form.submit();
 });

Here is a working Fiddle.

How to submit a form by clicking a link javascript

Modify your function as follows

function run(clickedLink){
  clickedLink.parentNode.submit(); // parentNode refers to the form element
}

How to force users to click on the link before they submit the form?

Disable the submit button first. And call a function onclick of the link that activates the button.

function verify() {  document.getElementById("submit").disabled = false;}

<a href="http://google.com" target="_blank" onclick="verify()">Terms</a><button id="submit" onclick="submit()" disabled>Submit</button>