create two text boxes.User will give from keyboard in the first text box and in the second text box will take the variable from the first text box and will make the characters caps locks.Example :i give e inside the first text box on the second box will be E.
<html>
<head>
<title>exc1</title>
<script>
function create() {
var x = document.getElementById("textbox").value;
}
function takevariable(x){
}
</script>
</head>
<body>
<input type="text" id="textbox" onkeydown="create()">
<input type="text" id="textbox" onkeypress="takevariable()">
</body>
</html>
Here you are giving same id to the both text element, ids should be unique so I am renaming them with textboxfrom and textboxto. Second, here you should also need to listen keyup event aswell, otherwise you wont't get last character in the second box. Because for single character entry, browser enters character just when it fires keyup event.
<html>
<head>
<title>exc1</title>
<script>
function create() {
var x = document.getElementById("textboxfrom").value;
}
function takevariable(x){
document.getElementById("textboxto").value = document.getElementById("textboxfrom").value.toUpperCase();
}
</script>
</head>
<body>
<input type="text" id="textboxfrom" onkeydown="create()" onkeypress="takevariable()" onkeyup="takevariable()">
<input type="text" id="textboxto" >
</body>
</html>
Related
I am attempting to add a textfield called Initials and based on what user enters in say fName textfield onkeyup auto complete initials textfield using first character only.
Here's my pathetic attempt, need help
<!DOCTYPE html>
<html>
<body>
<p> </p>
<p>Enter your name:
<input name="fName" type="text" id="fname" onkeyup="showFirstChar()">
</p>
<p>Initials:
<input name="Initials" type="text" id="Initials">
<script>
function showFirstChar() {
var sWord = document.getElementById('fName').innerHTML;
document.getElementById('Initials').innerHTML = sWord.charAt(0);
}
</script>
</p>
</body>
</html>
try this
var sWord = document.getElementById('fName').value;
document.getElementById('Initials').value= sWord.charAt(0);
Input has .value property instead of .textContent
Here is some simple code where, when div tag text is changed, an alert should fire:
<!DOCTYPE html>
<html>
<body>
<p>Modify the text by clicking on it, then click outside the field to fire the onchange event.</p>
<div type="text" name="txt" value="" onchange="myFunction(this.value)" contenteditable="true">Change Value by clicking here</div>
<script>
function myFunction(val) {
alert("The input value has changed. The new value is: " + val);
}
</script>
</body>
</html>
Can this be done without using event listeners?
Since you don't want to use an event listener, you can use the onInput attribute, like this:
function myFunction(el) {
alert("The input value has changed. The new value is: " + el.innerHTML);
}
<!DOCTYPE html>
<html>
<body>
<p>Modify the text by clicking on it, then click outside the field to fire the onchange event.</p>
<div type="text" name="txt" value="" oninput="myFunction(this)" contenteditable="true">Change Value by clicking here</div>
</body>
</html>
I'm trying to get an input from a text input box to transform a paragraph into what's in the input box. Note that this is not a web page just code run in a Browser.
Here's what I've got so far:
<!DOCTYPE html>
<html>
<form><center>
First name:<br>
<input type="text" name="Firstname" id="JohnnyFunc"></form>
<button type="button" onclick="myFunction">Submit</button>
<script>
function myFunction()
{
document.getElementById("JhonnyOutput"). innerHTML="JohnnyFunc"
}
</script>
<center><p>Hello</p><p id="JhonnyOutput">Johhny!</p></center>
</html>
The onclick attribute should include the parentheses after the function name: onclick="myFunction()"
<form>
<center>First name:<br><input type="text" name="Firstname" id="JohnnyFunc"></center>
</form>
<center><button type="button" onclick="myFunction()">Submit</button></center>
<script>
function myFunction()
{
document.getElementById("JhonnyOutput"). innerHTML="JohnnyFunc"
}
</script>
<center><p>Hello</p><p id="JhonnyOutput">Johhny!</p></center>
You were also missing a closing tag for your first <center> element
Also, to change the text to what's in the text box, you need to get the text from the input element:
function myFunction() {
var newText = document.getElementById("JohnnyFunc").value
document.getElementById("JhonnyOutput").innerHTML = newText
}
I want when a user enter number in the textbox and click set, textboxes appear based on the number he entered and this what I come up with but it is not working please help
<html>
<head>
<script>
function generate(){
var a=parseInt(document.getElementById("nochapter").value);
for (i=0;i<=a,i++){
document.getElementById("ch").innerHTML="<input type='text' >"}}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included <input type="text" id="nochapter" >
<input type ="button" value="set" onclick="generate()">
<div id="ch"></div>
Your code should be like this.
Is better append an input element to the div.
<head>
<script>
function generate() {
var a = parseInt(document.getElementById("nochapter").value);
var ch = document.getElementById("ch");
for (i = 0; i < a; i++) {
var input = document.createElement("input");
ch.appendChild(input);
}
}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included
<input type="text" id="nochapter" />
<input type="button" value="set" onclick="generate()" />
<div id="ch"></div>
</form>
</body>
There is small glitch in your written code
for (i=0;i<=a,i++) --> for (i=0;i<=a;i++)
even if you change that it will generate only one text box because you are replacing innerHTML for every iteration. so prepare the string separately based on no of iteration and assign it to innerrHTML. it should work.
If I make a form, and add an ONSUBMIT to that it gives UNDEFINED as an answer to the parent window "textarea" instead of a value from the RADIOBUTTON that is chosen. I would not want to change the javascript, because it works fine with a that has onclick with a value, but is it possible to get the to work with the same script? Or what should I do to make this work?
here is an example of my work:
index.html:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function hello(string){
// get the current text, add a newline if not blank, and append new
// text
var anchorText = document.getElementById('myAnchor').value;
if(anchorText !== "") anchorText += '\n';
anchorText += string;
document.getElementById('myAnchor').value=anchorText;
}
</script>
<title>joubadou</title>
</head>
<body>
<form>Cart<br>
<br>
<textarea rows="10" id="myAnchor"></textarea></form>
<iframe src="radiobuttontest.html" height="300"></iframe>
</body>
</html>
radiobuttontest.html:
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
</head>
<body>
<br>
<form id="myForm" action="" method="get"
onsubmit="parent.hello()">If
you want a blue
car you can choose<br>
<br>
<input name="sex" value="Bensin" checked="checked"
type="radio">Bensin<br>
<input name="sex" value="Diesel" type="radio">Diesel<br>
<br>
<input value="add to cart"
onclick="parent.hello('Blue car')" type="submit"></form>
<br>
</body>
</html>
If you please can help me I would be so clad!
This is what happens when user clicks add to cart:
The onclick of the input fires, and the value of #anchorText is
changed to 'Blue car', which is passed to hello().
onsubmit fires from the form, and the value of #anchorText is
changed to undefined, since string is not passed.
To fix this, just remove the onsubmit attribute from the form, and pass the radio buttons instead of a string, for example:
Add this if to the hello():
function hello(string){
if (typeof string === 'object') { // Checks if an object is passed instead of a string
for (var n = 0; n < string.length; n++) { // Iterate through object
if (string[n].checked) { // Check, if the current radio button is checked
string = string[n].value; // Change the value of string to value of checked radio button
break;
}
}
}
var anchorText = document.getElementById('myAnchor').value;
:
}
and pass the radio buttons like this:
<input value="add to cart" onclick="parent.hello(document.getElementsByName('sex'));" ... />
Notice, that you still can use hello() to handle also strings, when a string is passed as an argument.
A live demo at jsFiddle. This fiddle is just an example to show how the code works in a single document.