Question

Looking for a non-JS solution. Say I had something like this:

<ul>
   <li>
      <form>
         <fieldset>
            ...
            <input type="submit" value="Submit"/>
         </fieldset>
      </form>
   </li>
   ...
</ul>

Is there a way to do the following without JS:

1. Make the submit button invisible, and
2. Make any part of the <li> clickable (meaning, it will submit the form)

???

Answer 1

You can use JS to submit a form without a sumbit button:

<li onClick="document.forms["myform"].submit();">my LI</li>
<form id="myform">
<!-- FORM -->
</form>

This is just a quick way to achieve this. If you are using JS for other problems as well you should not implement it directly (inline).

UPDATED – without JS:

Without JS you definitely need the input, but you could style it with css to your needs:

input.submit { border:none; background-color:transparent; display:block; width:200px;
height:200px; position:absolute; }

Via top and left you could place it over the li. position:relative might be better . it depends how you want to position it.

<input class="submit" type="submit" />