Asp.net Check If Label Displayed Or Not Using JQuery

Question

I have an Asp.net application which I have a JQuery function which disables/enables my 'Submit' button. At present my 'Submit' button is disabled if any of my fields are blank but I now want to add another condition to it to see if my error message is displayed or not.

My message is displayed on the server side so if the name already exists an error message is displayed as soon as you tab out the field (All this works fine).

I cant get it to work at all.

HTML of label

<asp:Label id="placeExists" runat="server" Text="The place you suggested already exists in the list of 'Places'." Visible="false" style="color: red"></asp:Label>

Current JQuery

//Disables/Enables submit button on modal
        $("#MainContent_fldPlace").on("blur", function ()
        {
            disableButton();
        });

        $("#MainContent_fldLocation").on("blur", function ()
        {
            disableButton();
        });

        $("#MainContent_fldName").on("blur", function ()
        {
            disableButton();
        });

        function disableButton()
        {
            if ($('#MainContent_fldPlace').val() != '' && $('#MainContent_fldLocation').val() != '' && $('#MainContent_fldName').val() != '')
            {
                $("#MainContent_btnSubmitNewPlace").prop('disabled', false);
            }
            else
            {
                $("#MainContent_btnSubmitNewPlace").prop('disabled', true);
            }
        }
        ////////

I tried adding:

$('#MainContent_placeExists').visible == true

to my IF but it didn't work

Below is my code behind for the show/hide of the label on server side

 #region Checks if the place exists in 'Places' db when field clicked out of
        protected void fldPlace_TextChanged(object sender, EventArgs e)
        {
            //Keeps the 'Suggest A Place' modal open
            ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "keepOpenSuggestPlaceModal();", true);

            if (!string.IsNullOrEmpty(fldPlace.Text))
            {
                string connection = ConfigurationManager.ConnectionStrings["PaydayLunchConnectionString1"].ConnectionString;
                SqlConnection conn = new SqlConnection(connection);

                conn.Open();
                SqlCommand cmd = new SqlCommand("SELECT 1 FROM Places WHERE Place = @Place", conn);
                cmd.Parameters.AddWithValue("@Place", fldPlace.Text);
                SqlDataReader rd = cmd.ExecuteReader();

                if (rd.HasRows)
                {
                    placeExists.Visible = true;
                }
                else
                {
                    placeExists.Visible = false;
                }
            }
        }
        #endregion

Rendered HTML from website

<div class="modal-body">
     <p>If you would like to suggest a place please populate the fields below and click 'Submit'.</p>
     <p>Your request will then be reviewed by a site administrator and if accepted, it will be added to the list.</p>
     <span id="MainContent_placeExists" style="color: red;">The place you suggested already exists in the list of 'Places'.</span>    
     <div class="col-sm-offset-2">
          <div class="form-group">
               <label class="col-sm-3 control-label" id="MainContent_lblPlace" for="MainContent_fldPlace">Place</label>
               <div class="col-sm-6">
                    <input name="ctl00$MainContent$fldPlace" class="form-control" id="MainContent_fldPlace" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$fldPlace\',\'\')', 0)" type="text" value="Blaize">
                </div>
           </div>
           <div class="form-group">
                <label class="col-sm-3 control-label" id="MainContent_lblLocation" for="MainContent_fldLocation">Location</label>
                <div class="col-sm-6">
                     <input name="ctl00$MainContent$fldLocation" class="form-control" id="MainContent_fldLocation" type="text">
                 </div>
           </div>
           <div class="row">
                <label class="col-sm-3 control-label" id="MainContent_lblName" for="MainContent_fldName">Your Name</label>
                <div class="col-sm-6">
                     <input name="ctl00$MainContent$fldName" class="form-control" id="MainContent_fldName" type="text">
                </div>
           </div>
      </div>
 </div>

Can you show the rendered HTML of the label, not the server side control's HTML. — Rory McCrossan, Dec 15 '15 at 13:23
You should use [Control.ClientID](http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid(v=vs.110).aspx) like `$('#').show()` — Satpal, Dec 15 '15 at 13:26
@RoryMcCrossan Added the web rendered HTML but added it all. It renders it as a `span` — murday1983, Dec 15 '15 at 13:30
Try `$('#MainContent_placeExists').visible == true` ==> `$('#MainContent_placeExists').css('visibility', 'visible');` — Tushar, Dec 15 '15 at 13:30
@Satpal I don't need to show/hide it as this is already done and taken care off. I want to check if my `label` is displayed or not and add this to my `IF` I already have to check if my fields are blank or not — murday1983, Dec 15 '15 at 13:33
To check if an element is visible, you can use `$(selector).is(':visible');`. And the three `blur` handlers can be written as `$("#MainContent_fldPlace, #MainContent_fldLocation, #MainContent_fldName").on("blur", disableButton);` — Tushar, Dec 15 '15 at 13:34
@Tushar Little unsure how or where to use the `$(selector)` but appreciate the improvement for the 3 `blur` handlers I am new to JQuery. Could you please provide an answer with the `$(selector)` in so I can see it and then see if your suggestion works — murday1983, Dec 15 '15 at 13:58
@Tushar I also tried your first suggestion but this too didn't work for me. — murday1983, Dec 15 '15 at 13:59
@murday1983 `selector` here is the element that need to check if it is visible. See [Checking if an element is hidden](http://stackoverflow.com/questions/178325/checking-if-an-element-is-hidden) — Tushar, Dec 15 '15 at 14:04

Lucas Souza · Answer 1 · 2015-12-15T14:29:13.200

1

There's a misconception here. ASP .NEP Visible=false controls will not be rendered, so you couldn't find then. visible is not a html attribute. You can check element's length with jquery

function disableButton(){
   if($('#<%= placeExists.ClientID %>').length === 0){
      $("#MainContent_btnSubmitNewPlace").prop('disabled', false);
   }
   else {
      $("#MainContent_btnSubmitNewPlace").prop('disabled', true);
   }
}

edited Dec 15 '15 at 14:29

answered Dec 15 '15 at 13:35

Lucas Souza

371
1
6

I have added this to my `IF`and it appears to be working but for the wrong way around. When then message is not displayed, my 'Submit' button is still disabled and when it is displayed it enables my button but it should be the other way around (Disabled when displayed and enabled when not displayed as per my `JQuery` `IF` in my initial post – murday1983 Dec 15 '15 at 14:21

Manish Goswami · Accepted Answer · 2015-12-15T15:30:26.300

1

To be Label you need to use #LabelID.text() or #labelID.html()

if($("#MainContent_placeExists").text() != '')
{
   // Do your code 
} 

or you can do as @LucasSouza said  

if($("#MainContent_placeExists").length > 0)

{
   // Do your code 
}

edited Dec 15 '15 at 15:30

answered Dec 15 '15 at 14:25

Manish Goswami

848
8
26

Went with your first suggestion and added to my existing `IF` and worked first time – murday1983 Dec 15 '15 at 15:15

Asp.net Check If Label Displayed Or Not Using JQuery

2 Answers2