如何使用Javascript/typescript/Jquery的按钮点击功能显示输入字段

How to display input field using button on-click function with Javascript/typescript/Jquery?

本文关键字：功能 显示 输入 字段 Javascript 何使用 typescript Jquery 按钮      更新时间：2023-09-26

我创建了一个用于添加联系人详细信息的按钮。当用户点击时，一些输入字段应该显示给用户，比如名字，姓氏。

我该怎么做?

看看这个小提琴

它使用jQuery，这使它更容易。

下面是代码片段。

$("#button").click(function() {
  $("#fn").show();
  $("#ln").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button" type="button" value="Click">
<br>
<div id="fn" hidden>First Name :
  <input type="text" />
</div>
<br>
<div id="ln" hidden>Last Name :
  <input type="text" />
</div>

你可以试试这个…

HTML 

 <input id="button" type="button" value="Click"><br>
 <div id="div_ctrl" hidden> 
   <div id="fn">First Name :<input type="text" id="txt1" /></div><br>
   <div id="ln">Last Name :<input type="text" id="txt2" /></div>
   <input id="button2" type="button" value="Submit" ><br>
 </div>       
 <div id="success" hidden>
    <div> Thank You.. Your Information is Saved Successfully! </div>
 </div>
jQuery 

$("#button").click(function() {
$("#div_ctrl").show();
$("#success").hide();
$("#button").hide(); 
}); 
$("#button2").click(function() {
$("#success").show();
$("#div_ctrl").hide();
$("#button").hide(); 
});

小提琴

没有任何代码，我只能从我的假设中回答这个问题。我假设您的输入字段没有隐藏，所以可能需要先隐藏它们。例子风格= "显示:没有"。然后在onclick中执行以下操作:

$("#buttonid").on("click", function(){
 $("#inputid").show();

});

只是一个简单的例子

首先你需要有一个模板:

var template = '<div><label for="fname">First Name:</label><input type="text" name="fname"><label for="lname">Last Name:</label><input type="text" name="lname">';

模板完成后，您所需要做的就是选择您的容器或最后一个元素，并简单地附加模板

$('button').click(function(){
    // Code for container
    $('.container').append(template);
    // Code for last pair of elements
    $('.lastInputContainer').after(template);
});

你的问题太广泛了，你应该添加你的代码，但这里是一些东西:

JSFiddle

HTML: 

<button class="btn" >Click</button>
<div class="container"></div>
JQUERY: 

$('.btn').click(function () {
    $('.container').append('<input name="firstname" placeholder="Firt name"/>');
    $('.container').append('<input name="lastname" placeholder="Last name"/>');
});
相关文章：