Trying to set up mailto: link

Question

I have a webpage that has a form to insert vendor data, once inserted the company name is the placed into a select box. when the company is selected a table is called with all the vendor information.

My problem is the the vendor_email is called from a php script, is there a way to make the value of the id insert into a mailto: function.

 <tbody id="records">
    <td id="vendor_company"></td>
    <td id="vendor_rep"></td>
    <td id="vendor_email"></td>
</tbody>
<div class="row" id="no_records"><div class="col-sm-4">Plese select vendor name to view details</div></div>

here is my php and js code

<?php
include_once("Database/db_connect.php");
if($_REQUEST['empid']) {
$sql = "SELECT id, companyName, repName, venderEmail FROM vender_contact 
WHERE id='".$_REQUEST['empid']."'";
$resultset = mysqli_query($conn, $sql) or die("database error:". 
mysqli_error($conn));
$data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);
} else {
echo 0;
  }
 ?>

my js code

 $(document).ready(function(){
 // code to get all records from table via select box
 $("#vendors_data").change(function() {
 var id = $(this).find(":selected").val();
 var dataString = 'empid='+ id;

 $.ajax({
url:"getVendor.php",
dataType: "json",
data: dataString,
cache: false,
success: function(vendorData) {
if(vendorData) {
$("#heading").show();
$("#no_records").hide();
$("#vendor_company").text(vendorData.companyName);
$("#vendor_rep").text(vendorData.repName);
$("#vendor_email").text(vendorData.venderEmail);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});

Answer 1

It's absolutely possible! You simply need to use .html() instead of .text().

Note that the mailto comes on the href attribute, which is unique to the <a> tag. As such, you'll want to place your <a href=""></a> inside of your <td id="vendor_email"></td>:

$("#vendor_email").html("<a href='mailto:" + vendorData.vendorEmail + "'>" + vendorData.vendorEmail + "</a>");

Which will render as something like:

vendorData = {};
vendorData.vendorEmail = 'test@test.com';

$("#vendor_email").html("<a href='mailto:" + vendorData.vendorEmail + "'>" + vendorData.vendorEmail + "</a>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="vendor_email"></div>

In addition to this, please be aware that your MySQLi is vulnerable to SQL injection. You should use prepared statements, and also ensure that your database user only has the required privileges in order to prevent this.

You can refer to this post for further information on how to prevent SQL injection in PHP :)

Hope this helps!

Answer 2

By using jQuery's .html() method you can insert html like so:

$( '#vendor_email' ).html( '<a href="mailto:' + vendorData.vendorEmail + '">' + vendorData.vendorEmail + '</a>' );

By the way, I couldn't help but notice that you've spelled vendor as "vender" in venderEmail.