CODEWITHSUNDEEP
javascriptphphtml
Ryan Oscar
Ryan Oscar

Reputation: 279

Showing Text-box after Button click event

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?

Upvotes: 3

Views: 48642

Answers (4)

Parag Jadhav
Parag Jadhav

Reputation: 1899

Using JQuery you can do it like, here's a 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

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

Upvotes: 0

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

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

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

Upvotes: 7

Waseem Bashir
Waseem Bashir

Reputation: 678

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

Upvotes: 0

Ali Hesari
Ali Hesari

Reputation: 1949

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

$(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" />

Upvotes: 0

Related Questions