I want to enter names using input field and then show those names dynamically on the click of a button. Can anyone provide me with a code sample that does that?
What you want to achieve is fairly easy to do with jquery. However while asking a question first give it a try and then ask if you dont get it.
$(function(){
$('#submit').on('click', function(){
var value = $('#name').val();
var text = '<p>' + value + '</p>';
$('#display').append(text);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="inputNames" id="name">
<button id="submit">Submit</button>
<div id="display"></div>
<html>
<body>
<input type="text" name="Names" id="Names">
<input type="button" value="Click" onclick="SendName();" name="">
<p id="ShowNames"></p>
<script type="text/javascript">
function SendName() {
var d= document;
var InputNames = d.getElementById("Names").value;
var ShowNames = d.getElementById("ShowNames");
ShowNames.innerHTML +=InputNames+"</br>";
}
</script>
</body>
</html>
Related
I need to create code which automatticaly calculates the circumference when the length and width are entered in two different boxes.
I managed to do so, but I want the answer to appear underneath the "calculate" button, but the answer will make the button and boxes disappear. Could someone tell me what I need to change?
Here is my code:
<!DOCTYPE html>
<html>
<body>
<form>
Width:<br>
<input id="Width" type="text" name="Width">
<br>Length<br>
<input id="Length" type="text" name="Length">
<br><br>
<input type="button" value="Calculate circumference" onclick="doMath()">
</form>
<script>
function doMath() {
var Width1 = document.getElementById('Width').value;
var Length1 = document.getElementById('Length').value;
var Circ = parseInt(Width1) + parseInt(Width1) + parseInt(Length1) + parseInt(Length1);
document.write(Circ);
}
</script>
</body>
</html>
Do not use document.write function. The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML. Create a paragraph tag and give an id and place your result in that paragraph.
<!DOCTYPE html>
<html>
<body>
<form>
Width:<br>
<input id="Width" type="text" name="Width">
<br>Length<br>
<input id="Length" type="text" name="Length">
<br><br>
<input type="button" value="Calculate circumference" onclick="doMath()">
<p id="result">
</p>
</form>
<script>
function doMath() {
var Width1 = document.getElementById('Width').value;
var Length1 = document.getElementById('Length').value;
var Circ = parseInt(Width1) + parseInt(Width1) + parseInt(Length1) + parseInt(Length1);
//document.write(Circ);
document.getElementById("result").textContent = Circ;
}
</script>
</body>
</html>
Try adding a black paragraph to the html and then use document.getElementById("").innerHTML to change the text inside of it.
I would like to see the entry appear below the form after clicking on the button. Unfortunately, my creation does not work.
this is what the form looks like
Here my not working script jQuery + form/html (I would like to implement it with jquery):
JS:
$("#submit").click(function() {
$("#name").on("keyup", function() {
var value = $(this).val();
$("p.giveout").text(value);
});
});
HTML:
<section class="form">
<label for="name">Name</label><br>
<input type="text" id="name">
<input type="submit" id="submit">
<p class="giveout">Hallo <strong>Anon!</strong></p>
<script src="lib/js/my.js"></script>
</section>
What am I doing wrong?
I wrote two scripts. How do I bring it together?
THE FIRST ONE
$("#submit").on('click', function() {
$("p.giveout").html("Neuer Text");
});
THE SECOND SCRIPT
$(function() {
$("#name").on("keyup", function() {
var value = $(this).val();
$("p.giveout").text(value);
});
});
Thanks for your hints.
Ty this approch, might help you:
$("#submit").on('click', function() {
var text = $('#name').val();
$("p.giveout strong").html(text);
});
HTML:
<section class="form">
<label for="name">Name</label><br>
<input type="text" id="name">
<input type="button" id="submit">
<p class="giveout">Hallo <strong>Anon!</strong></p>
<script src="lib/js/my.js"></script>
</section>
i want store text in p tag in javascript varible and then text show in input field.
<p id="txt" onclick="check();">yes i am stroe in js variable</p>
<input id="show" type="text" name="" disabled="">
<script type="text/javascript">
function check() {
var input = document.getElementById("txt").text;
document.getElementById("show")=input.value;
}
</script>
See this fiddle
To get the content inside a <p>, you have to use innerHTML instead of value.
Read more about innerHTML in the docs
Thus, your script should be rewritten as
function check() {
var input = document.getElementById("txt");
document.getElementById("show").value=input.innerHTML;
}
function check() {
var input = document.getElementById("txt");
document.getElementById("show").value=input.innerHTML;
}
<p id="txt" onclick="check();">yes i am stroe in js variable</p>
<input id="show" type="text" name="" disabled="">
OR
If you want to use a jQuery solution,
change your script as follows
function check() {
var input = $("#txt");
$("#show").val(input.text());
}
See the snippet below..
function check() {
var input = $("#txt");
$("#show").val(input.text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="txt" onclick="check();">yes i am stroe in js variable</p>
<input id="show" type="text" name="" disabled="">
document.getElementById('show').value = input ;
html:
<p id="PTag">Hello :D</p>
<a id="Btn">click me</a>
use text in script
<script>
$('#Btn').click(function () {
var hello= $("#PTag").html($("#text").val())[0].innerHTML;
alert(hello)
})
</script>
result
======>>>>
Hello :D
I want to create text fields according to user's input and show the text fields through JavaScript function but this code is not working!
<html>
<head>
<title>Create text Fields according to the users choice!</title>
<script type="script/JavaScript">
function createTextField(){
var userInput = parseInt(document.form2.txtInput.view);
for(var i=0; i<=userInput;i++)
{
document.write('<input type="text">');
}
}
</script>
</head>
<form action="http://localhost.WebProg.php" method="post" name="form2">
<p>How many text fields you want to create? Enter the number below!</p>
Input: <input type="text" name="txtInput">
<input type="button" name="btnInput" value="Create" onclick="createTextField();">
</form>
</html>
Please Replace this line:
var userInput = parseInt(document.form2.txtInput.view);
To
var userInput = parseInt(document.getElementsByName('txtInput')[0].value);
function createTextField(){
// alert(document.getElementById('txtInput').value);
var userInput = parseInt(document.getElementsByName('txtInput')[0].value);
for(var i=0; i<userInput;i++)
{
document.write('<input type="text">');
}
}
<html>
<head>
<title>Create text Fields according to the users choice!</title>
</head>
<form action="http://localhost.WebProg.php" method="post" name="form2">
<p>How many text fields you want to create? Enter the number below!</p>
Input: <input type="text" name="txtInput" id="txtInput">
<input type="button" name="btnInput" value="Create" onclick="createTextField();">
</form>
</html>
You shouldn't use document.write. The correct way to do it is to append the inputs to a div.
Demo on Fiddle
HTML:
<form action="http://localhost.WebProg.php" method="post" name="form2">
<p>How many text fields you want to create? Enter the number below!</p>Input:
<input type="text" name="txtInput" />
<input type="button" name="btnInput" value="Create" />
<div></div>
</form>
JavaScript:
var btn = document.getElementsByTagName("input")[1];
btn.onclick = function () {
var userInput = parseInt(document.getElementsByTagName("input")[0].value, 10);
for (var i = 0; i <= userInput - 1; i++) {
document.getElementsByTagName("div")[0].innerHTML += "<input type='text' />"
}
};
Jquery is better option to add dynamic input/div's easy to manipulate DOM.
Check the following code
<div class="box">
<label> Enter input value </label>
<input type="number" id="in_num"/>
<button type="button" id="submit"> submit </button>
<h3> Append input values</h3>
<div id="dynamicInput"></div>
</div>
$(document).ready(function(e){
$('#submit').click(function(){
var inputIndex = $('#in_num').val();
for( var i=0; i<inputIndex; i++)
{
$('#dynamicInput').append('<input type=text id=id_'+ i +'/>');
}
});
});
Demo URl: http://jsfiddle.net/sathyanaga/75vbgesm/3/
Change:
var userInput = parseInt(document.form2.txtInput.view);
To:
var userInput = parseInt(document.getElementById("txtInput").value);
And give the input textbox an id (I used "txtInput", but it can be anything).
I believe you also need to change the loop from, when I typed "2" it created 3 inputs instead of 2.
I'm trying to make a form where you input a number to a textbox and based upon that a text response is put in a textbox.
This is an example of what I have been trying to make work:
<html>
<head>
<script type="text/javascript">
function calculate()
{
var ph = document.test.ph.value;
if (ph > 7.45) {
var str = "Alkalosis";
}
else if (ph < 7.35) {
var str = "Acidosis";
}
else {
var str = "Normal";
}
document.test.acidalk.value = str;
}
</script>
</head>
<body>
<form name="test">
pH<input type="textbox" name="ph"><br>
<input type="submit" value="Calculate"><br>
<input type="textbox" id="acidalk" >
</form>
</body>
</html>
The idea of what I'm trying to achieve is if a number higher than 7.45 is put in the first text box, the button clicked, then the word "Alkalosis" is put in the second text box, but if the number is less than 7.35, the word is "Acidosis" instead.
Any help would be greatly appreciated
Well, you're most of the way there. Instead of having the button be a submit button, try
<input type="button" onclick="calculate();" value="Calculate" />
Base of your code This will be a way to do it:
<html>
<head>
<script type="text/javascript">
function calculate(){
var ph = document.getElementById('ph').value;
if(ph > 7.45){
var str="Alkalosis";
}else if(ph < 7.35){
var str="Acidosis";
} else{
var str="Normal";
}
document.getElementById('acidalk').value =str;
}
</script>
</head>
<body>
pH<input type="textbox" name="ph"><br>
<button onclick="calculate()">Calculate</button>
<input type="textbox" id="acidalk" >
</body>
</html>
hope helps!
You have the form, you have the function, you just need a way to tie them together. Do it by assigning calculate() as an event handler for the form's submit event. Make sure to return false else the form will be submitted and the result of calculate() will not be seen.
<form name="test" onsubmit="calculate(); return false">
jsfiddle.net/UhJG2
Binding to the form's submit event rather than button's click event has the added benefit of calling the function when enter is pressed. It also ensures the form is not ever accidentally submitted.
With jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>pH
<input type="textbox" name="ph" id="ph">
<br>
<button id="calculate">Calculate Acid Level</button>
<br />
<input type="textbox" id="acidalk" value="" />
</body>
<script type="text/javascript">
$("#calculate").click(function () {
var ph = $("#ph").val();
if (ph > 7.45) str = "Alkalosis";
else if (ph < 7.35) var str = "Acidosis";
else var str = "Normal";
$("#acidalk").val(str);
});
</script>
</html>