Auto Fill Text Boxes With Main Text Box Content - javascript

I'm trying to auto-fill text boxes 1 to 3 with the main text box content so that whatever is typed into the text box "Title" will also appear in the text boxes
Input1, Input2 and Input3. Here is what I have, but I get an error.
<html>
<head>
<script type="text/javascript">
function CopyData(val){
var a = document.getElementById(val.id).value
document.getElementById("CopyText").value=Title
}
</script>
</head>
<body>
Title:<input type="text" name ="Title" id="Text" onkeyup="CopyData(this)"/><br /> <br />
Input 1:<input type="text" name ="Input1" id="CopyText"/><br />
Input 2:<input type="text" name ="Input2" id="CopyText"/><br />
Input 3:<input type="text" name ="Input3" id="CopyText"/><br />
</body>
</html>

try this out:
<html>
<head>
<script type="text/javascript">
function CopyData(val){
var a = document.getElementById(val.id).value
var inputs = document.querySelectorAll(".input");
for(var i=0;i < inputs.length;i++)
{
inputs[i].value = a;
}
}
</script>
</head>
<body>
Title:<input type="text" name ="Title" id="Text" onkeyup="CopyData(this)"/><br /> <br />
Input 1:<input type="text" class="input" name ="Input1" /><br />
Input 2:<input type="text" class="input" name ="Input2" /><br />
Input 3:<input type="text" class="input" name ="Input3" /><br />
</body>
</html>
remarks:
do not use same id for multiple elements. try class instead
you use 'Title' which is not defined, use "a", that was where you stored the input's value
to get many elements at once with simple js, good method is to use "querySelectorAll" with the proper selector.
good luck.

I guess you cannot assign the same id tag to more than one TextBox, so you must end up with a more "hard-coded" javascript function. Moreover, I would use Title.value and not only Title
function CopyData(){
document.getElementById("CopyText1").value=Title.value;
document.getElementById("CopyText2").value=Title.value;
document.getElementById("CopyText3").value=Title.value;
}

Related

how to pass string variable of JavaScript to html form input,

Like if I have element of array name[1]='ahmad' and I want it to be posted in html form.
I used
document.getElementById('n').value=name[1];
but it's not posting.
Form has:
<input type="text" id="n" readonly="true">
i want to fill array by user and show these values in input readonly boxes on web page.
full code is:
<!dochtml html>
<title>Arrays of Js</title><!--different methods of using declaring arrays-->
<head>
<h3>Arrays usage by AFRN</h3>
<script>
alert('hey');
var names=[];
//var n = prompt('enter name');
for(var i=0; i<=4; i++){
names[i]=prompt('enter name: ');
}
/*var ids=['r1','r2','r3','r4','r5']
for(var i=0; i<=4; i++){
document.getElementById(ids).value=name[i];
}*/
document.getElementById("r1").value=names[0];
document.getElementById("r2").value=names[1];
document.getElementById("r3").value=names[2];
document.getElementById("r4").value=names[3];
document.getElementById("r5").value=names[4];
</script>
<noscript>JS not supported</noscript>
</head>
<body bgcolor="yellow">
<form name="arryForm">
<input type="text" id='r1' name="a1" readonly="true">
<input type="text" id='r2' name="a2" readonly="true">
<input type="text" id='r3' name="a3" readonly="true">
<input type="text" id='r4' name="a4" readonly="true">
<input type="text" id='r5' name="a5" readonly="true">
</form>
</body>
</html>
If you move your <script> tag with its contents to the bottom just before the closing </body> tag and it will work.
You can try this code !
Place your javascript code below the input tag in body and you cannot use the variable name 'name' , I think this is not allowed in javascript because I am also facing problem with the varaible name 'name' so I am using '_name' .
var _name = ["usman","ahmed"];
document.getElementById("n").value = _name[1];
<input type="text" id="n" readonly="true"/>

How to make a button for capitalization in JavaScript?

