Clear input field when checkbox unchecked from a checkboxList - javascript

I have an ASP Webform website and one a page I have a checkboxlist which has an 'Other' option. When the user checks this checkbox, an additional textbox is displayed. All this is working fine but the issue I am having is that, if the user unchecks the checkbox, it doesn't clear it.
The below code shows what I have
$(function ()
{
$("input[name='ctl00$MainContent$Step04OtherField']").click(function ()
{
ToggleSection();
});
ToggleSection();
});
function ToggleSection()
{
if ($("#MainContent_Browsers_5").is(":checked"))
{
$("#Step04OtherFieldDiv").show();
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").style.visibility = "visible";
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").enabled = true;
}
else
{
$("#Step04OtherFieldDiv").hide();
$("#MainContent_Step04OtherField").val("");
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").style.visibility = "hidden";
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").enabled = false;
}
}
HTML for checkboxlist
<div class="row">
<div class="col-xs-offset-0 col-sm-offset-5 col-sm-2">
<asp:CheckBoxList runat="server" id="Browsers" CssClass="CheckboxList">
<asp:ListItem Text="All browsers" Value="All browsers"></asp:ListItem>
<asp:ListItem Text="Internet explorer (IE)" Value="Internet explorer (IE)"></asp:ListItem>
<asp:ListItem Text="Firefox (FF)" Value="Firefox (FF)"></asp:ListItem>
<asp:ListItem Text="Chrome" Value="Chrome"></asp:ListItem>
<asp:ListItem Text="Safari" Value="Safari"></asp:ListItem>
<asp:ListItem Text="Other" Value="Other"></asp:ListItem>
</asp:CheckBoxList>
</div>
</div>
<div class="row">
<div class="col-xs-offset-0 col-sm-offset-4 col-sm-8">
<asp:CustomValidator Display="Dynamic" runat="server" ID="custBrowserCheckboxselected" ForeColor="Red" ErrorMessage="Please select at least one browser for us to check the website on." ClientValidationFunction="BrowserCheckbox_ClientValidate" />
</div>
</div>
<div class="form-group" id="Step04OtherFieldDiv">
<asp:Label ID="Step04OtherFieldLabel" class="col-sm-4 control-label" runat="server" Text="Please specify *" AssociatedControlID="Step04OtherField"></asp:Label>
<div class="col-sm-4">
<asp:TextBox ID="Step04OtherField" runat="server" class="form-control" style="max-width: 100%" TextMode="MultiLine" Rows="5"></asp:TextBox>
</div>
<div class="col-sm-offset-4 col-sm-8">
<asp:RequiredFieldValidator Display="Dynamic" runat="server" ID="reqStep04OtherFieldErrorMessage" SetFocusOnError="true" ForeColor="Red" ControlToValidate="Step04OtherField" ErrorMessage="Please all browsers you would like the website checked on." />
</div>
</div>
But the $("#MainContent_Step04OtherField").val("") doesn't seem to be working.
Also if there a better way of writing the above I'm up for that as I think it's a little messy but I couldn't get it working any other way; as it's a checkboxlist I could add individual ids to each one.

I believe you are binding the click event to the textbox instead of the checkbox.
This code works:
$(function() {
$("#chk").click(function() {
ToggleSection();
});
ToggleSection();
});
function ToggleSection() {
var $txt = $("#txt"); // Save textbox's reference
// The right way to check if a checkbox is checked is with .prop method
if ($("#chk").prop("checked")) {
$txt.prop("disabled", false);
}
else {
$txt.prop("disabled", true).val("");
}
}
Test it here.
In the example I enable / disable the field so that you can see that the value is clear. Here it is the code to show / hide:
var $chk;
$(function() {
$("#checks :checkbox").each(function() {
if ($(this).val() == "other")
$chk = $(this);
});
$chk.click(function() {
ToggleSection();
});
ToggleSection();
});
function ToggleSection() {
var $txt = $("#txt"); // Save textbox's reference
// The right way to check if a checkbox is checked is with .prop method
if ($chk.prop("checked")) {
$txt.show();
}
else {
alert("val: " + $txt.val());
$txt.hide().val("");
alert("val: " + $txt.val());
}
}

