Button of type submit doesn't fire in the first click

Hello

h'm working on ajax call that will call mvc5 API2,

my problem is: when i hit any of the buttons for the first type it doesn't get fierd

but for the second type it will be fiered.

Whats the problem...?

<form id="allowance-form">
<div class="container">
<div class="row">
<div class="col-sm-3">div>
<div class="col-sm-6 container-box">
<div class="allowance-box jumbotron">
<ul class="buttons-list" id="listOfButtons">
@*<li><i id="iconSave" class="glyphicon glyphicon-floppy-disk icon-small">i>@Html.ActionLink("Save", "save", "payroll", new { @class = "button-link" })li>*@
<li><button type="submit" class="button-link js-create"><i id="iconSave" class="glyphicon glyphicon-floppy-disk icon-small">i>Savebutton>li>
<li><button type="submit" class="button-link js-reset"><i id="iconClear" class="glyphicon glyphicon-erase icon-small">i>Clearbutton>li>
<li><button type="submit" class="button-link js-delete"><i id="iconDelete" class="ion-backspace icon-small">i>Deletebutton>li>
ul>
<div class="options-box">
<p class="header-after-line">Optionsp>
div>
<div class="form-box">
<div class="col-sm-4 inner-box">
<label for="txtboxCode" class="lbl-first">Codelabel>
<input type="text" id="txtboxCode" value="@Model.Code" readonly />
<span class="btn-search"><i class="ion-ios-search-strong icon-small icon-search" data-toggle="modal" data-target="#lookup">i>span>
div>
<div class="col-sm-4 inner-box">
<label for="txtboxDesc">Descriptionlabel>
<input type="text" id="txtboxDesc" required />
div>
<div class="col-sm-4 inner-box">
<label for="txtboxName">Arabic Namelabel>
<input type="text" id="txtboxName" />
div>
<div class="col-sm-4 inner-box">
<label for="txtboxMin">Minimum Valuelabel>
<input type="text" id="txtboxMin" />
div>
<div class="col-sm-4 inner-box">
<label for="txtboxMax">Maximum Valuelabel>
<input type="text" id="txtboxMax" />
div>
@*<div class="col-sm-4 inner-box">
<label for="txtboxMonth">Monthly Yearlabel>
<input type="text" id="txtboxMonth" />
div>*@
@*<div class="col-sm-4 inner-box">
<label for="lstMonthly">Monthly Yearlabel>
<select id="lstMonthly" class="lstMontly">
<option>option>
select>
div>*@
<div class="col-sm-4 inner-box">
<label for="txtboxMax">Monthly Yearlylabel>
<select id="lstMonthly" class="lstMontly">
<option value="12">12option>
select>
div>
<div class="chk-box">
<label for="Social Security">
Social Security
@*@Html.CheckBox("Social Security", false, new { @id = "chkSocial" })*@
<input type="checkbox" id="chkSocial" />
label>
<label for="Vacations">
Vacations
@*@Html.CheckBox("Vacations", false, new { @id = "chkVac" })*@
<input type="checkbox" id="chkVac" />
label>
<label for="Tax">
Tax
@*@Html.CheckBox("Tax", false, new { @id = "chkTax" })*@
<input type="checkbox" id="chkTax" />
label>
div>
<label for="????? ???????">
????? ???????
@*@Html.CheckBox("????? ???????", false, new { @id = "chkOvertime" })*@
<input type="checkbox" id="chkOvertime" />
label>
<input type="hidden" id="hiddenId" />
div>
div>
<div class="col-sm-3">div>
div>
div>
div>
form>

This is the ajax code:

$("#allowance-form").validate({
submitHandler: function () {
$("#allowance-form .js-create").on("click", function (e) {
//$("#allowance-form").submit(function (e) {
e.preventDefault();
var Id = $("#hiddenId").val();
var desc = $("#txtboxDesc").val();
var code = $("#txtboxCode").val();
var arName = $("#txtboxName").val();
var MinVal = $("#txtboxMin").val();
var maxVal = $("#txtboxMax").val();
var optionVal = $("#lstMonthly").val();
if ($("#chkSocial").is(':checked')) { var chSocial = true; } else { var chSocial = false; }
if ($("#chkVac").is(':checked')) { var chVac = true; } else { var chVac = false; }
if ($("#chkTax").is(':checked')) { var chTax = true; } else { var chTax = false; }
if ($("#chkOvertime").is(':checked')) { var chOver = true; } else { var chOver = false; }
if (Id != "") {
var data = {
Code: code, Description: desc, MaxValue: maxVal,
MinValue: MinVal, MonthlyYear: optionVal, ArabicName: arName,
SocialSecurity: chSocial, Vacation: chVac, Tax: chTax,
Overtime: chOver, CreatedBy: "Test", ModifiedBy: "Test", AllowanceID: Id
}
$.ajax({
url: "/api/allowances/" + Id,
cache: false,
method: "PUT",
data: data,
})
.done(function () {
toastr.success("Information has been Updated successfully", "Success");
resetForm();
//table.row().remove().draw();
//loadAllowances();
})
.fail(function () {
toastr.error("Somthing unexpected happend", "Error");
// table.row().remove().draw();
})
}
else {
var data = {
Code: code, Description: desc, MaxValue: maxVal,
MinValue: MinVal, MonthlyYear: optionVal, ArabicName: arName,
SocialSecurity: chSocial, Vacation: chVac, Tax: chTax,
Overtime: chOver, CreatedBy: "Test", ModifiedBy: "Test"
}
$.ajax({
url: "/api/allowances/",
method: "POST",
data: data,
dataType:"json"
})
.done(function (response) {
toastr.success("Information has been added successfully", "Success");
resetForm();
//loadAllowances();
//table.row().remove().draw();
})
.fail(function (jqXHR, status, err) {
var json = jqXHR.responseJSON;
var json2 = json["ModelState"];
var json3 = json2["allowances"];
var arr = json3[0];
toastr.error(arr, "Error");
})
}
});
$("#allowance-form .buttons-list .js-delete").on('click', function (e) {
e.preventDefault();
//var Id = $("#hiddenId").val();
//if (Id == "") { Id = null } else { Id = Id }
$.ajax({
url: "/api/allowances/" + $("#hiddenId").val(),
method: "DELETE",
cache: false,
success: function () {
toastr.success("Information has been deleted successfully", "Deleted");
resetForm();
//table.row().remove().draw();
// loadAllowances()
},
error: function () {
toastr.error("Something unexpected has been happen", "Error");
},
async: "false"
});
});
}
});

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ramesh Barik9y ago
Accepted answer
If you are using ajax call change the button type to button.

In case of type "submit" you have to set post method in form tag.refer this link for better understanding.
https://www.codeproject.com/Articles/1078491/Creating-Forms-in-ASP-NET-MVC
Fares Ayyad9y ago
But how to handle validation ?!!!!!
when i put requierd att on one of the input of type text !?