Question

What’s the best way to get a regular anchor (<a href='...'>) to submit the form it is embedded in when clicked?

<form>     <ul>         <li>             <p>                 The link could be <span>embedded <a href='' onclick='?'>at any level</a></span>                 in the form, so 'this.parentNode.parentNode...' is no good. :(             </p>         </li>     </ul> </form> 

I know that the easiest way using jQuery would be

$('#myLink').click(function() {     $(this).parents('form:first').submit(); }); 

…but I’m trying to find a way to do this without using a library.

---

Edit: I’m really trying to find a method which doesn’t require knowledge of the form (eg: its name, id, etc). This would be similar to how you could put this on an input element: <input onclick='this.form.submit()' />

Answer 1

loop through parent nodes until you find an element with tagname that indicates it’s a form!

<form>     <ul>         <li>             <p>                 The link could be <span>embedded <a href='' onclick='get_form(this).submit(); return false'>at any level</a></span>                 in the form, so 'this.parentNode.parentNode...' is no good. :(             </p>         </li>     </ul> </form>    <script type='text/javascript'>     //<![CDATA[     function get_form( element )     {         while( element )         {             element = element.parentNode             if( element.tagName.toLowerCase() == 'form' )             {                 //alert( element ) //debug/test                 return element             }         }         return 0; //error: no form found in ancestors     }     //]]> </script>