Customizing popup window based on it's calling hyperlink Ids

Question

I have a html code that describes about the community members like "KS Lenscapes" and "Venky PG" which onclick calls a modal popup #visit

 <div class="portfolio-info"> <a href="#visit" id="ks" ><h3>KS Lenscapes</h3></a> </div> <div class="portfolio-info"> <a href="#visit" id="vpg"><h3>Venky P G</h3></a> </div> 

This is #visit code :

 <div id="visit" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a><br><br> <div class="text-center"> <p><a class="btn btn-primary btn-lg" href="#" id="ba">Book Appointment</a></p> </div> </div> </div> 

I need "Book Appointment" button of #visit to recognize from which anchor tag it is requested and send mail to corresponding portfolio taking its email from a file or databse.

I have no idea how to do this, Please help me out with this.

Answer 1

HTML:

<a href="#visit" id="fpp" onclick="updatePopup(this.id);"><h3>Bar</h3></a>

JavaScript:

function updatePopup(id) {
    document.getElementById('ba').href = 'path/to/handler?id=' + id;
}

The updated HTML will pass the link ID to the function when clicked, and the JavaScript will update the popup window 'Book Appointment' button accordingly.

The ID is then passed in the query string of the URL of wherever you'd like to handle the email sending part. Retrieving the email from the database and sending an email to it is an entirely different and much broader question, of which I'm sure you will be able to find information on how to do this elsewhere on the site.

Answer 2

You can use data attribute for this

<div class="portfolio-info">
    <a href="#visit" id="ks" data-url="URL TO POST THE DATA"><h3>K S Lenscapes</h3></a>
</div>

<div class="portfolio-info">
    <a href="#visit" id="vpg" data-url="URL TO POST THE DATA"><h3>Venky P G</h3></a>
</div>

and update the book appointment href URL when ever the dialog is opened.

in this case data variables can be called like $('selector').data('url')