Passing value to an input in hidden?

Question

Hi all I have difficulty of passing value from live search in which the value of the search displayed on page via ul tag. the live search works fine.

this is my database query.(insertdemo.php)

<?php
define('DB_USER', 'root');
define('DB_PASSWORD', 'thartpc');
define('DB_SERVER', 'localhost');
define('DB_NAME', 'hospital');

if (!$db = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME)) {
die($db->connect_errno.' - '.$db->connect_error);
}

$arr = array();

if (!empty($_POST['keywords'])) {
$keywords = $db->real_escape_string($_POST['keywords']);
$sql = "SELECT id, patientid, lastname, firstname, middlename FROM patient WHERE lastname LIKE '%".$keywords."%'";
$result = $db->query($sql) or die($mysqli->error);
if ($result->num_rows > 0) {
    while ($obj = $result->fetch_object()) {
        $arr[] = array('id' => $obj->id, 'patientid' => $obj->patientid, 'lastname' => $obj->lastname,'firstname' => $obj->firstname, 'middlename' => $obj->middlename);
    }
}
}
echo json_encode($arr);

ajax and jquery code (index.php)

I just want to pass the patientid value to an input like this<. input type="hidden" id="pid" name="pid" value="$pid">

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#keyword').on('input', function() {
        var searchKeyword = $(this).val();
        if (searchKeyword.length >= 1) {
            $.post('insertdemo.php', { keywords: searchKeyword },   function(data) {
                $('ul#content').empty()
                $.each(data, function() {
                    $('ul#content').append('<li><a href="inserting.php?id=' + this.id + '">' + this.patientid + ' ' + this.lastname + ' ' + this.firstname + ' ' + this.middlename + '</a></li>');
                });
            }, "json");
        }
    });
    });
   </script>

html part

<div class="panel panel-default" style="background-color:#2B547E; border- color:#2B547E">
<div class="panel-body">
<div class="container">                         
<div class="col-md-6" style="width:400px; padding-left:0px">    
<form role="form" method="POST"> 
<div class="btn-group btn-group" style="margin-left:0px" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-md">Pharmacy  Portal</button>
</div>
                        <div class="btn-group" role="group">         
                            <input type="text" id="keyword" class="form-control" placeholder="Enter Patient ID">
                        </div>
                        <div class="btn-group" role="group">         
                            <button class="btn btn-default btn-md" style="height:34px; width:60px ;color:#2B547E " name="submit" type="submit"><span class="glyphicon glyphicon-search" ></span></button>
                        </div>
                    </div>          
                </form>
            </div>


            <div class="col-md-6 pull-right" style="padding-right:0px"> 
                <div class="btn-group pull-right" role="group">
                        <div class="dropdown">
        <a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
          <span class="glyphicon glyphicon-align-justify"></span>
          <span class="icon-bars-button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </span>
        </a>
        <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="index.php">Home</a></li>
          <li role="separator" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="">Patient</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="">Billing</a></li>

        </ul>
    </div>
                </div>

            </div>
        </div>
    </div>
</div>
 <?php $pid = ''; ?>
<div class="container">
    <ul id="content"></ul>
    <input type="text" name="pid" id="pid" class="form-control" value="<?php "$pid" ?>">

</div>

Answer 1

Add the following line to your html part

<input type="hidden" id="pid" name="pid" value=""/>

And in Jquery, update that hidden value

$("#pid").val(patientid);

Answer 2

You can try this:

$(document).ready(function() {
    $('#keyword').on('input', function() {
        var searchKeyword = $(this).val();
        if (searchKeyword.length >= 1) {
            $.post('insertdemo.php', { keywords: searchKeyword },   function(data) {
                $('ul#content').empty();
                if (data.length == 1)
                    $('#pid')
                        .val(data[0].patientid);
                $.each(data, function() {
                    $('ul#content').append('<li><a href="inserting.php?id=' + this.id + '">' + this.patientid + ' ' + this.lastname + ' ' + this.firstname + ' ' + this.middlename + '</a></li>');
                });
            }, "json");
        }
    });
});