How can I change this script so that a user has to click a button at the end to make all form text entries change to capitals? I know that I need to use the onclick function, but I am just not sure where or how to enter it.
<html>
<head>
<title>Information Form</title>
<style>
input[type=text] {
text-transform: capitalize;
}
</style>
</head>
<body>
<input type="text" name="nameInput" />
Type your street address here:
<input type="text" address="addressInput" />
Type your city and state here:
<input type="text" cityandstate="stateInput" />
</body>
</html>
Something like this would work:
<html>
<head>
<title>Information Form</title>
<style>
input[type=text] {
text-transform: capitalize;
}
</style>
</head>
<body>
<input type="text" name="nameInput" />
Type your street address here:
<input type="text" address="addressInput" />
Type your city and state here:
<input type="text" cityandstate="stateInput" />
<div>
<button id="clickme" onclick="capInputs();">Capitalize Inputs</button>
</div>
<script>
function capInputs() {
var elements = document.querySelectorAll("input[type=text]")
for (var i = 0, element; element = elements[i++];) {
element.value = (element.value).toUpperCase();
}
}
</script>
</body>
</html>
See this :D
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
var x = document.getElementById("myBtn").innerHTML;
document.getElementById("myBtn").innerHTML =x.toUpperCase() ;
}
<html>
<body>
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<button id="myBtn">Try it</button>
</body>
</html>
You don't need to force the user to click a button at the end to change their text to uppercase. You can do this authomatically using JavaScript.
It looks like you've figured out that using CSS won't change the value of your inputs to uppercase, only change the appearance on the screen (and on my browser, text-transform doesn't even seem to work on the input element). Instead, you should attach event listeners to your the input event (which is fired every time input text is edited) inside a <script>...</script> tag (which should be inserted just before the closing </body> tag.
document.querySelectorAll('input').forEach(function(e) {
if (e.type === 'text') {
e.addEventListener('input', valueToUpperCase)
}
})
function valueToUpperCase(e) {
(e = e.target).value = e.value.toUpperCase()
}
<label>
Type your name here:
<input type="text" name="nameInput" />
</label>
<br/>
<label>
Type your street address here:
<input type="text" name="addressInput" />
</label>
<br/>
<label>
Type your city and state here:
<input type="text" name="stateInput" />
</label>
I am assuming (based on your css rule) that you want to capitalize the input text entries once the user press a button. If you want to change all text into upper case (i.e. all capital letters, not just the first one), then uppercase should be used in the css instead of capitalize.
#Amber Ollis, your code applies the CSS rule for capitalize to all input text elements from the beginning. The rule should only apply once pressed the button if that is the effect you want (I have added such button which is missing in your code).
See code below (working):
<html>
<head>
<title>Information Form</title>
<style>
.capitalized {
text-transform: capitalize;
}
</style>
<script>
function capitalize() {
var inputs = document.querySelectorAll("input[type=text]");
for (i in inputs) {
inputs[i].className = "capitalized";
}
}
</script>
</head>
<body>
<input type="text" name="nameInput" />
Type your street address here:
<input type="text" address="addressInput" />
Type your city and state here:
<input type="text" cityandstate="stateInput" />
<input type="button" onclick="capitalize();" value="Capitalize all" />
</body>
</html>

Show a javascript variable on html textbox

All I have to do is to show a number in a textbox and a button which add 10 every time I press it, here's my code (it doesn't work).
<head>
<script type="text/javascript">
var n=parseInt(ocument.forms["formNum"]["numero"].value);
document.getElementById("numero").value=n;
function sumar() {
n=document.forms["formNum"]["numero"].value+10;
document.forms["formNum"]["numero"].value=n;
}
function inicializar() {
n=document.forms["formNum"]["numero"].value=0;
}
</script>
</head>
<body>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" />
</p>
<p>
<input type="button" name="sumar" value="Sumar" onclick="sumar()" />
<input type="button" name="inicializar" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
<body>
<script type="text/javascript">
function sumar(){
document.getElementById("numero").value = parseInt(document.getElementById("numero").value)+10;
}
function inicializar(){
document.getElementById("numero").value=0;
}
</script>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" value="0" />
</p>
<p>
<input type="button" value="Sumar" onclick="sumar()" />
<input type="button" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
Five suggestions.
It is always better to give unique ids to your html elements.
Never name your HTML elements and javascript functions the same.
If you want to access the html element from javascript, if you know the id, use getElementById.
Use Firebug or Developer tools from the browser, to debug.
If you want to access your elements with the hierarchy, use elements in the form like this document.forms["formNum"].elements["numero"].value. Check this example
Demo: http://jsfiddle.net/DPJCR/
This code should work:
<input type="text" id="mytext">
<script type="text/javascript">
var elem = document.getElementById("mytext");
elem.value = "My default value";
</script>
See: Set the value of an input field
Maybe you are getting an exception from the parseInt that prevents the value from changing.
If it is an option to use jQuery, try this:
function sumar(){
$("#numero").attr("value", parseInt($("#numero").attr("value"), 10)+10);
}
Try this this will help you
var count=10;
$('#btnSumar').click(function(){
if($('#numero').val()=='')
{
$('#numero').val(count);
}else
$('#numero').val(eval($('#numero').val())+count);
});
$('#btnInc').click(function(){
$('#numero').val('');});
Fiddle here

