Question

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

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

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

Answer 1

您还可以点击按钮
创建css并制作可见文本字段

希望以下示例可以帮助您

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="..." />

Answer 2

使用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();
  });
});

使用普通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>

Answer 3

您不需要使用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" />

Answer 4

嗨Ryan请检查此代码，它将创建一个文本框并在按钮之前添加它。

 <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 (!document.getElementById("textInput"))

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

4 个答案: