Question

i am trying to apply some condition for an Auto generated textfield, the script objective is to edit-in-place user data by using Jquery, which is working fine, what i need here is to apply if the text field was empty , an alert message will popup

here is my Jquery code

$(document).ready(function() {
         $('#inplace_field').blur(function(){
         if ($('#inplace_field').html(''))
         {
             alert ("its empty");
         }
        });
    });

the auto generated field will come if i click on a specific data that is called inside a <p></p> html paragraph.

when i click the paragraph will call automatically a text field that has the existed value inside it and it will be ready to change like this

<p id="userEmailAddress" class="givemeMarginHere editInPlace-active" style="background-color: transparent; ">
<form class="inplace_form" style="display: inline; margin: 0; padding: 0;">
<input type="text" name="inplace_value" class="inplace_field" id="inplace_field" size="null">
<button class="inplace_save" value="">Save</button> 
<button class="inplace_cancel" value="">Cancel</button>
</form></p>

The Problem

my Jquery function doesn’t show my alert even if let the textfield empty and moved to another object by clicking tab, it doesn’t work.

-i want to mention that i called Jquery library and it works perfect with other Jquery scripts inside the page
– also #inplace_field is a unique id element.

Answer 1

To my understanding, selector.html(“any content”) sets the html value of the selected object. What you want to do is retrieve the html value and compare it to blank.

     if ($('#inplace_field').html() == "")
     {
         alert ("its empty");
     }

I’ve also had good luck using .text() and .val(), depending on what effect you’re going for.