Fixed using the below code
$(document).ready(function ()
{
// Initially hide the 'Other' field row when page is loaded
if ($("#MainContent_Browsers_5").is(":checked"))
{
$('#Step04OtherFieldDiv').show();
}
else
{
$('#Step04OtherFieldDiv').hide();
}
$('#MainContent_Browsers_5').change(function ()
{
if (this.checked)
{
$('#Step04OtherFieldDiv').show();
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").style.visibility = "visible";
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").enabled = true;
}
else
{
$('#Step04OtherFieldDiv').hide();
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").style.visibility = "hidden";
document.getElementById("<%=reqStep04OtherFieldErrorMessage.ClientID%>").enabled = false;
$("#MainContent_Step04OtherField").val('');
}
});
});

Related

html element not working inside radio button list

I have radio button list and inside one of its itemlists I have html input type="text".
When I select the option with input text field, and then click on the text field the focus gets lost and focus shifts to radio button list item that is selected.
Here is the display what I am trying to achieve
When I click on "Dealer Name" the focus gets shifted to Dealer radio button and so user can not type "Dealer Name"
This above behavior is happening in firefox. In Chrome it's not causing any problem
UPDATED:
This is the code I used when selected index change
$("#rOD").change(function () {
if ($("#rOD input:checked").val() == "Dealer") { $("#txtDName").removeAttr("disabled"); }
else { $("#txtDName").attr("disabled", "disabled"); }
});
I have tried using following code to change focus
function fc(elem) {
$("#rOD").focusout();
$(elem).focus();
}
And this is the markup
<asp:RadioButtonList Font-Size="Small" ID="rOD" data-toggle="popover" title="Field required"
data-content="Please Select" ClientIDMode="Static" runat="server"
RepeatDirection="Vertical">
<asp:ListItem Text="Owner" Value="Owner">Owner</asp:ListItem>
<asp:ListItem Text="Dealer" Value="Dealer">Dealer&nbsp <input type="text" id="txtDName" onclick="return fc(this);" placeholder="Dealer Name" disabled="disabled" data-toggle="popover" title="Field required" data-content="Please Select" style="width:150px" /> </asp:ListItem>
</asp:RadioButtonList>
try this jQuery code:-
$("#rOD").click(function (e) {
$("#rOD input:checked").next().find('input').focus();
});
$("#rOD").change(function (e) {
if ($("#rOD input:checked").val() == "Dealer") {
$("#txtDName").removeAttr("disabled");
e.preventDefault();
} else {
$("#txtDName").attr("disabled", "disabled");
}
});
Use this code,
$(document).ready(function () {
$("#rOD").change(function () {
if ($("#rOD input:checked").val() == "Dealer") { $("#txtDName").removeAttr("disabled"); $("#txtDName").focus(); }
else { $("#txtDName").attr("disabled", "disabled"); }
});
});
function fc(elem) {
$(elem).focus();
}
here is the result,

.NET ClientSide RequiredFIeldValidator with Bootstrap "has-error" Class

