jquery.ajax database insert issues
i am trying to build my form to submit without reloading the screen. I am using jquery and it inserts the data but it also reloads the screen and two database records get inserted. It appears that one is being inserted by jquery and the other is being inserted by the normal form submission. How do I remove/override the normal form submission? My html code is as follows:
<div>
<script type="text/javascript">
$(document).ready(function(){
$("#SubmitIncident").click(insertIncident);
$("#SubmitActivity").click(insertIncident);
});
//example 1
function insertIncident() {
/*$.post("incident.asp", $("#IncidentFrm").serialize());*/
$.ajax({
type: "POST",
url: "incident.asp",
dataType: "application/x-www-form-urlencoded",
data: "Action=" + $("#Action").val() + "&IncidentType=" + $("#IncidentType").val() + "&IncidentDate=" + $("#IncidentDate").val() + "&IncidentTime=" + $("#IncidentTime").val() + "&CallTime=" + $("#CallTime").val() + "&ResponseTime=" + $("#ResponseTime").val() + "&Address=" + $("#Address").val() + "&City=" + $("#City").val() + "&State=" + $("#State").val() + "&Zip=" + $("#Zip").val() + "&Location=" + $("#Location").val(),
success: function (msg) {
alert("Data Saved: " + msg);
}
});
}
</script>
<div class="grid_2"> </div>
<div class="grid_8">
<p>Select the type of incident below:</p>
</div>
<div class="grid_2"> </div>
<div class="clearfix"> </div>
<form method="post" name="IncidentFrm" action="">
<input type="hidden" name="Action" id="Action" value="Add" />
<div class="grid_3"> </div>
<div class="grid_6" align="center" style="background-color:#999999; padding-top:10px; padding-bottom:10px; border-radius:3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;">
<input type="radio" name="IncidentType" id="Crime" value="Crime" />
<label for="RADIO1" style="color:#ffffff;">Crime</label>
<input type="radio" name="IncidentType" id="SP" value="SP" />
<label for="RADIO2" style="color:#ffffff;">Suspicious Person</label>
<input type="radio" name="IncidentType" id="SA" value="SA" />
<label for="RADIO3" style="color:#ffffff;">Suspicious Activity</label>
</div>
<div class="grid_3"> </div>
<div class="clearfix"> </div>
<div class="grid_2"> </div>
<div class="grid_1">
<label>Date</label><br />
<input name="IncidentDate" id="IncidentDate" type="text" class="text_1" />
</div>
<div class="grid_1">
<label>Time</label><br />
<input name="IncidentTime" id="IncidentTime" type="text" class="text_1" />
</div>
<div class="grid_2">
<label for="LECalled">Agency Called</label><br />
<select name="LECalled" id="LECalled" class="select_2">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
</select>
</div>
<div class="grid_2">
<label>Call Time</label><br />
<input name="CallTime" id="CallTime" type="text" class="text_2" />
</div>
<div class="grid_2">
<label>Response Time</label><br />
<input id="ResponseTime" name="ResponseTime" type="text" class="text_2" />
</div>
<div class="grid_2"> </div>
<div class="clearfix"> </div>
<div class="grid_2"> </div>
<div class="grid_4">
<label>Address</label><br />
<input name="Address" id="Address" type="text" class="text_4" />
</div>
<div class="grid_2">
<label>City</label><br />
<input name="City" id="City" type="text" class="text_2" />
</div>
<div class="grid_1">
<label>State</label><br />
<input name="State" id="State" type="text" class="text_1" />
</div>
<div class="grid_1">
<label>Zip</label><br />
<input name="Zip" id="Zip" type="text" class="text_1" />
</div>
<div class="grid_2"> </div>
<div class="clearfix"> </div>
<div class="grid_2"> </div>
<div class="grid_8">
<label>Location</label><br />
<textarea name="Location" id="Location" rows="2" cols="105"></textarea>
</div>
<div class="grid_2"> </div>
<div class="clearfix"> </div>
<div class="grid_4"> </div>
<div class="grid_2">
<input name="SubmitIncident" type="submit" class="submit" value="Save Incident" id="SubmitIncident" />
</div>
<div class="grid_2">
<input name="reset" type="reset" class="submit" value="Reset Incident" id="Reset" />
</div>
<div class="grid_4"> </div>
<div class="clearfix"> </div>
</form>
</div>
<!-- END INCIDENT SECTION -->
</div>
Any help would be greatly appreciated.