在按钮单击上填充输入表单字段,在另一个div中使用文本值

时间:2014-02-14 04:06:38

标签: javascript jquery html forms

我需要在点击编辑按钮时从显示div收集数据并将其传递给表格div并使用jquery填充相应的输入。

HTML Form Div

enter image description here

<form class="form-horizontal" name="editform" id="editform"  action="include/abc.php" method="post">
                          <fieldset>
                            <div class="form-group">
                              <label for="username" class="col-lg-2 control-label">User Name </label>
                              <div class="col-lg-4">
                                <input class="form-control" name="username" placeholder="User Name" type="text" id="username" value="" >
                              </div>
                              <label for="email" class="col-lg-2 control-label">User Name </label>
                              <div class="col-lg-4">
                                <input class="form-control" name="email" placeholder="Email" type="text" id="uemail" value="" >
                              </div>
                            </div>
                          <div class="form-group">                        
                            <button type="submit" id="editdata" class="btn btn-success">Edit and Update </button>
                            </div>
                          </fieldset>
                        </form>

显示分区

Form Display Div

    <div class="well">
       <div id="formdisplay">
         <table>
           <tr>
               <td> User Name:</td><td id="u_name"> Paul </td> 
           </tr>
           <tr>
               <td> Email :</td><td id="u_email"> paul@abc.com</td> 
           </tr> 
         </table>
       </div>
        <button type="button" id="edit" class="btn btn-info">Edit</button>
        <button type="button" id="delete" class="btn btn-danger">Edit</button>
    </div>

Jquery

<script type="text/javascript">
$(function() 
    {
        $("#edit").click(function(e) { 

           $("#username").val($("#u_name").text());
           $("#uemail").val($("#u_email").text());  
        });
    });
</script>

1 个答案:

答案 0 :(得分:3)

您在ID选择器中缺少#

尝试,

$(function() 
{
    $("#edit").click(function(e) { 

       $("#username").val($("#u_name").text());
       $("#uemail").val($("#u_name").text());  
    });
});