Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Login
Sign Up
Ask Question
2
Reply
Button of type submit doesn't fire in the first click
Fares Ayyad
May 11 2017 7:28 AM
268
Reply
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
>
Save
</
button
>
</
li
>
<
li
>
<
button
type
=
"submit"
class
=
"button-link js-reset"
>
<
i
id
=
"iconClear"
class
=
"glyphicon glyphicon-erase icon-small"
>
</
i
>
Clear
</
button
>
</
li
>
<
li
>
<
button
type
=
"submit"
class
=
"button-link js-delete"
>
<
i
id
=
"iconDelete"
class
=
"ion-backspace icon-small"
>
</
i
>
Delete
</
button
>
</
li
>
</
ul
>
<
div
class
=
"options-box"
>
<
p
class
=
"header-after-line"
>
Options
</
p
>
</
div
>
<
div
class
=
"form-box"
>
<
div
class
=
"col-sm-4 inner-box"
>
<
label
for
=
"txtboxCode"
class
=
"lbl-first"
>
Code
</
label
>
<
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"
>
Description
</
label
>
<
input
type
=
"text"
id
=
"txtboxDesc"
required
/>
</
div
>
<
div
class
=
"col-sm-4 inner-box"
>
<
label
for
=
"txtboxName"
>
Arabic Name
</
label
>
<
input
type
=
"text"
id
=
"txtboxName"
/>
</
div
>
<
div
class
=
"col-sm-4 inner-box"
>
<
label
for
=
"txtboxMin"
>
Minimum Value
</
label
>
<
input
type
=
"text"
id
=
"txtboxMin"
/>
</
div
>
<
div
class
=
"col-sm-4 inner-box"
>
<
label
for
=
"txtboxMax"
>
Maximum Value
</
label
>
<
input
type
=
"text"
id
=
"txtboxMax"
/>
</
div
>
@*
<
div
class
=
"col-sm-4 inner-box"
>
<
label
for
=
"txtboxMonth"
>
Monthly Year
</
label
>
<
input
type
=
"text"
id
=
"txtboxMonth"
/>
</
div
>
*@
@*
<
div
class
=
"col-sm-4 inner-box"
>
<
label
for
=
"lstMonthly"
>
Monthly Year
</
label
>
<
select
id
=
"lstMonthly"
class
=
"lstMontly"
>
<
option
>
</
option
>
</
select
>
</
div
>
*@
<
div
class
=
"col-sm-4 inner-box"
>
<
label
for
=
"txtboxMax"
>
Monthly Yearly
</
label
>
<
select
id
=
"lstMonthly"
class
=
"lstMontly"
>
<
option
value
=
"12"
>
12
</
option
>
</
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"
});
});
}
});
Upload Source Code
Select only zip and rar file.
Post
Reset
Cancel
Answers (
2
)
Next Recommended Forum
How browser understand javascript
How to write c# code in Html page to work click events ?