javascript 在按钮单击事件后显示文本框

Showing Text-box after Button click event

提问by Ryan Oscar

I'm trying to generate a text-box after a button click event. The code is as follows.

我试图在按钮单击事件后生成一个文本框。代码如下。

<div id="welcomeDiv"  class="answer_list" > WELCOME </div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
</div>
<?php if(isset($_POST['button'])) { ?>
<?php echo "<script type=\"text/javascript\">
   function showDiv() {

   <input type="text" id="textInput" value="..." />
   document.getElementById('welcomeDiv').style.display = "block"; </script> ";
   }
   </script>" ?> ;
<?php } ?>

But the button click event function is not working properly. Any thoughts?

但是按钮点击事件功能无法正常工作。有什么想法吗？

回答by Narendra Jadhav

You can also create css and make visible textfield on button click

您还可以创建 css 并在单击按钮时使文本字段可见

Hope below example will help you

希望下面的例子对你有帮助

function onButtonClick(){
  document.getElementById('textInput').className="show";
}

.hide{
  display:none;
}
.show{
  display:block;
}

<div class="answer_list" > WELCOME </div>
<input type="button" name="answer" value="Show Text Field" onclick="onButtonClick()" />
<input class="hide" type="text" id="textInput" value="..." />

回答by Parag Jadhav

Using JQuery you can do it like, here's a FIDDLE

使用 JQuery 你可以这样做，这是一个FIDDLE

<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" />
<br>
<br>
<input type="text" id="textInput" value="" hidden/>

$(document).ready(function() {
  $("#myButton").click(function() {
    $("#textInput").show();
  });
});

Using Plain JavaScript, here's a FIDDLE

使用纯JavaScript，这是一个FIDDLE

<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" onclick="showInputBox()" />
<br>
<br>
<input type="text" id="textInput" value="" hidden/>

<script>
  function showInputBox() {
    if (document.getElementById("textInput")) {
      document.getElementById("textInput").style.display = 'block';
      alert("Yes");
    } else {
      //IF INPUT BOX DOES NOT EXIST
      var inputBox = document.createElement("INPUT");
      inputBox.setAttribute("type", "text");
      inputBox.setAttribute("id", "dynamicTextInput");
      document.body.appendChild(inputBox);
      alert("No");
    }
  }
</script>

回答by Ali Hesari

You don't need use PHP! Is better to use Jquery for this action.

你不需要使用 PHP！最好将 Jquery 用于此操作。

$(document).ready(function() {
  $("#myButton").click(function() {
    $("#myButton").after('<input type="text" id="textInput" value="">');
  });
});

input{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="welcomeDiv" class="answer_list"> WELCOME </div>
<br>
<input type="button" id="myButton" name="answer" value="Show Div" />

回答by Waseem Bashir

Hi Ryan please check this code it will create a text box and add it before button.

嗨瑞恩请检查此代码它将创建一个文本框并将其添加到按钮之前。

 <div id="welcomeDiv"  class="answer_list" > WELCOME </div>
 <div id="tbox_div">
 </div>
 <input type="button" name="answer" value="Show Div" onclick="showDiv()" />
 <script>
 function showDiv(){
var newtextbox ='';
if (!document.getElementById("textInput")) {
 newtextbox += '<input type="text" id="textInput" value="..." />'; 
    document.getElementById('tbox_div').innerHTML+=newtextbox;
  }
  }

if you want to add more that one text boxes then remove this if condition.

如果要添加多个文本框，请删除此 if 条件。

if (!document.getElementById("textInput"))