Hello ,
I have a input type button and I want to call ajax after button click but ajax event is not fired . When I change input type to submit click event works but page reloads and ajax call is not called . Please help me to solve this issue .
CODE
<div class="modal-body" style="margin-left:-140px;">
<div class="panel panel-default">
<div class="panel-body">
<form id="PortfolioRuleOrderForm">
<table class="inputForm" cellspacing="0" cellpadding="0" border="0" style="width: 100%; height: 100%; table-layout: fixed">
<thead>
<tr height="18">
<td>Portfolio Rule Order</td>
</tr>
</thead>
<tfoot>
<tr>
<td style="vertical-align: middle">
<table>
<tfoot>
<tr>
<td>Rule no:</td>
<td>
<input type="Text" id="txtRule_No" name="txtRule_No" value="<%= long.Parse(Request.QueryString["RuleNo"]) %>"/>
<input type="hidden" id="MaxRule_No" name="MaxRule_No" value="<%= long.Parse(Request.QueryString["MaxRuleNo"]) %>"/>
<input type="hidden" id="PortfolioID" name="PortfolioID" value="<%= long.Parse(Request.QueryString["PortfolioID"]) %>"/>
<input type="hidden" id="RuleID" name="RuleID" value="<%= long.Parse(Request.QueryString["RuleID"]) %>"/>
</td>
<td>
<input type="button" id="Firstbtn" runat="server" value="|<" OnClick="Click_btnFirst()"/>
<input type="button" id="Prevbtn" runat="server" value="<" OnClick="Click_btnPrev()"/>
<input type="button" id="Nextbtn" runat="server" value=">" OnClick="Click_btnNext()"/>
<input type="button" id="Lastbtn" runat="server" value=">|" OnClick="Click_btnLast()"/>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
<tr class="footerrow" height="24">
<td align="right">
<input class="button" id="btnSubmit" type="button" value="OK" name="OK" />
<input class="button" id="btnCancel" onclick=" top.window.close();" type="button"
value="Cancel" name="btnCancel" data-dismiss="modal"/></td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
</div>
<script>
function Click_btnFirst() {
document.getElementById("txtRule_No").value = "1";
}
function Click_btnPrev() {
if (document.getElementById("txtRule_No").value > 1)
{
document.getElementById("txtRule_No").value = document.getElementById("txtRule_No").value-1;
}
}
function Click_btnNext(){
if (document.getElementById("txtRule_No").value < document.getElementById("MaxRule_No").value)
{
document.getElementById("txtRule_No").value = parseInt(document.getElementById("txtRule_No").value) + parseInt(1);
}
}
function Click_btnLast() {
document.getElementById("txtRule_No").value = document.getElementById("MaxRule_No").value;
}
$('#btnSubmit').on('click', function (e) {
alert("ok");
$.ajax({
url: "/WEB/ups/order.aspx/ruleorder_change",
type: "POST",
dataType: 'json',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
data: { txtRule_No: txtRule_No, MaxRule_No: MaxRule_No, PortfolioID: PortfolioID, RuleID: RuleID },
success: function () {
alert("Done!");
alert(data);
console.log('success', data);
},
failure: function () {
alert("Failure!");
}
});
});
</script>
$('#btnSubmit') on click button event ajax is not working at all . Can anyone tell me what am I doing wrong? Please help
What I have tried:
Tried with to change type = "button" to type ="submit" but the the page is reloading
<input class="button" id="btnSubmit" type="submit" value="OK" name="OK" />