How to Check if other page field value is empty using jquery

Question

I'm getting all contacts from Mysql db and then showing it on html row. Each row has onClick() method After click on each row it will show a details of contact to the right side of all contacts.

showing All contacts:

echo "<tr onclick='getDetails($cdid), showthirdbox($cdid), visited(this);'>";                               
echo "<td class='' valign='top' align='left' width='20'>$companyName</td>";
echo "<td class='' valign='top'>$family_name</td>";
echo "<td class='' valign='top'>$given_name</td>";
echo "<td class='' valign='top'>$department</td>";
echo "<td class='' valign='top'>$title</td>";    
echo "</tr>";

This getDetails() call the getContactDetails.php (Contact Details) page. In this page I've a field called Note where user can enter notes.

So now I want to show a Confirm message to the user Only if user write something on Enter Note box but click other row (all contacts) without save this Enter Notes

Confirm mesaage will be : Do you want to save this Notes box before you go to other Contact ? Yes Or No. If Yes then saveNote() will be call otherwise it will load the new contact row.

I've no idea how can I do this using Jquery or Javascript ? Do you have any idea or solution ? Thank you.

getDetails() function:

function getDetails(id) {
            id = id;
            $.ajax({
            type:"post",
            url:"getContactDetails.php",
            data:"id="+id,
            success:function(res){
                $('#visiable').show();
                $('#notebox_visiable').show();
                $('#thirdBox').show();

                $('#all_contact_details').html(res);
                showthirdbox(id);
                //showNotexBox(id);
                //showAllNotesBox(id);
                }
           });
}

getContactDetails.php page have Note field:

<tr>
    <td colspan="2">Enter Note<p id="demo"></p></td>
</tr>
<tr>
    <td colspan="2">        
    <center><img id="loading-image" src="images/loading-image.gif" style="display:none; margin-bottom:10px !important;"/></center>
    <div id="Notesboxsuccess"></div>
    <form action="" method="post" id="showNotesBox" name="notebox">      
    <input type="hidden" value="<?php echo $id; ?>" name="cdid" id="cdid"/>
<tr>
    <td colspan="2"><textarea name="contentText" id="contentText"  cols="35" rows="4" placeholder="enter note"></textarea></td>
</tr>
<tr>
    <td colspan="2">&nbsp;</td>
</tr>
<tr>
    <td colspan="2"><input type="submit" value="Save" name="submit" class="submit" id="addNewNotes"/></td>
</tr>
    </form>

Home page view after click on a row (All contacts) :

Answer 1

change only triggers on blur, so as long as the user stays in the textbox there is nothing to do.

jQuery change()

Attach a change event handler:

$("#contentText").change(function() {
    $("#contentText").attr("ididwritesomething","yep");
    }

In the save button remove the attribute jQuery removeAttr()

$("#contentText").removeAttr("ididwritesomething");

In the click handler for your contact list, check if the attribute is set (from this question):

var attr = $("#contentText").attr("ididwritesomething");
if (typeof attr !== typeof undefined && attr !== false && attr=="yep"){
       //do you want to save?
}