Pass Javascript variable in PHP query-CodePudding

I've created a table with data and auto-generated buttons. When i click in 1 button .add_task, a modal opens, which display another table according to retrieved key: user_id of button.

The functionallity of button is shown below:

    $(document).on('click', '.add_task', function(){
        var user_id = $(this).attr("id");
        $.ajax({
            url:"actions/fetch_jobs.php",
            method:"POST",
            data:{user_id:user_id},
            success:function(data)
            {
                $('#jobModal').modal('show');
                $('.modal-title').text("Jobs");
                `$('#vis_id')`.val(user_id);
                $('#show_inseredjobs').html(data);
            }
        })
    });

The problem is that i want to take value $('#vis_id') or user_id and put it in a php query of opened modal.

<div id="jobModal" >
    <div >
        <form method="post" id="job_form" enctype="multipart/form-data">
            <div >
                <div >
                    <button type="button"  data-dismiss="modal">&times;</button>
                    <h4 >Jobs</h4>
                </div>
                <div >
                    <div id="show_inseredjobs"></div>
                    <br/>
                    <select name="job_desc"  id="job_desc" data-live-search="true"  title="Select Job"></select>
                </div>
                <div >
                <input type="hidden" name="vis_id" id="vis_id" />
                <?php
                    require 'conn.php';
                    $result = $conn->query("SELECT job_desc FROM jobspervisit WHERE jvid = $('#vis_id') AND job_desc='Fumes'");
                    if($result->num_rows == 1) {
                        // row not found, do stuff...
                ?>
                <a href="print/print_fumes_card.php" target="_blank" ><span ></span>print button</a>
                <?php
                    }
                ?>
                    <input type="submit" name="action" id="action" form="job_form"  value="Προσθήκη" />
                    <button type="button"  data-dismiss="modal">Άκυρο</button>
                </div>
            </div>
        </form>
    </div>
</div>

More specifically, i want to do that: $result = $conn->query("SELECT job_desc FROM jobspervisit WHERE jvid = $('#vis_id') AND job_desc='Fumes'");

How can i pass that js variable in php?

I tried different combinations of expressing variable, but the code crashes. If i try to give manually numbers, the code works. To conclude, how can i pass value $('#vis_id') or user_id in $result = $conn->query("SELECT job_desc FROM jobspervisit WHERE jvid = $('#vis_id') AND job_desc='Fumes'");

CodePudding user response：

From what I can tell by looking at the structure of your modal, you seem to be using Bootstrap, though I am unclear on the version. If it's Bootstrap 5, read on. If not, please add that information to your question, and let me know.

Here's how you can do it all in one call.

First, change the page from which you are opening the modal, so that the modal isn't a part of it. You need to make a separate file to hold the modal contents. Let's call that file remote-file.php. This would be inside that file.

<?php
    // your PHP logic goes here - parse the received $_POST parameters, prepare your query - if needed, query your database
    // retrieve the data, and place it in variables for later display

    require 'conn.php';
    $jvid = isset($_POST['jvid'] ? (int)$_POST['jvid'] : 0;

    $result = $conn->prepare("SELECT job_desc FROM jobspervisit WHERE jvid = ? AND job_desc='Fumes'");
    $result->bind_paam("i",$jvid);
    $result->execute();

    if($result && $result->num_rows == 1) {
        // row found, do stuff
        $output = '<a href="print/print_fumes_card.php" target="_blank" ><span ></span>print button</a>';
    } else {
        $output = "Nothing found";
    }
?>
<div >
    <form method="post" id="job_form" enctype="multipart/form-data">
        <div >
            <div >
                <button type="button"  data-dismiss="modal">&times;</button>
                <h4 >Jobs</h4>
            </div>
            <div >
                <div id="show_inseredjobs"></div>
                <br/>
                <select name="job_desc"  id="job_desc" data-live-search="true"  title="Select Job"></select>
            </div>
            <div >
            <input type="hidden" name="vis_id" id="vis_id" value="<?=$jvid?>">
        <?php
            echo $output;
        ?>
                <input type="submit" name="action" id="action" form="job_form"  value="Προσθήκη" />
                <button type="button"  data-dismiss="modal">Άκυρο</button>
            </div>
        </div>
    </form>
</div>

Some notes about previous code:

it is assumed that jvid in your database is an INT type colum. Because of that, we could do (int)$_POST['jvid']
if jvid is not an INT but another type of column, we wouldn't do the (int)$_POST['jvid'] bit, and our binding would be slightly different

    // prepare the query
    $jvid = $_POST["jvid"];
    $results = $conn->prepare("SELECT job_desc FROM jobspervisit WHERE jvid = ? AND job_desc='Fumes'");
    $results = $conn->bind_param("s",$jvid);
    $result->execute();

Next, in the original page, where your buttons are (and where your modal's HTML was), you would need this line of code for the modal.

<div  id="jobModal"></div>

This is going to be a wrapper for your modal content. All the rest will be going inside the remote-file.php. Also, your button element, the one that's opening the modal on click? That button doesn't need to have a data-bs-target attribute, because the following code will work (since you're using jQuery and all).

<button  id="btn" data-id="1234">Open modal</button>

<div  id="jobModal"></div>

<script>
    $(document).ready(function() {
        $(document).on('click', '.add_task', function(){
            var user_id = $(this).attr("id");

            $('#jobModal').load('remote-file.php',{'jvid':user_id },function(){
                var jobModal = new bootstrap.Modal($('#jobModal')[0], {
                    backdrop:"static",
                    show:true
                });

                jobModal.show();
            });
        });
    });
</script>

Final notes:

jQuery version: 3.6.3
Bootstrap version: 5.3.0

CodePudding user response：

Your modal is static and you can't run PHP code in the modal. I think you must do this.

First change:

<?php
  require 'conn.php';
  $result = $conn->query("SELECT job_desc FROM jobspervisit WHERE jvid = $('#vis_id') AND job_desc='Fumes'");
  if($result->num_rows == 1) {
    // row not found, do stuff...
?>

  <a href="print/print_fumes_card.php" target="_blank" ><span ></span>print button</a>

<?php
  }
?>

To:

<div id="job_desc"></div>

And then, in the actions/fetch_jobs.php file when you return data:

require 'conn.php';
$result = $conn->query("SELECT job_desc FROM jobspervisit WHERE jvid = '".$_POST["user_id"]."' AND job_desc='Fumes'");
if ($result->num_rows == 1) {
  $response = "";
  foreach ($result as $row) {
    $response .=  '<a href="print/print_fumes_card.php" target="_blank" ><span ></span>print button</a>';
  }
}
return json_encode([YOUREPREVIOUSRETRUN,$response]);

And then in ajax part you must parse json data first variable [YOUREPREVIOUSRETRUN] your previous data and second data you must put it on $("#job_desc").html(second data).

Or, you can use an iframe for this part but I don't suggest that.