Ajax Post Click Function Submits Twice
I'm clicking a button type="button" to fire off an ajax post. The problem is, the form is always submitted twice.
Generated HTML
-
<form name="AddItem" id="additemform" method="post" action="WebCatPageServer.exe">
<input name="Action" type="hidden" value="Add_Item" />
<table>
<tbody>
<tr>
<td><a href="WebCatPageServer.exe?PROD_FULL&ProdInfo=00012000551">BRW2394746301</a></td>
<td>239-47463-01</td>
<td>Gas Valve Complete, Icon Natural Gas</td>
<td> $207.32</td>
<td>Available</td>
<td>
<input name="Q1" tabindex="1" class="qtyfield" type="text" size="1" value="0" onblur="clickrecall(this,'0')" onfocus="Q1.select()" />
</td>
<td>
<input name="P1" type="hidden" value="BRW2394746301" />
<input name="M1" type="hidden" value="239-47463-01" />
<input name="D1" type="hidden" value="Gas Valve Complete, Icon Natural Gas" />
<button type="button" class="button lightgray smallrounded addbtn" value="Add">Add</button>
</td>
</tr>
<tr>
<td><a href="WebCatPageServer.exe?PROD_FULL&ProdInfo=00012000552">BRW2394746501</a></td>
<td>239-47465-01</td>
<td>Gas Valve Complete , Icon Propane</td>
<td> $272.58</td>
<td>Available</td>
<td>
<input name="Q2" tabindex="2" class="qtyfield" type="text" size="1" value="0" onblur="clickrecall(this,'0')" onfocus="Q2.select()"/>
</td>
<td>
<input name="P2" type="hidden" value="BRW2394746501" />
<input name="M2" type="hidden" value="239-47465-01" />
<input name="D2" type="hidden" value="Gas Valve Complete , Icon Propane" />
<button type="button" class="button lightgray smallrounded addbtn" value="Add">Add</button>
</td>
</tr>
<tr>
<td><a href="WebCatPageServer.exe?PROD_FULL&ProdInfo=00012000553" style="text-decoration:underline;">BRW2334784505</a></td>
<td>233-47845-05</td>
<td>Pilot Assembly, Icon Natural Gas</td>
<td> $32.58</td>
<td>Available</td>
<td>
<input name="Q3" tabindex="3" class="qtyfield" type="text" size="1" value="0" onblur="clickrecall(this,'0')" onfocus="Q3.select()" />
</td>
<td>
<input name="P3" type="hidden" value="BRW2334784505" />
<input name="M3" type="hidden" value="233-47845-05" />
<input name="D3" type="hidden" value="Pilot Assembly, Icon Natural Gas" />
<button type="button" class="button lightgray smallrounded addbtn" value="Add">Add</button>
</td>
</tr>
</tbody>
</table>
</form>
jQuery Code
-
$(function() {
-
var additemtoform = $('#additemform');
-
var handleData = function(responseData) {
-
if ($(responseData).find('#repitems').length) {
-
var replacement = $('<div />').html(responseData).find('#repitems').html();
-
$('#test').html(replacement);
-
} else {
-
additemtoform.submit();
-
}
-
};
-
-
$("#additemform .addbtn").on("click", function(e) {
-
e.preventDefault();
-
$.ajax({
-
type: 'POST',
-
url: 'WebCatPageServer.exe',
-
dataType: 'html',
-
cache: false,
-
data: additemtoform.serialize(),
-
beforeSend: function() {},
-
success: function(data) {
-
handleData(data);
-
},
-
error: function() {
-
alert('error');
-
}
-
});
-
return false;
-
});
-
I just don't know how it's submitting twice. Any thoughts? Thanks in advance.