How to pass dynamic data from html data-attribute to a query using javascript?

Question

I have this button that hold data from database

     <button title="View Conversation" type='button' class='btn btn-default btn-sm' data-toggle='modal' data-target='#viewConversationModal'
             data-empproj_id="<?=$employeeproject['emproj_id'];?>"
             data-empprojconvoid="<?=$employeeproject['convofeed_id'];?>"
             **data-empprojconvotoempid**="<?=$employeeproject['toemployee_id'];?>"
             **data-empprojconvofromemip**="<?=$employeeproject['fromemployee_id'];?>"
             data-empprojconvoconversation='"<?=$employeeproject['conversation'];?>"' >     
     </button>  

I need to use the data inside a query

    <?php
     $toemployee =  data-empprojconvotoempid
     $fromemployee = data-empprojconvofromemip

    $convoQ = "SELECT * FROM projects as p 
    JOIN employeeprojects AS ep ON p.project_id = ep.project_id 
    JOIN employees AS e ON ep.employee_id = e.employee_id 
    JOIN clients AS c ON p.client_id = c.id 
    JOIN employeeprojects_conversation AS epc ON ep.employee_id = epc.toemployee_id
    WHERE epc.toemployee_id=**$toemployee** AND epc.fromemployee_id=**$fromemployee**"; 
   $displayConvoResult=mysqli_query($db, $convoQ);

;?>

then make a while statement to display conversation in the modal

<?php while($conversation=mysqli_fetch_array($displayConvoResult)){ ?>
<div class='row convorow'>
<div class='col-md-6 pull-left'>
<p style="font-size: smaller;">Messenger A :</p>
<textarea readonlyrows="4" cols="50"></textarea>
</div>
<div class='col-md-6 pull-right'>
<p style="font-size: smaller;">Messenger B :</p>
<textarea readonlyrows="4" cols="50"></textarea>
</div>
</div>
<?php } ;?>

script so far

$('#viewConversationModal').on('show.bs.modal', function(con){
var button = $(con.relatedTarget);
//get data
var empprojconvotoempid = button.data('empprojconvotoempid');
var empprojconvofromemip = button.data('empprojconvofromemip');
});

Answer 1

Just for clarity:

• PHP runs in the Back-end
• JavaScript, HTML run in the Front-end (Browser)

Now to send the data to the server from the Front-End you can do something like:

$("button").click(_ => {
    const me = $(this)
    $.ajax({
        url: window.location,
        method: "post",
        contentType: "application/json",
        data: {
            empprojToId: me.attr("data-empprojconvotoempid"),
            empfromEmIp: me.attr("data-empprojconvofromemip"),
        },
    })
})

Edit:

It seems in your case, that you would rather have the button perform a normal post and render the entire page again with the modal, and new conversations?

If so, then you can put all your data in a html form:

<form method="post">
    <input name="empproj_id" value="<?=$employeeproject['emproj_id'];?>">
    ...
    <button type="submit">
</form>
<!--Insert Modal Code here-->

Answer 2

You should send data from html to php. Since html running on client side (in the browser) and php file executing on server side.

PHP manual: http://php.net/manual/en/reserved.variables.get.php http://php.net/manual/en/reserved.variables.post.php

Simplest way, using jQuery:

<button id='buttonWithData' {data-attributes}></button>
<script type='text/javascript'>
    var data = $('#buttonWithData').data();
    $.ajax('urlOfYoursPhpFile', {
      async: false,
      data: data
    });
</script>

You can then catch data in your php file using GET array.

Beware of SqlInjection working with GET and POST arrays.

Answer 3

Use jquery selectors to get the data from the attributes and then send it throught ajax. var dataarray += $("button").attr ("data-...") get all the data in an array or variables and then $.ajax ({ data: {"attrdata" : dataarray} , type: "POST",target="callback.php", sucess: function (data){ $("#modal").html(data);} });