I am performing some crude operations in PHP without refreshing the page.

I don't understand this on() function, what does it do? And what is the parameter #add doing here?

$(document).on('click','#add',function(){
    var name = $('#name').text();   //name & lname-table attribut names 
    var lname= $('#lname').text();
    if(name =='')
    {
        alert("Enter name");
        return false;
    }    
    if (lname=='')
    {
        alert("Enter last name");
        return false;
    }
})

I am performing some crude operations in PHP without refreshing the page.

I don't understand this on() function, what does it do? And what is the parameter #add doing here?

$(document).on('click','#add',function(){
    var name = $('#name').text();   //name & lname-table attribut names 
    var lname= $('#lname').text();
    if(name =='')
    {
        alert("Enter name");
        return false;
    }    
    if (lname=='')
    {
        alert("Enter last name");
        return false;
    }
})

• javascript
• jquery
• ajax
• events
• event-handling

• That's JavaScript, specifically the jQuery library. – halfer Commented Feb 20, 2017 at 9:52
• This isn't PHP; this is javascript; and on is used to set an event – Mark Baker Commented Feb 20, 2017 at 9:52
• 1 #add is an id reference to a particular element in your HTML. on() is a way of attaching a behaviour to an event, in this case click. – halfer Commented Feb 20, 2017 at 9:53
• basically its a event attacher – Dev Man Commented Feb 20, 2017 at 9:55
• check this w3schools./jquery/event_on.asp – Kamuran Sönecek Commented Feb 20, 2017 at 10:33

2 Answers 2

The on() method attaches one or more event handlers for the selected elements and child elements.

Read more about jQuery on() Method

As per your code $(document).on('click','#add'), I guess it's creating a delegated event.

It will directly fired on #add id element

That's jQuery related. Check de 'on' documentation in jquery.

In your php page you must have an element with the ID 'add'. This jQuery code is executed when the users performs a mouse click on the 'add' element.