In which TextBox is the cursor.?

I have 4 textboxes and a submit button in my web page.
Suppose the user enters data in 2 fields and then clicks the submit button.
I now want to know in which textbox the cursor was located just before the submit button was clicked.
Any idea on how to do this in Javascript?
You're looking for document.activeElement, which returns the currently focused element.
Your question does specifically say in javascript, but FWIW here is another option in jQuery:
Working jsFiddle here
HTML:
<input id="in1" type="text" /><br />
<input id="in2" type="text" /><br />
<input id="in3" type="text" /><br />
<input id="in4" type="text" /><br />
<input type="button" id="mybutt" value="Submit" />
jQuery:
var inFocus = false;
$('input, textarea').focus(function() {
inFocus = $(this).attr('id');
});
$('#mybutt').click(function() {
alert('Cursor was last in element id: ' + inFocus);
});
you can use document.activeElement
here is the simple example for the same.
<head>
<script type="text/javascript">
function GetActive () {
if (document.activeElement) {
var output = document.getElementById ("output");
output.innerHTML = document.activeElement.tagName;
}
}
</script>
</head>
<body onclick="GetActive ();">
Click anywhere on the page to get the active element
<input id="myInput" value="input field" />
<button>Sample button</button>
<div id="output"></div>
</body>

How to pass text in a textbox to JavaScript function?

Suppose I have the following HTML code, how can I pass the user's input to execute(str) JavaScript function as an argument?
<body>
<input name="textbox1" type="text" />
<input name="buttonExecute" onclick="execute(//send the user's input in textbox1 to this function//)" type="button" value="Execute" />
</body>
You could either access the element’s value by its name:
document.getElementsByName("textbox1"); // returns a list of elements with name="textbox1"
document.getElementsByName("textbox1")[0] // returns the first element in DOM with name="textbox1"
So:
<input name="buttonExecute" onclick="execute(document.getElementsByName('textbox1')[0].value)" type="button" value="Execute" />
Or you assign an ID to the element that then identifies it and you can access it with getElementById:
<input name="textbox1" id="textbox1" type="text" />
<input name="buttonExecute" onclick="execute(document.getElementById('textbox1').value)" type="button" value="Execute" />
As opposed to passing the text as a variable, you can use the DOM to retrieve the data in your function:
var text = document.getElementsByName("textbox1").value;
You could just get the input value in the onclick-event like so:
onclick="execute(document.getElementById('textbox1').value);"
You would of course have to add an id to your textbox
This is what I have done. (Adapt from all of your answers)
<input name="textbox1" type="text" id="txt1"/>
<input name="buttonExecute" onclick="execute(document.getElementById('txt1').value)" type="button" value="Execute" />
It works. Thanks to all of you. :)
if I have understood correct the question :
<!DOCTYPE HTML>
<HEAD>
<TITLE>Passing values</TITLE>
<style>
</style>
</HEAD>
Give a number :<input type="number" id="num"><br>
<button onclick="MyFunction(num.value)">Press button...</button>
<script>
function MyFunction(num) {
document.write("<h1>You gave "+num+"</h1>");
}
</script>
</BODY>
</HTML>
document.getElementById('textbox1').value
You can get textbox value and Id by the following simple example in dotNet programming
<html>
<head>
<script type="text/javascript">
function GetTextboxId_Value(textBox)
{
alert(textBox.value); // To get Text Box Value(Text)
alert(textBox.id); // To get Text Box Id like txtSearch
}
</script>
</head>
<body>
<input id="txtSearch" type="text" onkeyup="GetTextboxId_Value(this)" /> </body>
</html>

Categories