Develop Reference

How to disable a LinkButton if Input elements do not have a value?

Like the title says, I'm trying to disable a LinkButton if certain Input elements do not have a value and enable if one of the Input elements do. I am just trying to disable the LinkButton if one of the Input elements does not hold a value for now, and this is what I have so far:
Style:
<style>
.disabled-link
{
color: Gray;
}
</style>
Javascript:
<script>
$(function() {
$('select[id$=hdnSelectedOrganisations]').change(function() {
var value = hdnSelectedOrganisations.value;
var btnGenerateReport = $('a[id$=btnGenerateReport]')
var href = btnGenerateReport.attr('href');
if (value == null) {
btnGenerateReport.attr('href', '#').attr('myCustomAttr', href).addClass('disabled-link');
}
else {
linkButton1.attr('href', linkButton1.attr('myCustomAttr')).removeClass('disabled-link');
}
});
$(document).ready(function ()
</script>
Input Element to be read:
<div id="dOrganisationSearch" class="autosuggest-wrap clearfix">
<input type="text" id="txtClientName" runat="server" class="autosuggest client data_clientname" autocomplete="off" data-required="true" placeholder="Organisation" />
<input id="hdnClientID" runat="server" type="hidden" class="data_clientid" />
<div id="client-results" class="as-results as-results--modal"></div>
<p id="pSelectedOrganisations" runat="server" style="font-weight: bold; margin-top: 10px;"></p>
<input type="hidden" id="hdnSelectedOrganisations" runat="server"/>
</div>
Button to be disabled:
<div class="autosuggest-wrap clearfix" style="text-align:center;">
<button class="clear-filters lightblue view_btn att fillWidth" style="background-color: indianred; padding-top: 12px; padding-bottom: 11px;">CLEAR ALL FILTERS</button>
<asp:LinkButton ID="btnGenerateReport" runat="server" OnClick="btnGenerateReport_Click" CssClass="lightblue view_btn att fillWidth" Text="Generate Report" />
</div>
For some reason, no matter what I try, the button just won't disable. Thanks in advance for any help!

The if condition is wrong, because HiddenField.value and TextBox.text will never be null. It is string empty by default.
you need to change the if below:
if (value == null) {
to:
if (value.trim() == "") {

Clear input field when checkbox unchecked from a checkboxList

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('');
}
});
});

.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');
}
});
});

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();
}
});

Working With ViewState with JavaScript Altered Control

Hi I'm trying to utilize more java-script, jquery, ajax in my asp code. So for a project I built this field chooser using java-script.
<asp:ListBox ID="lb1" runat="server" Height="400px" Width="170px"></asp:ListBox>
<input type="button" id="_b_Add" value="Add >" onclick="add();" style="padding:5px; margin-left:5px; margin-top:15px; width: 131px;" />
<input type="button" id="_b_Rem" value="< Remove" onclick="remove();" style="padding:5px; margin-top: -25px; margin-left:5px; width: 131px;" />
<input type="button" value="Up" onclick="moveUp(document.getElementById('lb2'));" style="padding:5px; margin-left:5px; width: 131px;" />
<input type="button" value="Down" onclick="moveDown();" style="padding:5px; margin-left:5px; margin-top: -25px; width: 131px;" />
<asp:Button ID="_b_Reset" runat="server" Text="Reset" Width="131px"
style="padding:5px; margin-left:5px; margin-top:40px;"
onclick="_b_Reset_Click" />
<asp:Button ID="_b_Run" runat="server" Text="Run" Width="131px"
style="padding:5px; margin-left:5px; margin-top:10px;"
onclick="_b_Run_Click" />
<asp:ListBox ID="lb2" runat="server" Height="400px" Width="170px" AppendDataBoundItems="True" Enabled="False"></asp:ListBox>
and here is the important javascript:
function prom() { { $.prompt('Maximum Number of Custom Types is 14 '); } }
function add() {
var opt = document.createElement("option");
var sel = document.getElementById("lb1").selectedIndex;
if ((document.getElementById("lb1").selectedIndex) != -1 && document.getElementById("lb2").length < 14) {
document.getElementById("lb2").options.add(opt);
opt.text = (document.getElementById("lb1").options[document.getElementById("lb1").selectedIndex].text);
opt.value = (document.getElementById("lb1").value);
document.getElementById("lb1").options.remove((document.getElementById("lb1").selectedIndex));
document.getElementById("lb1").options.SelectedIndex = sel;
}
else {
prom();
}
}
function remove() {
var opt = document.createElement("option");
var sel = document.getElementById("lb2").selectedIndex;
if ((document.getElementById("lb2").selectedIndex) != -1) {
document.getElementById("lb1").options.add(opt);
opt.text = (document.getElementById("lb2").options[document.getElementById("lb2").selectedIndex].text);
opt.value = (document.getElementById("lb2").value);
}
document.getElementById("lb2").options.remove((document.getElementById("lb2").selectedIndex));
document.getElementById("lb2").options.selectedIndex = sel;
}
EDIT ***
Testing the values in lb2
foreach (var item in lb2.Items.Cast<ListItem>())
{
TextBox1.Text += (item.Value).ToString();
i++;
}
This works fine on the lb1 not but when the item have been added client side its no good.
Basically now on run the values of lb2 should be iterated and fed into my report class. However I quickly realized that the changes made by the java script to lb2 are not reflected in the viewstate when the "_b_Run_Click" event is fired. So after digging around a bit I seem to get the impression that the solution is to use a hidden field ... My question is (being a js noob) how exactly do you do that and is there an more elegant alternative ?
Thanks

Latest answer
I believe your problem is because Disabled controls are not submitted in the form post. Remove Enabled="False" from lb2 and try again.
You can prevent users from clicking on that control by onclick/onfocus and setting focus to another control. Or using a hidden box to store the values and a div to display the values.
Older answer attempt below
Are you binding in the Page_Load without if (!IsPostBack)?
This will override any values in the listbox before the button event reads them
public void Page_Load
{
lb2.DataSource = ...
lb2.DataBind();
}
If that is the problem, this will fix it.
public void Page_Load
{
if (!IsPostBack)
{
lb2.DataSource = ...
lb2.DataBind();
}
}