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

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

view.php

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

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

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

这在HTML引导中以正确的格式显示

现在，我们想编辑/更新这个细节，即单击按钮，这些字段应该转换成文本框，自动填充这些值，如-

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

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

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

---

我们得到的是

首先，我注意到HTML中有一些错误，所以这些错误被清除了。这是问题的一部分。其中之一是

class=“fnane”

（应该是

class=“fname”

）。另一个原因是lastname文本的f1类位于错误的位置

在这些更改之后，我切换了一点jquery函数。我认为它正按照您所希望的方式运行，但如果没有，请告诉我。以下是清理后的代码：

编辑：添加链接

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

希望这对事业有所帮助

---

编辑2:添加调整JS的，事情仍然正常。

首先，我注意到HTML中有一些错误，所以这些错误被清除了。这是问题的一部分。其中之一是

class=“fnane”

（应该是

class=“fname”

）。另一个原因是lastname文本的f1类位于错误的位置

在这些更改之后，我切换了一点jquery函数。我认为它正按照您所希望的方式运行，但如果没有，请告诉我。以下是清理后的代码：

编辑：添加链接

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

希望这对事业有所帮助

---

编辑2:添加调整JS的，但仍然有效。

成功了，错误是我们使用document.ready（）而不是window.load（）。谢谢你的建议

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

    $('.fname').hide();
     $('.lname').hide();
    $('.pos').hide();
    $('.gen').hide();
    });
 })();

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

---

它成功了，错误是我们使用document.ready（）而不是window.load（）。谢谢你的建议

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

    $('.fname').hide();
     $('.lname').hide();
    $('.pos').hide();
    $('.gen').hide();
    });
 })();

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

---

@维诺德…我昨天在找这篇文章。我也是js的学习者。 您可以尝试进行此编辑。请使用window.load（）而不是document.ready（）-

---

这对我来说很好用。

@vinod…我从昨天开始就在找这篇文章。我也是js的学习者。 您可以尝试进行此编辑。请使用window.load（）而不是document.ready（）-

---

这对我来说很好用。

@cfnerd..谢谢..但在文档中。准备好（函数）fname和lname没有隐藏。另外，当我单击“编辑”按钮时，f1..应该隐藏..它太不起作用了..输出是-->FirstName:ABC&在它前面..文本框中显示的是ABC值。@cfnerd..请看，我在我的问题中插入了一个图像..希望您现在就可以看到。非常感谢。它在“编辑按钮点击”上显示的信息应该与此图像相似。@vinod我添加了两个JSFIDLE链接，以显示我认为您需要的东西正在工作。看看你的HTML，把它和我的比较一下。请注意我答案开头的评论…您的课程设置错误，这将导致问题。谢谢！它在JSFIDLE中工作正常，但通过localhost也会出现同样的问题。@vinod很高兴我能提供帮助@cfnerd..谢谢..但在document.ready（函数）中，fname和lname没有隐藏。另外，当我单击“编辑”按钮时，f1..应该隐藏..它太不起作用了..输出是-->FirstName:ABC&在它前面..文本框中显示的是ABC值。@cfnerd..请看，我在我的问题中插入了一个图像..希望您现在就可以看到。非常感谢。它在“编辑按钮点击”上显示的信息应该与此图像相似。@vinod我添加了两个JSFIDLE链接，以显示我认为您需要的东西正在工作。看看你的HTML，把它和我的比较一下。请注意我答案开头的评论…您的课程设置错误，这将导致问题。谢谢！它在JSFIDLE中工作正常，但通过localhost也会出现同样的问题。@vinod很高兴我能提供帮助@罗珊。我会试试看，让你知道。@罗珊。我会试试看，让你知道。