[javascript] Submit form using <a> tag

I am trying to submit a form through onclick event on tag. I have tried triggering document.myform.submit(), this.form.submit(), parentNode.submit() etc. but none of this is working! Using a submit button, the code works fine. But I want to use tag in place of that. Need some help.

            <form id="myform" name="myform" method="POST" action="process_edit_questionnaire.php?project=<?php echo $project_id; ?>">
                <input name="module" type="hidden" value="<?php echo $module_id;?>"/>
                <input name="project" type="hidden" value="<?php echo $project_id;?>"/>
                <input name="hidden_ques_id" type="hidden" value="<?php echo $data_array_ques[$j]['ques_id'];?>"/>

            <div id="question_block">

                <div id="serial_block">
                    <p id="s_original_<?php echo $j+1; ?>"><a href="#" onclick="showSelectBox(<?php echo $j+1; ?>)">Serial : 
                        <?php 
                        if($data_array_ques[$j]['ques_position']==NULL){ 
                            echo $j+1;                            
                        } 
                        else { 
                            echo $data_array_ques[$j]['ques_position'];         
                        } ?></a></p>
                    <p id="s_select_box_<?php echo $j+1; ?>" style="display: none;">Serial : 
                        <select name="serial">
                          <?php for($p=1;$p<=count($data_array_ques);$p++){ ?>
                                    <option value="<?php echo $p; ?>" <?php if($p==$data_array_ques[$j]['ques_position']){ echo "selected=\"selected\"";} ?> ><?php echo $p; ?></option>
                          <?php }  ?>
                        </select>
                    </p>
                </div>

                <div id="question_text">
                    <a href="#" onclick="showTextBox(<?php echo $j+1; ?>)"><p id="q_original_<?php echo $j+1; ?>"><?php echo $data_array_ques[$j]['ques_text']; ?></p></a>
                    <p id="q_text_box_<?php echo $j+1; ?>" style="display:none;"><textarea id="ques_text" name="ques_text" rows="3" cols="30"><?php echo $data_array_ques[$j]['ques_text']; ?></textarea></p>                     
                </div>

            </div>

            <div id="menu_block">
                <a href="" onclick="document.myform.submit()">Save Changes</a> |
                <a href="delete_question.php?project=<?php echo $project_id; ?>&module=<?php echo $module_id; ?>">Delete This Question</a>
            </div>
            </form>

This question is related to javascript html forms submit

The answer is


You can use hidden submit button and click it using java script/jquery like this:

  <form id="contactForm" method="post" class="contact-form">

        <button type="submit" id="submitBtn" style="display:none;" data-validate="contact-form">Hidden Button</button>
        <a href="javascript:;" class="myClass" onclick="$('#submitBtn').click();">Submit</a>

  </form>

<form  id="myform_id" action="/myMethode"  role="form"  method="post" > 
   <a  href="javascript:$('#myform_id').submit();" >submit</a>
</form>

you can do it like this with raw javascript

<html>
    <body>
        <form id="my_form" method="post" action="mailto://[email protected]">
            <a href="javascript:{}" onclick="document.getElementById('my_form').submit();">submit</a>
        </form>
    </body>
</html>

For those asking why I have a href element in my anchor tag, its because it's a compulsory part of an anchor tag, it may well work without but it's not to spec. So if you want to guarantee rendering etc you must give the engine a fully formed tag. So the above achieves this. You will see href="#" used sometimes but this is not always wanted as the browser will change the page position.


Here is how I would do it using vanilla JS

<form id="myform" method="POST" action="xxx">
    <!-- your stuff here -->
    <a href="javascript:void()" onclick="document.getElementById('myform').submit();>Ponies await!</a>
</form>

You can play with the return falses and href="#" vs void and whatever you need to but this method worked for me in Chrome 18, IE 9 and Firefox 14 and the rest depends on your javascript mostly.


I suggest to use "return false" instead of useing some javascript in the href-tag:

<form id="">
...
</form>

<a href="#" onclick="document.getElementById('myform').submit(); return false;">send form</a>

Clean and simple:

  <form action="/myaction" method="post" target="_blank">
    <!-- other elements -->
    <a href="#" onclick="this.parentNode.submit();">Submit</a>
 </form>

In case of opening form action url in a new tab (target="_blank"):

  <form action="/myaction" method="post" target="_blank">
    <!-- other elements -->
    <a href="#" onclick="this.parentNode.submit();">Submit</a>
 </form>

If jquery is allowed then you can use following code to implement it in the easiest way as :

<a href="javascript:$('#form_id').submit();">Login</a>

or

<a href="javascript:$('form').submit()">Login</a>

You can use following line in your head tag () to import jquery into your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Try this:

Suppose HTML like this :

   <form id="myform" name="myform" method="POST" action="process_edit_questionnaire.php?project=<?php echo $project_id; ?>">
      <div id="question_block">
            testing form
        </div>
     <a href="javascript: submit();">Submit</a>
        </form>

JS :

   <script type='text/javascript'>
     function submit()
      {
         document.forms["myform"].submit();
      }
   </script>

you can check it out here : http://jsfiddle.net/Zm426/7/


Submit your form like this ...

Your HTML code

    <form name="myform" action="handle-data.php"> Search: <input type='text' name='query' />
     <a href="javascript: submitform()">Search</a> 
   </form> 

JavaScript Code

  <script type="text/javascript"> 
        function submitform() {   document.myform.submit(); } 
   </script> 

Using Jquery you can do something like this:

_x000D_
_x000D_
$(document).ready(function() {_x000D_
  $('#btnSubmit').click(function() {_x000D_
    $('#deleteFrm').submit();_x000D_
  });_x000D_
_x000D_
});
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<form action="" id="deleteFrm" method="POST">_x000D_
  <a id="btnSubmit">Submit</a>_x000D_
</form>
_x000D_
_x000D_
_x000D_


Is there any reason for not using a submit button and then styling it with css to match your other a tags?

I think this would reduce your dependency on having javascript enabled and still get the desired result.


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to forms

How do I hide the PHP explode delimiter from submitted form results? React - clearing an input value after form submit How to prevent page from reloading after form submit - JQuery Input type number "only numeric value" validation Redirecting to a page after submitting form in HTML Clearing input in vuejs form Cleanest way to reset forms Reactjs - Form input validation No value accessor for form control TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"

Examples related to submit

React - clearing an input value after form submit angular2 submit form by pressing enter without submit button spark submit add multiple jars in classpath jQuery's .on() method combined with the submit event Selenium Webdriver submit() vs click() PHP form - on submit stay on same page Disable submit button ONLY after submit HTML - How to do a Confirmation popup to a Submit button and then send the request? HTML form with multiple "actions" Javascript change color of text and background to input value