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

问题

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

回答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.

回答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.

回答3:

JavaScript.

Wire the onclick event of the element. Get a reference to the form.

var frm = document.getElementById('formid');

Submit it.

frm.submit()

回答4:

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

回答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>

回答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.

来源：https://stackoverflow.com/questions/4853563/how-do-i-submit-a-form-with-a-li-instead-of-a-submit-button