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

时间:2014-12-29 15:32:00

标签: javascript php jquery html forms

我在数据库中有一些联系人记录,我查询了数据库,并将数据库中的联系人添加到页面的侧边栏。现在,我想在单击配置文件按钮时在表单中查看主页上联系人的完整详细信息。我发现使用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>

2 个答案:

答案 0 :(得分:0)

首先,您需要隐藏包含敏感信息的输入,这些信息永远不会好。我会像你正在做的那样用你最初的电话信息填充你的侧边栏。之后,一旦用户点击侧栏上的该联系人,就会对您的数据库执行ajax调用以获取所有联系信息。

答案 1 :(得分:0)

您可以在此处执行几种可能的解决方案。

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

其次,在不了解该项目的全部范围的情况下,很难确定您的最佳需求。

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

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

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

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