Using jQuery to submit form from link outside of form

Question

I'm trying to submit a form from a link that is located in my nav bar.

I'm new to javascript.jQuery and unsure why this won't execute.

I have a feeling there I need to put something else in the link's href but I'm not sure what it is? I appreciate the feedback and expertise.

LINK

<li><a href="#" id="add-product-save-link"><i class="icon-plus"></i> Save</a></li>

FORM

<form class="form" action="" method="post" id="add-product-form">

JAVASCRIPT (this code in an external separate file I have linked to the template)

$(document).ready(function() { 
    $('#add-product-save-link').click(function(e) {
        e.preventDefault();
        $('#add-product-form').submit();
    });
});

I've linked to jQuery with:

Answer 1

in pure JavaScript: (http://jsfiddle.net/4enf7/)

<a href="javascript:document.getElementById('add-product-form').submit();">Send form</a>