I'm having trouble submitting a form using a link. I have a table that lists a bunch of data, and I want to allow users to edit the data directly in the table. The user can click the "EDIT" link, which makes jQuery replace the appropriate <td> html with <input> elements. Then, when the user clicks the "SAVE" link, it should submit the form, but it doesn't.


<form id="editSec" action="" method="post">
<table id="listSections">
	<td><input type="text" class="First Aisle" value="100" maxlength="3" name="editStart" id="editStart"></td>
	<td><input type="text" class="Last Aisle" value="153" maxlength="3" name="editEnd" id="editEnd"></td>
	<td><input type="text" class="Hex Code" value="none" maxlength="6" name="editHex" id="editHex"></td>
	<td>Yes (<a href="#">toggle</a>)</td>
	<td class="colorDemo"><span style="color: pink; background-color: rgb(102, 102, 102); padding: 3px 4px;">YELLOW</span></td>
	<td><a class="save" href="#">SAVE</a> | <a class="cancel" href="#">CANCEL</a></td>


$('a.save', 'table#listSections').live('click', function(event) {
	var myRow = $(this).closest('tr');
	$("form#editSec").submit(function() {
		console.log('form submitted');
		$(this).children('input').each(function() {
			// do form validations
		if(!hasError) {
			// process form
	return false;

I placed the "console.log('form submitted');" line there to make sure the form was submitted, but it doesn't show that line in Firebug when I click on the SAVE link. So I think there must be something wrong with how I'm referencing the <form> element, I just can't figure out what it is. If anyone can point out what my mistake is I'd greatly appreciate it.

On a side note, will the $(this) on line 5 of the jQuery reference the form, or a.save ?