New in ASP.net and i want to set the validation first before it goes to the Codebehind in my asp program, because the fields does'nt validate after clicking the button inside ASP:Content
Heres my Shortcode:
<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="MainContent" CssClass="bodyForm">
<section id="content" role="main">
<div class="entry two_third">
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#contactform').validationEngine('init');
jQuery('#contactform #contact_form_formsend').click(function () {
alert("He Goes Here!");
var form_builder_url = jQuery('#contact_form_url').val();
jQuery('#Content2 .loading').animate({ opacity: 1 }, 250);
if (jQuery('#Content2').validationEngine('validate')) {
jQuery.post(form_builder_url, {
contact_name: jQuery('.txtName').val(),
contact_email: jQuery('.txtEmail').val(),
contact_subject: jQuery('.txtSubject').val(),
contact_message: jQuery('.txtaMessage').val(),
formname: 'Content2',
formtype: 'contactf'
}, function () {
jQuery('#Content2 .loading').animate({ opacity: 0 }, 250);
document.getElementById('Content2').reset();
jQuery('#Content2').parent().find('.box').hide();
jQuery('#Content2').parent().find('.success_box').fadeIn('fast');
jQuery('html, body').animate({ scrollTop: jQuery('#Content2').offset().top - 100 }, 'slow');
jQuery('#Content2').parent().find('.success_box').delay(5000).fadeOut(1000);
});
return false;
} else {
jQuery('#Content2 .loading').animate({ opacity: 0 }, 250);
return false;
}
});
});
</script>
<form action="#" method="post" id="contactform">
<asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
<br />
<p>Required fields are marked <span class="color_3">*</span></p>
<div class="form_info cmsms_input">
<label for="contact_name">Name <span class="color_3">*</span></label>
<div class="form_field_wrap">
<input type="text" name="contact_name" runat="server" id="txtName" value="" size="22" tabindex="3" class="txtName validate[required,minSize[3],maxSize[100],custom[onlyLetterSp]]"/>
</div>
</div>
<div class="cl"></div>
<div class="form_info cmsms_input">
<label for="contact_email">Email <span class="color_3">*</span></label>
<div class="form_field_wrap">
<input type="text" name="contact_email" runat="server" id="txtEmail" value="" size="22" tabindex="4" class="txtEmail validate[required,custom[email]]" />
</div>
</div>
<div class="cl"></div>
<div class="cl"></div>
<div class="form_info cmsms_input">
<label for="contact_subject">Subject <span class="color_3">*</span></label>
<div class="form_field_wrap">
<input type="text" name="contact_subject" runat="server" id="txtSubject" value="" size="22" tabindex="6" class="txtSubject validate[required,minSize[3],maxSize[100]]" />
</div>
</div>
<div class="cl"></div>
<div class="form_info cmsms_textarea">
<label for="contact_message">Message <span class="color_3">*</span></label>
<div class="form_field_wrap">
<textarea name="contact_message" runat="server" id="txtaMessage" cols="28" rows="6" tabindex="7" class="txtaMessage validate[required,minSize[3]]" ></textarea>
</div>
</div>
<div class="cl"></div>
<div class="cl"></div>
<div>
<asp:Button class="more_button fl" runat="server" tabindex="8" Text="Send a message"
ID="contact_form_formsend" onclick="btnSendEmail_Click" /></div>
<div class="loading">
</div>
</form>
</div>
</div>
</section>
</asp:Content>
Here as you can see, My problem is that it goes forward the the codebehind and submit the form even before validating the page which I encounter Errors because of null fields, Hope Someone with Golden heart help me in this problem. . Thanks in Advance
You can call javascript function before postback. OnClientClick is use to call javascript function before postback. Use following code for reference:
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" ToolTip="Save" OnClientClick="return CheckValidation()" />
Call CheckValidation() javascript function. It will postback if function returns true.
<script type="text/javascript">
function CheckValidation()
{
// do validations here and return true if validate and return false if not
}
</script>
Related
Hello guys I copied code on how to create a QR-code scanner in YouTube using JavaScript. The code is working fine as you see in the picture, but I want the data that's generated by the QR-code to go directly into the "Member ID" textbox.
This is the aspx code I included the book ID, member name, book name.
<div class="row">
<div class="col-12">
<div class="form-group">
<div style="width:400px;" id="reader"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<h4>SCAN RESULT</h4>
<br/>
<div id="result">Result Here</div>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-6">
<label>Member ID</label>
<div class="form-group">
<asp:TextBox ID="TextBox2" class="form-control" runat="server" placeholder="Member ID"></asp:TextBox>
</div>
</div>
<div class="col-md-6">
<label>Book ID</label>
<div class="form-group">
<div class="input-group">
<asp:TextBox ID="TextBox1" class="form-control" runat="server" placeholder="Book ID"></asp:TextBox>
<asp:Button class="btn btn-primary" ID="Button2" runat="server" Text="Go" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Member Name</label>
<div class="form-group">
<asp:TextBox ID="TextBox3" class="form-control" runat="server" placeholder="Member Name" ReadOnly="True"></asp:TextBox>
</div>
</div>
<div class="col-md-6">
<label>Book Name</label>
<div class="form-group">
<asp:TextBox ID="TextBox4" class="form-control" runat="server" placeholder="Book Name" ReadOnly="True"></asp:TextBox>
</div>
</div>
</div>
This the javascript code.
<script type="text/javascript">
function onScanSuccess(qrCodeMessage) {
document.getElementById('result').innerHTML = '<span class="result">' + qrCodeMessage + '</span>';
}
function onScanError(errorMessage) {
//handle scan error
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"reader", {
fps: 10,
qrbox: 250
});
html5QrcodeScanner.render(onScanSuccess, onScanError);
</script>
I tried to direct the element id to the id of member id and the code doesn't work anymore.
Please help me guys.
I have a grid with view buttons. When you click the view button a modal dialog opens and displays all the information in a form.
I also have a button (buttonID:Button1) inside my modal dialog. The problem is that when I click on the button inside the dialog nothing happens.
This is what I have so far:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="AddUser.aspx.cs" Inherits="AddUser" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<link href ="http://code.jquery.com/ui/1.11.4/themes/ui-Lightnes/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/index.js"></script>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'/>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'/>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'/>
<link rel="stylesheet" href="css/style.css"/>
<script>
function popup(idn, un, ps, em) {
$("#userid").text(idn);
$("#usern").text(un);
$("#pwd").text(ps);
$("#eml").text(em);
$("#popupdiv").dialog({
closeOnEscape: false,
position: 'fixed',
width: 1080,
height: 500,
autoOpen: true,
modal: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
},
buttons: {
Close: function () {
$(this).dialog("close");
}
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server" >
<asp:Button ID="btnAddUser" runat="server" Text="Add New User" OnClick="btnAddUser_Click" />
<asp:GridView AutoGenerateColumns="false" ID="gvUsers" runat="server" PagerStyle-CssClass="pager"
HeaderStyle-CssClass="header" RowStyle-CssClass="rows"
CssClass="mydatagrid" AllowPaging="True"
ShowHeaderWhenEmpty="true"
BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
<Columns>
<asp:BoundField DataField="UserID" HeaderText="UserID" />
<asp:BoundField DataField="Username" HeaderText="Username" />
<asp:BoundField DataField="Password" HeaderText="Password" />
<asp:BoundField DataField="Email" HeaderText="Email" />
<asp:TemplateField>
<ItemTemplate>
<img src="images/edit.png" id="imgBtn" style="width:20px; height:20px" onclick='popup("<%# Eval("UserID") %>", "<%# Eval("Username") %>","<%# Eval("Password") %>","<%# Eval("Email") %>")'></>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div class="container">
<div id="popupdiv" style=" margin: auto;
width: 100%;
padding: 10px;
background-color: #333333;
background-color: #333333; ">
<div class="well form-horizontal" id="contact_form">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">Username</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<textarea id="userid" runat="server" style="width:250px; height:35px; resize: none" name="first_name" class="form-control"></textarea>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" >Password</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<textarea type="text" id="usern" runat="server" style="width:250px; height:35px; resize: none" class="form-control"></textarea>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<textarea type="text" id="pwd" runat="server" style="width:250px; height:35px; resize: none" class="form-control"></textarea>
</div>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label">User Role</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<textarea type="text" id="eml" runat="server" style="width:250px; height:35px; resize: none" class="form-control" ></textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<asp:Button ID="Button1" data-dismiss="modal" class="btn btn-warning" runat="server" Text="Submit" OnClick="Button1_Click1"/>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</form>
</body>
</html>
Code for my button functionality but it does not work
protected void Button1_Click1(object sender, EventArgs e)
{
Response.Redirect("~/AddNewUser.aspx");
}
Try to use UseSubmitBehavior="false" in button:
<asp:Button ID="Button1" data-dismiss="modal" class="btn btn-warning" runat="server"
Text="Submit" UseSubmitBehavior="false" OnClick="Button1_Click1"/>
The most likely problem is that the modal is being created outside the form, so if the button is created outside the form it won't work.
Most modals have a way to set where the modal will be created. For instance, jquery-ui has the appendTo property. So, if you set appendTo: 'FORM' it will create the modal inside the form and your button will work as expected.
Firefox gives me error
XML Parsing Error: no root element found
Location: http://localhost:1126/5cebf834d54b41f1b944492c2bf2c852/arterySignalR/send?transport=longPolling&connectionToken=AQAAANCMnd8BFdERjHoAwE%2FCl%2BsBAAAASoOM%2FXZ%2B1UWqyQ%2FYXO2FqQAAAAACAAAAAAAQZgAAAAEAACAAAAAUFu%2Fjd8uVno2WCgoC%2BqL%2FTyk4%2F9G0tGOhVKr4EpHnIwAAAAAOgAAAAAIAACAAAACfousertSIl6j8HdDRfemeNPHDjgXABbFasP4BpsaBRjAAAADqZuISuyN4C6Z1BUb4BSojyAs0sj5vyMKuBZrkMzPz6r4vFC13EdNhT0%2BqeNlqyfpAAAAAs2SeXXAfiPKVMcCDkZ%2B3%2Fnii%2BKaLZxyKMLgriAsGDqANLiRjEVgu6ErSX%2F1ZCiiuOW02QGy5aZWT5E4Vm8IMqQ%3D%3D&requestUrl=http%3A%2F%2Flocalhost%3A4055%2FPages%2FSignIn.aspx&browserName=Firefox
Line Number 1, Column 1:
I double checked all tags starts and ends with no help :( any suggestions??
edit: Here is my sample code
<%# Page Title="" Language="C#" MasterPageFile="~/Pages/gateMasterPage.Master" AutoEventWireup="true" CodeBehind="SignIn.aspx.cs" Inherits="Gate.SignIn" %>
<div class="login" id="loginDiv">
<style scoped="scoped" >
#import "../css/custom.min.css";
</style>
<a class="hiddenanchor" id="signup"></a>
<a class="hiddenanchor" id="signin"></a>
<div class="login_wrapper">
<div class="animate form login_form">
<section class="login_content">
<form runat="server" id="signinForm">
<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods="True">
</asp:ScriptManager>
<h1>تسجيل الدخول</h1>
<div>
<input type="text" class="form-control" placeholder="إسم المستخدم" name="nameTXTBOX" id="usernameTXT" required="required" dir="rtl" />
</div>
<div>
<input type="password" class="form-control" placeholder="كلمة المرور" name="passTXTBOX" id="passTXT" required="required" dir="rtl" />
</div>
<div>
<%--<asp:Button class="btn btn-default submit" text="دخول" runat="server"></asp:Button>--%>
<a class="btn btn-default submit" id="signIn">دخول</a>
<a class="reset_pass" href="#">فقدت كلمة المرور؟</a>
</div>
<div class="clearfix"></div>
<div class="separator">
<p class="change_link">
جديد بالموقع؟
إنشاء حساب جديد
</p></div>
</form>
</section>
</div>
<div id="register" class="animate form registration_form">
<section class="login_content">
<form id="signupForm" class="col-md-offset-4 form-group ">
<h1>إنشاء حساب</h1>
<div>
<input type="text" class="form-control" placeholder="اسم المستخدم" required="" dir="rtl" />
</div>
<div>
<input type="email" class="form-control" placeholder="البريد الالكتروني" required="" dir="rtl" />
</div>
<div>
<input type="password" class="form-control" placeholder="كلمة المرور" required="" dir="rtl"/>
</div>
<div>
<a class="btn btn-default submit" href="index.html">انشاء الحساب</a>
</div>
<div class="clearfix"></div>
<div class="separator">
<p class="change_link">مسجل بالفعل
تسجيل الدخول
</p>
</div>
</form>
</section>
</div>
</div>
</div>
$(function () {
$("#signIn").click(function () {
var name = $("#usernameTXT").val();
var pass = $("#passTXT").val();
console.log(name + ":" + pass);
PageMethods.login_btn_click(name, pass, onSucceed, onError);
});
function onSucceed(res) {
console.log(res);
//$("#loginDiv").load("Profile.aspx?id=" + res);
console.log('success');
window.location.href = "Profile.aspx?id=" + res;
alert(res);
}
function onError(err) {
alert('fail');
console.log("login_btn_click PageMethod Throw Error" + err);
}
});//End of OnLoad
Is There is any way to regenerate page, if there is any missing tag end that i couldn't notice?
your XMl need to well form, all xml document must have one root element for example
<persons>
<person Id=1>
<name>Smith</name>
</person>
<person Id=2>
<name>Jack</name>
</person>
</persons>
I am working on Asp.net form as follows
<form runat="server" id="form">
<label>Select Category <span>*</span></label>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Mobiles</asp:ListItem>
<asp:ListItem>Electronics and Appliances</asp:ListItem>
<asp:ListItem>Cars</asp:ListItem>
<asp:ListItem>Bikes</asp:ListItem>
<asp:ListItem>Furniture</asp:ListItem>
<asp:ListItem>General</asp:ListItem>
</asp:DropDownList>
<div class="clearfix"></div>
<label>Ad Title <span>*</span></label>
<asp:TextBox ID="txt_title" class="phone" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Ad Description <span>*</span></label>
<%--<textarea class="mess" placeholder="Write few lines about your product"></textarea>--%>
<asp:TextBox ID="txt_Body" class="mess" placeholder="Write few lines about your product" TextMode="multiline" Style="resize: none" Width="770px" Height="150px" Wrap="true" runat="server" Font-Bold="True"></asp:TextBox>
<div class="clearfix"></div>
<div class="upload-ad-photos">
<label>Photos for your ad :</label>
<div class="photos-upload-view">
<asp:ImageButton ID="ImageButton1" UseSubmitBehavior="false" OnClientClick="return chooseFile();" ImageUrl="Images/Capture.JPG" runat="server" />
<asp:FileUpload ID="FileUploadControl" runat="server" Visible="False" />
<div id="messages">
<p>Status Messages</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="personal-details">
<label>Your Name <span>*</span></label>
<asp:TextBox ID="txt_name" class="name" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Your Mobile No <span>*</span></label>
<asp:TextBox ID="txt_phn" class="phone" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<label>Your Email Address<span>*</span></label>
<asp:TextBox ID="txt_email" class="email" runat="server"></asp:TextBox>
<div class="clearfix"></div>
<p class="post-terms">By clicking <strong>post Button</strong> you accept our Terms of Use and Privacy Policy</p>
<asp:TextBox ID="post_sub" Text="Post" type="submit" runat="server"></asp:TextBox>
<div class="clearfix"></div>
</form>
Where I want to call a hidden fileupload when Imagebutton is clicked using JavaScript as follows:
<script type="text/javascript">
function chooseFile() {
document.getElementById("#FileUploadControl").click();
alert("grt");
return false;
}
</script>
But, I was not able to call the function instead page reloads, as you can see I am returning false in the function also. Please guide me to make this work.
You have set the Visible property of the FileUpload Control to false. Therefore it does not exist on the client side. The Visible property is not the same as display:none in HTML/CSS.
You should do something like this:
<span style="display: none">
<asp:FileUpload ID="FileUploadControl" runat="server" />
</span>
And it's always better to use the ClientID instead of hard coding the ID of the FileUpload Control.
<script type="text/javascript">
function chooseFile() {
document.getElementById("<%= FileUploadControl.ClientID %>").click();
return false;
}
</script>
When you use document.getElementById you shouldn't mention # since it already searches for id attribute, in your current state it will look for id #FileUploadControl which is not your element id. change your code to this:
function chooseFile() {
document.getElementById("FileUploadControl").click();
alert("grt");
return false;
}
<form runat="server" id="form">
<div class="photos-upload-view">
<img id="ImageButton1" OnClick="return chooseFile();" src="https://maxcdn.icons8.com/office/PNG/512/Computer_Hardware/mouse_left_click-512.png" style="widdth:40px;height:40px;" />
<input type="file" ID="FileUploadControl" runat="server" style="display:none;" />
</div>
</form>
Yes, number one is you using # of you document.getElementById("#FileUploadControl") it's wrong and you should use it without # document.getElementById("FileUploadControl").
second thing if you use Visible="False" attribute it not rendering the HTML element, without that you can use below two methods.
FileUploadControl.Style["visibility"] = "hidden" in your backend file
using following css class for hide
function chooseFile() {
document.getElementById("FileUploadControl").click();
alert("grt");
return false;
}
.setDisplayNone {
display:none;
}
<asp:FileUpload ID="FileUploadControl" runat="server" CssClass="setDisplayNone" />
I have an asp.net webform and i want my submit button to be disabled if my asp:TextBox is empty and also no selection has been made for my asp:RadioButton.
Currently i have the following for my field but i dont know how i can join this for the radio buttons
JQuery
$(document).ready(function ()
{
$("#MainContent_btnRemoveUser").prop('disabled', true);
$("#MainContent_btnAddUser").prop('disabled', true);
});
// Disables 'Remove' button unless all fields popluted
$("#MainContent_txtRemoveUser").on("change", function ()
{
if ($('#MainContent_txtUsername').val())
{
$("#MainContent_btnRemoveUser").prop('disabled', false);
}
else
{
$("#MainContent_btnRemoveUser").prop('disabled', true);
}
});
HTML
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label>
<div class="col-sm-3">
<asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" CssClass="col-sm-offset-2 col-sm-3 control-label">
<b>Request For</b>
</asp:Label>
<div class="col-sm-3">
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveYourself" GroupName="RemoveRequestFor" /> Myself
</label>
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveOtherUser" GroupName="RemoveRequestFor" /> Other user
</label>
</div>
</div>
<div class="row">
<div class="col-sm-offset-8 col-sm-3" style="padding-left: 0px">
<asp:Button ID="btnRemoveUser" runat="server" Text="Remove From The List" CssClass="btn btn-danger" ToolTip="Click to remove the specified user from the payday lunch list." />
</div>
</div>
There you go! a new function has been added to disable the button and will be called on blur for text box and on change for radio buttons.
HTML
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label>
<div class="col-sm-3">
<asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<asp:Label runat="server" CssClass="col-sm-offset-2 col-sm-3 control-label">
<b>Request For</b>
</asp:Label>
<div class="col-sm-3">
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveYourself" GroupName="RemoveRequestFor" /> Myself
</label>
<label class="radio-inline">
<asp:RadioButton runat="server" ID="rbRemoveOtherUser" GroupName="RemoveRequestFor" /> Other user
</label>
</div>
</div>
<div class="row">
<div class="col-sm-offset-8 col-sm-3" style="padding-left: 0px">
<asp:Button ID="btnRemoveUser" runat="server" Text="Remove From The List" CssClass="btn btn-danger" ToolTip="Click to remove the specified user from the payday lunch list." />
</div>
</div>
JavaScript
<script>
$(document).ready(function () {
$("#MainContent_btnRemoveUser").prop('disabled', true);
$("#MainContent_btnAddUser").prop('disabled', true);
});
$("#MainContent_txtRemoveUser").on("blur", function () {
disableButton();
});
$("#MainContent_rbRemoveYourself").change(function () {
disableButton();
});
$("#MainContent_rbRemoveOtherUser").change(function () {
disableButton();
});
// Disables 'Remove' button unless all fields popluted
function disableButton() {
var isRbRemoveSelfChecked = $("#MainContent_rbRemoveYourself").is(':checked')
var isRbRemoveOtherChecked = $("#MainContent_rbRemoveOtherUser").is(':checked')
if ($('#MainContent_txtRemoveUser').val() != '' && (isRbRemoveSelfChecked || isRbRemoveOtherChecked)) {
$("#MainContent_btnRemoveUser").prop('disabled', false);
}
else {
$("#MainContent_btnRemoveUser").prop('disabled', true);
}
}
</script>
This should give you the expected result:-
$('input[name="RemoveRequestFor"]').change(function () {
if($("#MainContent_txtUsername").val().trim() != "")
$("#MainContent_btnAddUser").prop('disabled', false);
});
$("#MainContent_txtUsername").blur(function () {
if($('input[name="RemoveRequestFor"]:checked').length > 0)
$("#MainContent_btnAddUser").prop('disabled', false);
});
Also, you can use keyup function instead of blur to make your form more responsive.
Try replacing if ($('#MainContent_txtUsername').val()) with
if ($('#MainContent_txtUsername').val() != '')
For radio button, don't check any condition on onchange and write same logic.