showing the value of textbox under it - javascript

i want to write the value in textbox under it,how can i do it?thanks in advance
i wrote this codes:
<html>
<head>
<script language="javascript">
function show (text){
document.write("text");
}
</script>
</head>
<body>
<input type=textbox name=textbox value="Insert Name"/>
<input type=button name=button value="OK" onclick=show(textbox.value)/>
</body>
</html>

first of all: document.write replaces document content, use window.alert or such
next, consider enclosing fields in the <form> and then use show(this.form.textbox.value)
thats besides other scripting errors :)

Modify your html like this:
<input type=textbox name=textbox value="Insert Name" id="txt" />
<span id="spn"></span>
<input type=button name=button value="OK" onclick="show();" />
And JavaScript like this:
function show(){
document.getElementById('spn').innerHTML = document.getElementById('txt').value;
}

Something like this should work: Working example
<html>
<head>
<script language="javascript">
function show (text){
document.getElementById("text").innerHTML = text;
}
</script>
</head>
<body>
<input type=textbox name=textbox id=textbox value="Insert Name"/>
<input type=button name=button value="OK" onclick="show(document.getElementById('textbox').value)"/>
<div id="text"></div>
</body>
</html>

Related

Simple Calculator with javascript

I am getting back into javascript for a job I am going to start soon. for some reason i forgot how to do a simple calculator. I dont understand why my even onclick is null when it is a button. I am sure this is a very simple answer I just cant see it.
if(document.getElementById("add").onclick == true){
alert("hey");}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src= "script.js"> </script>
</head>
<body>
<h3> Calculator: </h3>
<input type="text" name="a">
<input type="text" name="b">
<input type="button" value="+" name="add">
</body>
</html>
To get you started I made minor changes to your code, go through the changes and understand the use of each change.
function sum(){
var a = document.getElementById("a");
var b = document.getElementById("b");
alert(Number(a.value) + Number(b.value));
}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src= "script.js"> </script>
</head>
<body>
<h3> Calculator: </h3>
<input type="text" name="a" id="a">
<input type="text" name="b" id="b">
<input type="button" onClick="sum()" value="+" name="add">
</body>
</html>

Why I can not use + in javascript?

<!DOCTYPE html>
<html>
<head>
<title>Function</title>
<script type="text/javascript">
function sum(x,y) {
var z = x+y;
document.write("Sum is"+z);
}
</script>
</head>
<body>
<form>
<input type="" id="t1" name=""/>
<input type="" id="t2" name=""/>
<input type="button" onclick="sum(t1.value,t2.value)" value="Click me"/>
</form>
</body>
</html>
Hi Guys, I am a beginner with JavaScript and I'm facing this little problem. If I enter 5 and 5 the result is 55. But I want to sum up these values.
As #TonyDong said, uses parseInt to convert the string to int if desired input is integer.
To make your function works better, you need to validate the inputs first before sum.
Below is one example:
make the type of two inputs are 'number'
checkValidity() for the form or two inputs in function=sum. if validated, sum the values, if not, return error.
<!DOCTYPE html>
<html>
<head>
<title>Function</title>
<script type="text/javascript">
function sum(x,y)
{
if(document.getElementById("submit").checkValidity()) {
var z = parseInt(x)+parseInt(y);
document.write("Sum is "+z);
}
else {
document.write("Input value must be Int!");
}
}
</script>
</head>
<body>
<form id="submit">
<input id="t1" name="" type="number"/>
<input id="t2" name="" type="number"/>
<input type="button" onclick="sum(t1.value,t2.value)" value="Click me"/>
</form>
</body>
</html>
You should covert x and y to integers first, like parseInt(x) and parseInt(y) while doing the summation.
Then, instead of document.write, you can use console.log.
<!DOCTYPE html>
<html>
<head>
<title>Function</title>
<script type="text/javascript">
function sum(x,y) {
var z = parseInt(x)+parseInt(y);
console.log("Sum is",z);
}
</script>
</head>
<body>
<form>
<input type="" id="t1" name=""/>
<input type="" id="t2" name=""/>
<input type="button" onclick="sum(t1.value,t2.value)" value="Click me"/>
</form>
</body>
</html>

