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) :

enter image description here

You could do this: add an `onchange` handler to the note box. In that handler, set an custom attribute to the text field, something like `$(notebox).attr('change','yes')`. Then in the `onclick` of your contact list, before you change anything, check if the notebox has an attribute `change=yes` and display your messge. — Michel, Sep 26 '14 at 04:59
@Michel Thanks for your response. Can you show me how exactly to do it ? — Shibbir, Sep 26 '14 at 05:06

score 0 · Accepted Answer · edited May 23 '17 at 12:05

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?
}

score 0 · Answer 2 · answered Sep 26 '14 at 08:24

Here you can use jQuery Change function to do this. For example,

<input id="field" type="text" value="abcd">
<a id="pid" href="#">Link</a>

For the above html code the jQuery code is following

$(document).ready(function(){
$("#pid").click(function(){
  $("#field").change(function(){
    alert("The text has been changed.");
  });// end of change
});// end of click function
});//end of document

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

2 Answers2