You must add type=”button” for the <button> element which will prevent from other Postback events.
I have two buttons such as upload button and submit. When I click upload button it calls the submit button. I want to prevent from that I used type=”button” for button element.
<script type="text/javascript">
$(function () {
$('#btnUpload').click(function () {
// Checking whether FormData is available in browser
if (window.FormData !== undefined) {
var fileUpload = $("#files").get(0);
var files = fileUpload.files;
// Create FormData object
var fileData = new FormData();
// Looping over all files and add it to FormData object
for (var i = 0; i < files.length; i++) {
fileData.append(files[i].name, files[i]);
}
// Adding one more key to FormData object
fileData.append('username', $("#hfdSubmitId").val());
$.ajax({
url: '/Submit/CreateMedia',
type: "POST",
contentType: false, // Not to set any content header
processData: false, // Not to process data
data: fileData,
success: function (result) {
$('#theDiv').append(result.OutputHtml);
},
error: function (err) {
alert(err.statusText);
}
});
} else {
alert("FormData is not supported.");
}
return false;
});
});
</script>
@using (@Html.BeginForm("Index", "Category", null, FormMethod.Post, new { autocomplete = "off", enctype = "multipart/form-data" }))
{
<div class="form-group">
@Html.TextAreaFor(model => model.Description, new { Class = "form-control input-lg", id = "txtDescription", rows = "3", placeholder = "text(option)" })
@Html.ValidationMessageFor(model => model.Description)
</div>
<button class="btn" type="button" id="btnUpload" title="+ upload photos">
+ upload photos</button>
}