I'm working on a legacy .NET WebForms project where the front-end is being updated with Bootstrap.
There are some .NET Validation Controls which are validating on the ClientSide, but the "has-error" class needs to be added to the parent div of the input fields to match the Bootstrap markup.
Is there an event hook or a way of extending the .NET Validators so that I can add the "has-error" class to an invalid control group and remove it when valid?
e.g: Here is my markup which works server side:
<div class="form-group <%= IIf(RequiredFieldValidator1.IsValid, "has-error", "") %>">
<label class="control-label">Test</label>
<asp:TextBox runat="server" ID="TextBox1" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1"
ContolToValidate="TextBox1" ErrorMessage="TextBox1 is Required!" />
</div>
I was requiring the has-feedback class on the form-group div as well as the glyphicon tick and crosses depending on whether the input was valid or not. What I have found that works in my solution is to override asp.net's client side function ValidatorUpdateDisplay (note my code utilizes jQuery although you could use native JavaScript):
var originalValidatorUpdateDisplayMethod;
if (typeof(ValidatorUpdateDisplay) == "function"
&& typeof(originalValidatorUpdateDisplayMethod) != "function") {
originalValidatorUpdateDisplayMethod = ValidatorUpdateDisplay;
// now overwrite original method
ValidatorUpdateDisplay = function (val) {
originalValidatorUpdateDisplayMethod(val); // call original method first
var parent = $("#" + val.controltovalidate).parent();
if (parent.hasClass("form-group")) {
parent.addClass("has-feedback");
parent.toggleClass("has-success", val.isvalid);
parent.toggleClass("has-error", !val.isvalid);
var glyph = parent.find("span.form-control-feedback");
if (glyph.length == 0) {
glyph = $("<span class='glyphicon form-control-feedback' />");
parent.append(glyph);
}
glyph.toggleClass("glyphicon-ok", val.isvalid);
glyph.toggleClass("glyphicon-remove", !val.isvalid);
}
}
}
This adds the bootstrap validation to fields when they change as well as when an event on a control that has causesvalidation="true" is triggered.
Note: this is only adding the validations on the client side.
You'll need to put a id on the element
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
and this is the javascript which adds a class to a <div> element
var d = document.getElementById("div1");
d.className = d.className + " otherclass";
Here is what I did:
<asp:Panel ID="pnlNumberOnly" runat="server" CssClass="form-group">
<label for="<%= tbNumberOnly.ClientID %>" class="control-label">Enter a number:</label>
<asp:TextBox ID="tbNumberOnly" runat="server" CssClass="form-control" />
<asp:RegularExpressionValidator runat="server" ID="regExpNumberOnly"
ControlToValidate="tbNumberOnly"
Display="Dynamic"
ErrorMessage="Numbers only" CssClass="control-label"
ValidationExpression="^\d+$" EnableClientScript="True"/>
</asp:Panel>
and then my js looked like this:
$(document).ready(function() {
$('#<%= tbNumberOnly.ClientID %>').change(function() {
if ($('#<%= regExpNumberOnly.ClientID %>').is(':visible')) {
$('#<%= pnlNumberOnly.ClientID %>').addClass('has-error');
} else {
$('#<%= pnlNumberOnly.ClientID %>').removeClass('has-error');
}
});
});

Trying to disable CSS buttons using ASP hidden value and javascript

