要在编辑按钮上自动填充文本框中的值，请单击并编辑/更新HTML格式的值

Question

编辑/更新HTML表单的显示详细信息。

view.php

我有一些输出/显示细节 -

  FirstName:  ABC  
  LastName:   PQR  
  Position:   Developer
  Gender:     Male 

这在HTML bootstrap中以适当的格式显示。

现在，我们要编辑/更新此详细信息，即onClick按钮，这些字段应转换为文本框，并自动填充这些相同的值 -

         ------
Gender:   Male   <-in the textbox on edit/update click button. [For all fields]
         ------

到目前为止我们已经尝试过这个 -

<div class="form-group">
    <div class="row">
        <div class="col-lg-2">
            <label for="Telephone Number">Firstname :</label>
        </div>
        <div class="col-lg-2 f1">
            <?php echo $FirstName; ?>
        </div>
        <div class="fnane">
            <input type="text" class="form-control" value="<?php echo $row['FirstName'];?>">
        </div>


    </div>
</div>

<div class="form-group">
    <div class="row">
        <div class="col-lg-2 f1">
            <label for="LastName">Lastname :</label>
        </div>
        <div class="col-lg-2">
            <?php echo $LastName; ?>                                    
        </div>
        <div class="lname">
            <input type="text" class="form-control" value="<?php echo $row['LastName'];?>">
            </div>
        </div>
    </div>
    <div class="btn-group">

    <input type="button" id="candi_v_btn" name="candi_v_btn" value="Edit" class="btn2 btn-primary show" style="margin-left:348px"> <!--onClick="document.location.href='addcandidate.php'"-->
    </div>

和Jquery一样：

(function() {
$( document ).ready(function() {
$('.fname').eq(0).hide();
$('.lname').eq(0).hide();
$('.pos').eq(0).hide();
$('.gen').eq(0).hide();

});


$(".show").click(function () {
$('.f1').eq(0).hide();
$('.fname').eq(0).show();
$('.lname').eq(0).show();
$('.pos').eq(0).show();
$('.gen').eq(0).show();
});
  })();

我们从上面的代码得到的是 - 输出值的前面显示空白文本框。

我们得到的是

Answer 1

首先，我注意到HTML中存在一些错误，因此清理了这些错误。这是问题的一部分。其中一个是class="fnane"（应该是class="fname"）。另一个是，姓氏文本的f1类错误。

在这些更改之后，我切换了一些jquery函数。我认为它的功能与你想要的一样，但如果没有，请告诉我。这是清理过的代码：

编辑：添加 JSFiddle 链接。

<强> HTML

<div class="form-group">
    <div class="row">
        <div class="col-lg-2">
            <label for="Firstname">Firstname :</label>
        </div>
        <div class="col-lg-2 f1">
            Testing 
        </div>
        <div class="fname">
            <input type="text" name="Firstname" class="form-control" value="Testing" />
        </div>
    </div><!-- /.row -->
</div><!-- /.form-group -->

<div class="form-group">
    <div class="row">
        <div class="col-lg-2">
            <label for="LastName">Lastname:</label>
        </div>
        <div class="col-lg-2 f1">
            McTesterson                                    
        </div>
        <div class="lname">
            <input type="text" name="Lastname" class="form-control" value="McTesterson" />
            </div>
        </div>
    </div><!-- /.row -->
    <div class="btn-group">
        <input type="button" id="candi_v_btn" name="candi_v_btn" value="Edit" class="btn btn-primary show" /> 
    </div><!-- /.btn-group -->
</div><!-- /.form-group -->

<强> JQUERY

(function() {
    $( document ).ready(function() {
        $('.fname').hide();
        $('.lname').hide();
    });

    $(".show").click(function () {
        $('.f1').hide();
        $('.fname').show();
        $('.lname').show();
    });
})();

希望这有助于事业。

编辑2：添加 another JSFiddle link ，可以调整JS，但事情仍然有效。

Answer 2

It Worked，我们使用document.ready（）而不是window.load（）的错误是什么。谢谢你的所有建议。

users

Answer 3

@vinod ...我昨天正在寻找这篇文章。我是js的学习者。 您可以尝试使用此编辑...使用window.load（）而不是document.ready（）as -

(function () {
    $(window).load(function(){

    //Your code as written above.
    });
 })();

这对小提琴来说很好。