Populate data from one html file to another

I have two html pages named order.html,check.html and test.js(included in both html files)
When i click on submit button in order.html,amount field value from order.html should get updated/populate into cost field of check.html.
Below is the code i am using but its not working,can someone let me know whats wrong??
order.html
<html>
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<form name="order" action="check.html" method="get">
name:<input type ="text" id="amount" name="amount">
<input type="submit" value="finish" onclick="cost()" >
</form>
</body>
</html>
check.html
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<form name="check" action="confirm.html" method="get">
<input type="text" name="cost" id="cost" readonly="readonly">
</form>
</body>
</html>
test.js
function cost(){
var amount= $("#amount").val();
jQuery.load("check.html",function(){
$("#cost").html(amount);
});
}
Your order.html input type submit should be input type button.
Change your test.js to
function cost(){
var amount= $("#amount").val();
$('body').load("check.html",function(){
$("#cost").val(amount);
});
}
And input type="button"
Try this:
order.html:
<html>
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="main_div">
<form name="order" action="check.html" method="get">
name:<input type="text" id="amount" name="amount"> <input
type="button" value="finish" id="submit_btn">
</form>
</div>
</body>
</html>
Jquery:
$(document).ready(function() {
$('#submit_btn').click(function() {
var amount = $("#amount").val();
$('#main_div').load("check.html", function() {
$('#main_div').find("#cost").val(amount);
});
});
});

Push user input to array

Hi so yes this is a previous issue i have had, i have hit the books and whent back to basics adjusted a few things but im still having trouble getting the input value to push to the array can some one please help me get my head around this thanks
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var number=["1"]
function myFunction()
{
var x=document.getElementById("box");
number.push=document.getElementById("input").value;
x.innerHTML=number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add Number"/>
</form>
<div id="box"; style="border:1px solid black;width:150px;height:150px;overflow:auto">
</div>
</body>
</html>
Here is the mistake:
number.push(document.getElementById("input").value);
push is a method, not an attribute ;-)
JSFiddle
PS: Why the ; after id="box"; ? You should fix that too..! ;-)
You were close, here's the working code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var number = [];
function myFunction()
{
var x = document.getElementById("box");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add Number"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:auto">
</div>
</body>
</html>​

convert array to string in javascript

I want the text to be printed without commas.
<html>
<head>
<title>Reverse</title>
</head>
<body>
<form name="rev">
Enter the string : <input type="text" name="str"/>
<input type="button" value="click" onclick="rev1()" /><br>
reverse of given string : <input type="text" name="res"/>
</form>
<script type="text/JavaScript">
function rev1(){
var a=rev.str.value;
var b=[];
var i,j=0;
for(i=a.length-1;i>=0;i--){
b[j]=a[i];
j++
}
//rev.res.value=b;
alert(b);
}
</script>
</body>
</html>
If I give the input as abc I am getting an output as c,b,a, but I want it as cba.
Try this:
alert( b.join("") )
You could also reverse a string more easily by:
"hello".split("").reverse().join("")
//"olleh"
You may reverse your string using javascript built-in functions:
<html>
<head>
<title>Reverse</title>
</head>
<body>
<form name="rev">
Enter the string : <input type="text" name="str"/>
<input type="button" value="click" onclick="rev1()" /><br>
reverse of given string : <input type="text" name="res"/>
</form>
<script type="text/JavaScript">
function rev1(){
var a=rev.str.value;
var b=a.split("").reverse().join("");
//rev.res.value=b;
alert(b);
}
</script>
</body>
</html>
You may also transfer join your array elements to become a string
<html>
<head>
<title>Reverse</title>
</head>
<body>
<form name="rev">
Enter the string : <input type="text" name="str"/>
<input type="button" value="click" onclick="rev1()" /><br>
reverse of given string : <input type="text" name="res"/>
</form>
<script type="text/JavaScript">
function rev1(){
var a=rev.str.value;
var b=[];
var i,j=0;
for(i=a.length-1;i>=0;i--){
b[j]=a[i];
j++
}
//rev.res.value=b;
alert(b.join(""));
}
</script>
</body>
</html>
You can also use document.getElementById().value.reverse().join("");

Categories

Resources