Hi,
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.
Table:
<form id="editSec" action="" method="post">
<table id="listSections">
<tr>
<td>yellow</td>
<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>
</tr>
</table>
</form>jQuery:
$('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 ?