How do I submit a form with a <li> instead of a submit button? - forms

Question

I want to be able to submit a form but instead of having to click on a submit button, I'd like to be able to click on an <li> element and have it submit.
Any help would be GREAT!
Thanks in advance!
Ncoder

Answer 1

You could put an onclick event on the LI that calls the forms submit event:
<form id="myForm" action="foo.htm" method="post">
<ul>
<li onclick="myForm.submit();">Click me</li>
</ul>
</form>
Your form would be non-standard and not very accessible though.

Answer 2

<li onclick="formName.submit();">
Although the above method will work, it seems such a strange requirement, and I'd advise re-thinking the logic behind the program.

Answer 3

JavaScript.
Wire the onclick event of the element. Get a reference to the form.
var frm = document.getElementById('formid');
Submit it.
frm.submit()

Answer 4

Add click handler on <li> element and use javascript to submit the form document.getElementById('formid').submit();

Answer 5

<form id="myForm">
...
<li id="something" onclick="mySubmit();"><p>hello world!</p></li>
...
</form>
<script type="text/javascript">
function mySubmit(){
document.getElementById("myForm").submit();
}</script>

Answer 6

I believe I was attempting to accomplish something quite similar to you, but I decided to code it the "correct" way. Here is an alternative approach that basically stylizes the submit button like an li element.
HTML/Coldfusion
<div id="student_options">
<ul>
<cfoutput query="student_specs">
<cfif #currentStudent# IS NOT #student_specs.GS1FNFP#>
<form action="" method="POST" name="dropdown">
<input type="hidden" name="change_stnum" value="#Trim(student_specs.STNUM)#" />
<input type="submit" name="submit_stu_change" value="#Trim(student_specs.GS1FNFP)#" />
</form>
</cfif>
</cfoutput>
</ul>
</div>
CSS
#student_options input[type="submit"] {
padding:15px 20px 15px 20px;
font-size:90%;
color:#555;
background-color:#eee;
display:block;
width:100%;
text-align:left;
}
#student_options input[type="submit"]:hover {
background-color:#F4F4F4;
cursor:pointer;
}
You will have to customize elements to your liking, but this is a better approach than using javascript to submit the form.