如何使用 jquery 在同一页面上从数据库记录填充表单


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

我在数据库中有一些联系人记录,我已经查询了数据库并将数据库中的联系人添加到页面的侧边栏中。现在,我想在单击个人资料按钮时在主页上的表单中查看联系人的完整详细信息。我发现使用 jQuery 将此联系人列表中的值获取到主页上的表单时遇到困难。

我所做的是创建一些隐藏字段来存储每条记录的值,然后使用 jQuery 将这些值添加到主窗体中。

<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>

这里有几个可能的解决方案。

首先,您需要切换到 mysqli 或 PDO 而不是 mysql。由于您已经在使用 mysql,因此 mysqli 非常相似,不会花费太多精力进行更改。

其次,如果不了解这个项目的全部范围,就很难确定你的最佳需求。

但是,一些解决方案如下。

  1. 您可以使用 $_SESSION 变量并将结果保存在数组中与PHP。然后,您可以遍历数组的索引以生成主页上所需的"详细信息"。

  2. 单击名称进行收集时,可以再次查询数据库更详细的信息。

  3. 您可以使用 ajax 再次查询数据库并拉取数据异步。与之前的建议类似。

首先要注意的是,您有隐藏的输入,其中包含敏感信息,这从来都不是好事。我会像您一样用您最初通话中的信息填充您的侧边栏。之后,一旦用户单击侧边栏上的该联系人,就会对您的数据库进行 ajax 调用以提取所有联系信息。