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?
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="..." />
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" />
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"))
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>
Related
I am using HTML and javascript to getting some values from the user. I have one input text and two buttons on the page. first button for adding input text to form and the second button for sending data to javascript script. my code is like the following code :
function add_input_function() {
var html = "<input type='text' placeholder='Your text' id='text_input[]'/><br/>";
$("#container").append(html);
}
function send_function() {
var inputs = document.getElementById("text_input");
for (var i = 0; i < inputs; i++) {
console.log(inputs.value);
}
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input[]" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
I want to get all of the values and show them in the console and separate with -. Can you help me?
(My for loop doesn't work now)
Add some class for each input, then when you click on send button, grab all element by class selector, and iterate loop on element to get value
<form method="post">
<div id="container">
<input class="input info" type="text" placeholder="Your text" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
<script>
function add_input_function() {
var html = "<input type='text' class='info' placeholder='Your text' /><br/>";
$("#container").append(html);
}
function send_function() {
var inputText = [];
var inputs = document.getElementsByClassName("info");
for (var i = 0; i < inputs.length; i++) {
console.log(inputs[i].value);
inputText.push(inputs[i].value)
}
var finalContent = inputText.join(' - ');
console.log(finalContent);
}
</script>
This is an alternative
function add_input_function() {
var html = "<input type='text' placeholder='Your text' id='text_input[]'/><br/>";
$("#container").append(html);
}
function send_function() {
let result = '';
$('input[type="text"]').each(function(index){
result += $(this).val() + '-';
});
alert(result);
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input[]" /><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
i hope it helps...
var index=1;
var inpidarr=[];
inpidarr.push("text_input0")
function add_input_function() {
var html = "<input type=\"text\" placeholder=\"Your text\" id=\"text_input".concat(String(index))+"\"/><br/>";
$("#container").append(html);
inpidarr.push("text_input".concat(String(index)))
index++;
}
function send_function() {
;
for(i=0;i<inpidarr.length;i++)
{
console.log(document.getElementById(inpidarr[i]).value);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form method="post">
<div id="container">
<input class="input" type="text" placeholder="Your text" id="text_input0"/><br/>
</div>
<br/>
<input onclick="add_input_function()" type="button" id="add" value="Add Input">
<br/>
<input onclick="send_function()" type="button" id="add" value="Send">
</form>
Below is my html code for the form
<form id="taxi_distance_input" >
<div class="col-md-8" style="display: inline-block; left:-30px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" id="usr"> </input>
<span class="input-group-addon" style="width: 50px">km</span>
</div>
</div>
<div class="col-md-4" style="padding-left:0px; margin-left:-10px">
<input type="button" class="btn btn-success" value="Submit" id="myButton"> </input>
</div>
</div>
<p> </p>
</form>
And in the bottom of the page I give the
<script src="/js/form_input_parameter.js"></script>
Inside the form_input_parameter.js i have written the script
$(document).ready(function(){
$('#myButton').click(function(){
var text = $("#usr").val();
alert(text+"success");
});
But it is not working .Any help is apprecited
You've forgotten the }); at the end of your JS code
The input tag should end with />
$(document).ready(function() {
$('#myButton').click(function() {
var text = $("#usr").val();
alert(text + " success");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr" />
<input type="button" class="btn btn-success" value="Submit" id="myButton" />
I wrote this code to replace the element in div:"change" with the input given in textbox:"use10" when the button:"insert" is clicked.But when i click nothing
is happening please help.Here is my code:
<div id="change">
<?php
echo $r9['fname'];
echo " ";
echo $r9['lname'];
echo " ";
?>
</div>
<div id="dialog" title="Change Details">
<form method="POST" name="changename">
<input type="text" id="use10" name="use10" placeholder="First Name">
<input type="text" id="use20" name="use20" placeholder="Last Name">
<button type="button" type="submit" name="insert" id="insert" class="btn btn-success">Change</button>
<script>
document.getElementById("insert").onclick=function(){
var fn=getElememtById("use10").value;
document.getElementById("change").innerHTML=fn;}
</script>
</form>
</div>
Try this:
Jsfiddle: https://jsfiddle.net/74Lmwcmt/
$( document ).ready(function() {
document.getElementById("insert").onclick=function(){
var fn=document.getElementById("use10").value; // you forget to write "document." over here
document.getElementById("change").innerHTML=fn; // give id of div
}
});
OR
window.onload = function() {
document.getElementById("insert").onclick=function(){
var fn=document.getElementById("use10").value; // you forget to write "document." over here
document.getElementById("change").innerHTML=fn; // give id of div
}
};
I have just used your code and changed it a bit. Check out if this is what you are looking for.
<div id="change" title="Change Details">
<p> <form method="POST" name="changename"><input type="text" id="use10"
name="use10"
placeholder="First Name"> </p>
<p> <input type="text" id="use20" name="use20"
placeholder="Last Name"> </p>
<button type="button" type="submit" name="insert" id="insert" class="btn
btn-success">Change</button><script>
document.getElementById("insert").onclick=function(){
var fn=document.getElementById("use10").value;
document.getElementById("change").innerHTML=fn;}</script>
</form>
</div>
this is my code.jsp file and I've written javascript in it to enable/disable textbox name=uinp when toggling checkbox name=input but it is not working!
<html>
<body>
<form action="compile.jsp" method="get">
Custom Input: <input type="checkbox" name="input" onchange="toggle('input','uinp')"><br><br>
<textarea rows="5" cols="15" name="uinp" style="display: none"></textarea><br><br>
<br><input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(chk,txt)
{
if(document.getElementById(chk).checked)
document.getElementById(txt).style.display='';
else
document.getElementById(txt).style.display='none';
}
</script>
</body>
</html>
Please anyone help me with this!
You need to set id for textarea otherwise getElementById() returns null, since there is no element with that id. Also you can pass this context to refer the checkbox.
<form action="compile.jsp" method="get">
Custom Input:
<input type="checkbox" name="input" onchange="toggle(this,'uinp')">
<br>
<br>
<textarea rows="5" cols="15" id="uinp" style="display: none"></textarea>
<br>
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Cancel">
</form>
<script>
function toggle(ele, txt) {
if (ele.checked)
document.getElementById(txt).style.display = '';
else
document.getElementById(txt).style.display = 'none';
}
</script>
This question already has answers here:
Javascript show element on click
(3 answers)
Closed 3 years ago.
I have following DIV . I want to display the DIV after button click .Now it is display none
<div style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" >
HTML Code:
<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
Javascript:
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
See the Demo: http://jsfiddle.net/rathoreahsan/vzmnJ/
HTML
<div id="myDiv" style="display:none;" class="answer_list" >WELCOME</div>
<input type="button" name="answer" onclick="ShowDiv()" />
JavaScript
function ShowDiv() {
document.getElementById("myDiv").style.display = "";
}
Or if you wanted to use jQuery with a nice little animation:
<input id="myButton" type="button" name="answer" />
$('#myButton').click(function() {
$('#myDiv').toggle('slow', function() {
// Animation complete.
});
});
<script type="text/javascript">
function showDiv(toggle){
document.getElementById(toggle).style.display = 'block';
}
</script>
<input type="button" name="answer" onclick="showDiv('toggle')">Show</input>
<div id="toggle" style="display:none">Hello</div>
<div style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" onclick="document.getElementsByClassName('answer_list')[0].style.display = 'auto';">