I am using the ASP.NET PasswordRecovery method, and have a couple of CSS buttons to submit the form OR cancel the request.
I also grab the users email address to pass along to the successtext value of PasswordRecovery method, set the ASP hiddenvalue to success, and then try to use javascript to disable the buttons based on this value.
The problem is that this hiddenfield value seems to be set to "success" on initial page load, even though when viewing the source of the rendered page shows NO value.
There is probably a better approach to this, but I have tried several different ways, and this is successful up the point that I cant change the view state of the buttons.
<script runat="server">
protected void resetuserpassword_SendingMail(object sender, MailMessageEventArgs e)
{
e.Message.IsBodyHtml = true;
e.Message.Subject = "Password Assistance";
TextBox txtUserName = (TextBox)resetuserpassword.UserNameTemplateContainer.FindControl("UserName");
string UserEmailID = Membership.GetUser(txtUserName.Text.Trim()).Email;
resetuserpassword.SuccessText = "Password sent to ";
resetuserpassword.SuccessText += UserEmailID;
ValueHiddenField.Value = "Success";
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderArea" Runat="Server">
<script type="text/javascript">
window.onload = disableButtons;
function disableButtons() {
var element = document.getElementById('ContentPlaceHolderArea_ValueHiddenField');
if (typeof(element) != 'undefined' && element != null) {
if (document.getElementById('ContentPlaceHolderArea_ValueHiddenField').value = 'Success') {
var submitBtnElement = document.querySelector("#submitBtn");
var cancelBtnElement = document.querySelector("#cancelBtn");
submitBtnElement.style.display = "none";
cancelBtnElement.style.display = "none";
}
}
}
function clickSubmit() {
document.getElementById("ContentPlaceHolderArea_resetuserpassword_UserNameContainerID_SubmitButton").click();
}
function clickCancel() {
window.location.replace("~/Login.aspx");
}
</script>
<asp:hiddenfield id="ValueHiddenField" value="" runat="server"/>
<asp:hiddenfield id="ValueHiddenField" value="" runat="server"/>
<asp:PasswordRecovery ID="resetuserpassword" runat="server"
MailDefinition-BodyFileName="~/ResetPasswordEmailTemplate.html"
OnSendingMail="resetuserpassword_SendingMail"
successtext="Password sent to email address on record."
Width="300px" Font-Names="Arial" Font-Size="Small" UserNameTitleText="" >
<InstructionTextStyle Font-Names="Arial" Font-Size="Small" />
<MailDefinition BodyFileName="~/ResetPasswordEmailTemplate.html"></MailDefinition>
<UserNameTemplate>
<div><asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" style="display:none;"></asp:Label></div>
<div style="font: arial, verdana, sans-serif;font-size: 13px;padding-bottom: 5px;font-weight: bold;">Please Enter your Username</div>
<div><asp:TextBox ID="UserName" runat="server" style="width: 180px;"></asp:TextBox></div>
<div><asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="PasswordRecovery1">*</asp:RequiredFieldValidator></div>
<div><asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal></div>
<div style="display: inline;" ><asp:Button ID="SubmitButton" runat="server" CommandName="Submit" Text="Submit" ValidationGroup="PasswordRecovery1" style="display: none;" /></div>
</UserNameTemplate>
</asp:PasswordRecovery>
<div>
<div id="submitBtn" onclick="clickSubmit()">Submit</div>
<div id="cancelBtn" onclick="clickCancel()">Cancel</div>
</div>
</asp:Content>
Your javascript if statement is assigning the value 'Success' to the Hidden Field (single equals sign).
if (document.getElementById('ContentPlaceHolderArea_ValueHiddenField').value = 'Success') {
...
}
Change it to this (double equals sign):
if (document.getElementById('ContentPlaceHolderArea_ValueHiddenField').value == 'Success') {
...
}

span not changing class on click

I have some markup as shown below
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon bootstrap-addon-info">
<asp:CheckBox runat="server" Checked="True" /></span>
<asp:TextBox ID="equitytrading" runat="server" CssClass="form-control bootstrap-default" text="Equity Trading" TextMode="SingleLine"></asp:TextBox>
</div>
<div class="input-group">
<span class="input-group-addon bootstrap-addon-info">
<asp:CheckBox runat="server" Checked="False" /></span>
<asp:TextBox ID="optionstrading" runat="server" CssClass="form-control bootstrap-default" text="Options Trading" TextMode="SingleLine"></asp:TextBox>
</div>
<div class="input-group">
<span class="input-group-addon bootstrap-addon-info">
<asp:CheckBox runat="server" Checked="False" /></span>
<asp:TextBox ID="futurestrading" runat="server" CssClass="form-control bootstrap-default" text="Futures Trading" TextMode="SingleLine"></asp:TextBox>
</div>
</div>
I am trying to change the background color of the span that holds the check box. when it is checked. Can't seem to get anything to work. Here is my latest attempt, which I really think should work since the span is the parent of the checkbox..
$(document).ready(function () {
$("input[type='checkbox']").each(function() {
if ($(this).checked) {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
}
});
});
Update:
The working version is as follows, thanks to those who replied for the help.
$(document).ready(function () {
var checkboxes = $("input[type='checkbox']");
checkboxes.on('click',function() {
//per chriz suggestion for chaining
if (this.checked) {
$(this).parent().removeClass('bootstrap-addon-info').addClass('bootstrap-addon-success');
} else {
$(this).parent().removeClass('bootstrap-addon-success').addClass('bootstrap-addon-info');
}
});
checkboxes.each(function () {
//so on page load the checked ones that were set in the html had the success class
if (this.checked) {
$(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
}
});
});
You syntax is incorrect. $(this) is a jQuery object it doesn't have checked property. So you can use this.checked or $(this).prop('checked')
Use
$("input[type='checkbox']").each(function() {
if (this.checked) {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
}
});
OR
You can simply use
$("input[type='checkbox']:checked").each(function() {
$(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
});
EDIT:
You can also try
$("input[type='checkbox']").change(function() {
if(this.checked)
$(this).parent().toggleClass('bootstrap-addon-info bootstrap-addon-success');
else
$(this).parent().toggleClass('bootstrap-addon-success bootstrap-addon-info');
}).change();
Rather than using .each on all checkboxes. Try to get checkboxes which are checked so that u wont even need to use if
$("input[type='checkbox']:checked").each(function() {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
});
a little simpler way
$("input[type='checkbox']:checked").each(function() {
$(this).parent().addClass('bootstrap-addon-succes').removeClass('bootstrap-addon-info');
});
Use this instead $(this)
$(document).ready(function () {
$("input[type='checkbox']").each(function() {
if (this.checked) {
$(this).parent().removeClass('bootstrap-addon-info');
$(this).parent().addClass('bootstrap-addon-success');
}
});
});

jquery if loop using bootstrap classes

I am using twitter bootstrap validation class to get success and error in a text-box. I have two text boxes so when a user clicks on any text-box jquery should first check if the text-box is empty if its empty then red colour should appear around the box. When a user start entering data the text-box should change the colour to green. I would like to apply this technique across all the text-boxes. This is what I have done but when running a page it is not working?:
<div class="test">
<div class="form-group has-success">
</div>
</div>
<div class="form-group has-error">
</div>
<div id="pt" class="tab-pane active">
<asp:Label ID="label1" CssClass="form-group" runat="server" Text="Name:"></asp:Label>
<asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" ></asp:TextBox>
<asp:Label ID="label2" CssClass="form-group" runat="server" Text="Surname:"></asp:Label>
<asp:TextBox ID="TextBox2" CssClass="form-control" runat="server"></asp:TextBox>
</div>
Jquery
$("TextBox").click(function () {
if ($.trim($('TextBox').val()) == "") {
$('.form-group has-error');
}
else if ($.trim($('TextBox').val()) != "") {
$('.form-group has-success');
}
});
This is the website i have used to get validation status: bootstrap example which i am following click here under form -> control status
try this:
$(function(){
$("#TextBox1").on("click", function(){
if($("#TextBox1").val().length === 0){
$("#TextBox1").parent().addClass("has-error");
}
});
$("#TextBox1").on("keydown", function(){
if($("#TextBox1").parent().hasClass("has-error")){
$("#TextBox1").parent().removeClass("has-error");
$("#TextBox1").parent().addClass("has-success");
}
});
$("#TextBox2").on("click", function(){
if($("#TextBox2").val().length === 0){
$("#TextBox2").parent().addClass("has-error");
}
});
$("#TextBox2").on("keydown", function(){
if($("#TextBox2").parent().hasClass("has-error")){
$("#TextBox2").parent().removeClass("has-error");
$("#TextBox2").parent().addClass("has-success");
}
});
});
Your HTML seems to be malformed.
I am not sure I understood correctly your question, but if you want to display the divs, then your code should work like that:
$("#tbDepartment").click(function () {
if ($.trim($('#tbDepartment').val()) == "") {
$('.form-group has-error').show();
}
else if ($.trim($('#tbDepartment').val()) != "") {
$('.form-group has-success').show();
}
});

Categories

Resources