J. Davidson J. Davidson - 3 months ago 16
Javascript Question

Submitting a form using jQuery template

I have this form that loads rows of data in a table format using form. Than user updates some of the amount and submits the form. Form works fine, I don't know how to submit the updated values from html page to jQuery function.

<div id="Sales">
<script id="salestTemp" type="text/x-jquery-tmpl">
<form id="salesForm" action="">
<table class="" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="label"><a href="">Name<span class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a></th>
<th class="label"><a href="">$ Amount<span class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a></th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr class="">
<td>{{=name}}</td>
<td>$&nbsp;&nbsp;<input type="text" class="{{=id}}" id="Amount" value='{{=Amount}}' /></td>
</tr>
{{/each}}
<tr>
<input type="submit" class="" id="submit" name="" value="Save" />
</tr>
</tbody>
</table>
</form>
</script
</div>


I am using following jQuery:

$(document).ready(function () {
$("#submit").click(function () {
alert("inside");
$.ajax {......};
});
});


When I hit submit it doesn't even hit .click function. Anyone knows how to fix this or where to look? Thanks

Answer

Your example has a broken closing tag:

</script
</div>

Consider binding to the submit event:

$("#salesForm").on('submit', function (e) {
    e.preventDefault();
    alert("inside");
});

e.preventDefault(); will prevent the form from submitting, you can then use ajax to submit the form.

Here is an example based on your code: http://jsfiddle.net/n1ck/Jbbhe/2/

Comments