How to use jquery to populate a form from database record on the same page

Question

I have some contact records in a database, I have queried the database and added the contacts in the database to the sidebar of the page. Now I want to see the full details of the contact on the main page in a form when I click on the profile button. I'm finding difficulty using jQuery to get the values from this contact list to the form on the main page.

What I have done is to create some hidden fields to store the values for each records, then use jQuery to add those values to the main form.

<div class="navbar-default sidebar" role="navigation">
    <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">
            <li class="sidebar-search">
                <div class="input-group custom-search-form">
                    <input type="text" class="form-control"  placeholder="Search...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                    </div>
                    <!-- /input-group -->
                </li>
                <?php 
                    mysql_select_db('****webdb',  mysql_connect('*******','****_is***','****'))or die(mysql_error());

                    $query=mysql_query("SELECT * FROM `w******`");

                    while( $row=mysql_fetch_array($query))
                    {
                        $id=$row['id'];
                        $name= $row['first_name'].' '.$row['last_name'];
                ?>

            <input type="hidden" name="uname1" id="uname1" value="<?php echo $row['username']; ?>" />
            <input type="hidden" name="password1" id="password1" value="<?php echo $row['password']; ?>" />
            <input type="hidden" name="fname1" id="fname1" value="<?php echo $row['first_name']; ?>" />
            <input type="hidden" name="lname1" id="lname1" value="<?php echo $row['last_name']; ?>" />
            <input type="hidden" name="str1" id="str1" value="<?php echo $row['street']; ?>" />
            <input type="hidden" name="city1" id="city1" value="<?php echo $row['city']; ?>" />
            <input type="hidden" name="pcode1" id="pcode1" value="<?php echo $row['post_code']; ?>" />
            <input type="hidden" name="country1" id="country1" value="<?php echo $row['country']; ?>" />
            <input type="hidden" name="tel1" id="tel1" value="<?php echo $row['telephone']; ?>" />
                <input type="hidden" name="email1" id="email1" value="<?php echo $row['email']; ?>" />
                <input type="hidden" name="gsm1" id="gsm1" value="<?php echo $row['gsm']; ?>" />
                <input type="hidden" name="jtitle1" id="jtitle1" value="<?php echo $row['job_title']; ?>" />
                <input type="hidden" name="company1" id="company1" value="<?php echo $row['company']; ?>" />
                <input type="hidden" name="url1" id="url1" value="<?php echo $row['url']; ?>" />
                <input type="hidden" name="msn1" id="msn1" value="<?php echo $row['msn']; ?>" />
                <input type="hidden" name="skype1" id="skype1" value="<?php echo $row['skype']; ?>" /
                      <li class="user<?php echo $id ?>">
                            <a><i class="fa fa-user fa-fw"></i><?php echo $name; ?> &nbsp;&nbsp; <button class="btn btn-info" id="checkClick" onclick="myFunction()">Profile</button></a> 
                        </li>
<?php } ?>
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Dashboard</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
           <form id="signUp" class="form-horizontal cmxform" name="signUp" action="">
            <div class="form-group"><label class="col-sm-2 control-label" for="username">Username<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="username" class="form-control"  name="uname" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="password">Password<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="password" class="form-control"  name="password" type="password"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="firstname">First Name<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="fname" class="form-control"  name="fname" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="lastname">Last Name<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="lname" class="form-control"  name="lname" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="street">Street</label>
            <div class="col-sm-10"><input id="str" class="form-control"  name="str" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="city">City</label>
            <div class="col-sm-10"><input id="city" class="form-control"  name="city" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="postcode">Post Code</label>
            <div class="col-sm-10"><input id="postcode" class="form-control"  name="pcode" type="text"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="country">Country<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><select class="form-control"  name="country">
            <option selected="selected" id="country" ></option>
            </select></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="telephone">Telephone<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="tel"  class="form-control"  name="tel" type="tel"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="email">Email<b style="color:red;font-family: serif;">*</b></label>
            <div class="col-sm-10"><input id="email" class="form-control"  name="email" type="email"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="gsm">GSM</label>
            <div class="col-sm-10"><input id="gsm" class="form-control"  name="gsm" type="tel"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="jobtitle">Job Title</label>
            <div class="col-sm-10"><input id="jobtitle" class="form-control"  name="jtitle" type="text"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="company">Company</label>
            <div class="col-sm-10"><input id="company" class="form-control"  name="company" type="text" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="url">URL</label>
            <div class="col-sm-10"><input id="url" class="form-control"  name="url" type="url" /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="msnmessenger">MSN Messenger</label>
            <div class="col-sm-10"><input id="msnmessenger" class="form-control"  name="msn" type="text"  /></div>
            </div>
            <div class="form-group"><label class="col-sm-2 control-label" for="skype">Skype</label>
            <div class="col-sm-10"><input id="skype" class="form-control"  name="skype" type="text" /></div>
            </div>
            </form>

        </div>
        <!-- /.row -->
    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>

<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<script src="../js/morris-data.js"></script>

<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script>
function myFunction() {
    var username = ("#uname1").val();
    $("#uname").val(username);
    var lname = ("#lname1").val();
    $("#lname").val(lname);
    var str = ("#str1").val();
    $("#str").val(str);
    var city = ("#city1").val();
    $("#city").val(city);
    var pcode = ("#pcode1").val();
    $("#pcode").val(pcode);
    var country = ("#country1").val();
    $("#country").val(country);
    var tel = ("#tel1").val();
    $("#tel").val(tel);
    var email = ("#email1").val();
    $("#email").val(email);
    var gsm = ("#gsm1").val();
    $("#gsm").val(gsm);
    var jtitle = ("#jtitle1").val();
    $("#jtitle").val(jtitle);
    var company = ("#company1").val();
    $("#company").val(company);
    var url = ("#url").val();
    $("#url").val(url);
    var msn = ("#msn1").val();
    $("#msn").val(msn);
    var skype = ("#skype1").val();
    $("#skype").val(skype); 
  }
</script>

Answer 1

First point of concern is that you have hidden inputs containing sensitive information which is never good. I would populate your sidebar with the information from your initial call like you are doing. After that once the user clicks on that contact on the sidebar do an ajax call to your database to pull all of the contact information.

Answer 2

There's a couple possible solutions you can do here.

First, you need to switch over to mysqli or PDO instead of mysql. Since you are already using mysql, mysqli is VERY similar and won't take much effort to make the change.

Second, without knowing the full scope of this project it's hard to determine your best needs.

But, some solutions are as follows.

1. You could use a $_SESSION variable and hold your results in array with PHP. Then you could loop over the array's index to produce the desired "detailed" info on the main page.

2. You could query the database again when a name is clicked to gather the more detailed information.

3. You could use ajax to query the database again and pull the data asynchronously. Similar to the previous suggestion.