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

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

Hinrichs

(a) Can you use JavaScript? and (b) Why? oh why? – Boy

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.

Tribalism

Wow thanks for the quick response! If I went this way, could I have a few different Li elements that could submit the form? And have each submit send a variable to the form telling the form which was clicked? – Hinrichs

Yes you would have to apply the onclick to each LI. If you wanted to submit a variable with each click, then you could have a hidden input (e.g. <input type="hidden" id="myVariable" value=""/>) which you populate in the onclick event (e.g. onclick="myForm.myVariable.value='foo';myForm.submit();"). I don't think this is great approach to handling your forms though. – Tribalism

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.

Freezedrying

Sorry it's a bit strange, due to the design of the application it's a requirement. Using this method I need it to allow multiple Li's to submit the form. Can each Li tell the form which was clicked? – Hinrichs

Yes, all the details you will need are in the click event. – Freezedrying

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()

Haldeman

Answer 4

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

Inchoative

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>

Califate

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.

Gyasi