Submit form using tag

Question

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>

if it works and helped you might be nice to accept an answer here thats how this site works :) — krystan honour, Apr 06 '12 at 09:05
Hold on a minute... I'm seeing PHP output `$j` a lot and it looks like an iterator... is this entire thing occurring in a loop? Are you outputting multiple copies of this form? If so that would mean there are multiple forms with the same ID and name, you'd need to add `$j` to ID and name like you do with everything else. If not, please disregard. — Rick, Apr 06 '12 at 14:08

krystan honour · Answer 1 · 2020-11-18T14:16:53.957

66

you can do it like this with raw javascript

<html>
    <body>
        <form id="my_form" method="post" action="mailto://test@test.com">
            <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.

edited Nov 18 '20 at 14:16

answered Apr 06 '12 at 06:34

krystan honour

5,934
2
31
61

2

it prevents the default behavior of click event of `` tag. – Saurabh Kumar Apr 06 '12 at 06:38
last two solutions didn't work. I dont know how to use jQuery. – Potheek Apr 06 '12 at 06:51
@ Krystan, I know this works, but dont know why its not working in my code. Anyway, thanks a lot! – Potheek Apr 06 '12 at 09:00
1

In what way is this not working? Do you get a javascript error? Does the page do anything? Can you provide a link where it fails and with which browser & version? – Joel Peltonen Aug 15 '12 at 14:58
1

Don't forget the id="my_form" on your
tag.
– orrd Feb 03 '17 at 20:32
1

I'm curious about the reason that href="javascript:{}", is there a reason? I used href="#" and it works fine. – Colin Laws Jan 29 '19 at 03:44

score 12 · Answer 2 · answered Oct 13 '15 at 08:48

12

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>

answered Oct 13 '15 at 08:48

Hemant Nagpal

475
4
12

2

This of course works without jQuery too: _Login_ – David Balažic Nov 24 '15 at 01:04

Pranay Rana · Answer 3 · 2012-04-06T08:13:35.257

6

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>

edited Apr 06 '12 at 08:13

answered Apr 06 '12 at 06:32

Pranay Rana

164,177
33
228
256

Thanks for your reply. Already tried that. No results. I guess I have some problems in the code. But don't know what.. – Potheek Apr 06 '12 at 06:45
@Potheek - if there is nay prob try to pu alert , make use of debugger that will give you an idea, because this is the final code that you can make use of it for submiting form on link – Pranay Rana Apr 06 '12 at 07:33
why have you downvoted me when there is no jquery as i removed it in my edit way before your downvote, you would do best to read comments before you downvote – krystan honour Apr 06 '12 at 07:56
1

@Rana, the javascript function got called but the form did not get submitted :( – Potheek Apr 06 '12 at 09:03
isnt better to write this code ==> `search` – hamidreza ghanbari Jul 22 '20 at 17:47

Jignesh Rajput · Answer 4 · 2013-02-19T11:09:50.433

4

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/

edited Feb 19 '13 at 11:09

answered Apr 06 '12 at 06:40

Jignesh Rajput

3,480
25
50

I have tried exactly what you have written here but that didn't work:( – Potheek Apr 06 '12 at 06:44
what kind of error in Console? have u put function in `Script` tag – Jignesh Rajput Apr 06 '12 at 06:45
@ Jigs, I know it works, I think there is something wrong in my code. Thanks for your reply. – Potheek Apr 06 '12 at 09:02

score 4 · Answer 5 · answered Aug 15 '12 at 14:54

4

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.

answered Aug 15 '12 at 14:54

Joel Peltonen

11,167
4
60
93

Just now noticed that someone else used this method as well.. shame on me for not checking. – Joel Peltonen Aug 15 '12 at 14:56

score 4 · Answer 6 · edited Feb 16 '19 at 13:44

4

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

edited Feb 16 '19 at 13:44

Zoe

23,712
16
99
132

answered Feb 16 '19 at 13:42

Ameni

41
1

1

When you post HTML, XML, or anything tag based, it's very important that you format your code properly. Otherwise it gets formatted as a part of the post. See [the help center](/help/formatting) – Zoe Feb 16 '19 at 13:45

score 2 · Answer 7 · answered Nov 12 '15 at 10:27

2

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.

answered Nov 12 '15 at 10:27

CF5

909
7
14

1

The question specifically asks how to do it with an `` element. The OP stated that it worked well with a submit button. While it might be a valid objection in some cases, disabled JavaScript isn’t a big issue nowadays (and also not part of the question). – dakab Nov 12 '15 at 10:49
Apologies, you're absolutely right the question does state that. However I can't understand why you have taken the time to promote solutions that while work, require more code and will work in fewer situations. The issue of javascript really depends on how much you value potential customers, no matter what pap they are browsing with. If I'm missing something about what I should contribute to, let me know and I'll delete it off – CF5 Nov 12 '15 at 13:15

score 1 · Answer 8 · answered Nov 14 '14 at 10:26

1

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>

answered Nov 14 '14 at 10:26

Rafael Kutscha

17
3

score 1 · Answer 9 · answered Mar 08 '16 at 09:53

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>

score 1 · Answer 10 · answered Jan 24 '19 at 06:42

Using Jquery you can do something like this:

$(document).ready(function() {
  $('#btnSubmit').click(function() {
    $('#deleteFrm').submit();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="deleteFrm" method="POST">
  <a id="btnSubmit">Submit</a>
</form>

score 1 · Answer 11 · answered Sep 29 '20 at 09:06

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>

Submit form using tag

11 Answers11

JS :

Linked