Submit form using <a> tag
JavascriptHtmlFormsSubmitJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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>
Solution 3 - Javascript
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>
Solution 4 - Javascript
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/
Solution 5 - Javascript
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.
Solution 6 - Javascript
<form id="myform_id" action="/myMethode" role="form" method="post" >
<a href="javascript:$('#myform_id').submit();" >submit</a>
</form>
Solution 7 - Javascript
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.
Solution 8 - Javascript
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>
Solution 9 - Javascript
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>
Solution 10 - Javascript
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>
Solution 11 - Javascript
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>