Javascript passing data between text boxes - javascript

I'm working on getting data to go from one textbox to another using javascript. Im new to Javascript and im getting a document undefined or null error.
<!DOCTYPE html>
<html>
<head>
<script>
function doit() {
window.document.form1.txtbox1.value= window.document.form2.txtbox2.value;
}
</script>
</head>
<body>
<form name="form1">
Enter your name:
<input type="text" name="txtbox1" value="">
<input type="button" name="btn1" value="Click" onclick="doit()">
</form>
<br><br><br>
<form name="form2">
Results:
<input type="text" name="txtbox2" value="">
</form>
</body>
</html>

It seems that you are trying access the element as a property of the DOM.
Instead, you should use document.getElementsByName method.
Revised function:
function doit(){
// The [0] is for accessing the first item.
// If you are unfamiliar with arrays, visit
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
document.getElementsByName("txtbox1")[0].value = document.getElementsByName("txtbox2")[0].value;
}

You need to switch (swap) them :
window.document.form1.txtbox1.value= window.document.form2.txtbox2.value;
When you click a button - you set the value of the second input to the first one and probably the second input called 'Result' is empty.
Try:
function doit() {
window.document.form2.txtbox2.value = window.document.form1.txtbox1.value;
}
There should not be any error, it's just pass data in another direction as you probably expect.

Give a unique ID to both the input element.
<input type="text" id="txtbox1" value="">
<input type="text" id="txtbox2" value="">
and in function doit()
document.getElementById("txtbox2").value = document.getElementById("txtbox1").value

Related

How do i alert the textbox input to a user

If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE

Unable to read input DOM element's value

i have following html/JS code :
function controller()
{
document.write(document.getElementById("name").value) ;
document.write(document.getElementById("id").value) ;
}
<input type="text" id="name"/>
<input type="text" id="id"/>
<input type="button" id="push" onclick="controller()"/>
Problem : when i click on push button onclick is fired and controller function is executed and i am able to retrieve value of element having id name but the second element having id idis not read and as a result i get the following error for second input element :
Uncaught TypeError: Cannot read property 'value' of null
I have been struggling for hours but i am unable to understand where i am making mistake can somebody help ?
Your script read the inputs values correctly, but when the first document.write statement execute it will override the body so when the script try to execute the second one it will find no input and return the error line :
Uncaught TypeError: Cannot read property 'value' of null
Hope this helps.
function controller()
{
console.log(document.getElementById("name").value);
console.log(document.getElementById("id").value);
}
<input type="text" id="name"/>
<input type="text" id="id"/>
<input type="button" id="push" onclick="controller()"/>
the problem is that document.write erases the body you can instead use 'alert()' or add another element to dom and set its innerHTML to the values:
function controller(){
alert(document.getElementById("name").value) ;
alert(document.getElementById("id").value) ;
}
OR
<input type="text" id="name"/>
<input type="text" id="id"/>
<input type="button" id="push" onclick="controller()"/>
<div id="result"></div>
javascript
var ele=document.querySelector("#result");
function controller(){
ele.innerHTML="Name :"+document.getElementById("name").value+"<br>Id: "+document.getElementById("id").value;
}
document.write(document.getElementById("name").value); is replacing your entire dom, so the subsequent getElementById can't retrieve the input value. Store all of the values before you write them back to the document.
function controller(){
var store = [];
store.push(document.getElementById("name").value);
store.push(document.getElementById("name2").value);
document.open();
document.write(store);
document.close();
}
The problem is that document.write is "clearing" the page.
The input's aren't anymore on the page, after the first document.write
Detailed Information can be found on the MDN under this link https://developer.mozilla.org/en-US/docs/Web/API/Document/write
Which states:
Note: as document.write writes to the document stream, calling
document.write on a closed (loaded) document automatically calls
document.open, which will clear the document
try instead alert() or console.info() or other functions that don't clear the document.
function controller()
{
alert(document.getElementById("name").value) ;
alert(document.getElementById("id").value) ;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="name"/>
<input type="text" id="id"/>
<input type="button" id="push" onclick="controller()"/>
</body>
</html>
tested on Win7 with chrome 51+
Optional:
If you want/have to use document.write, read first all values and that write them to the document.
function controller()
{
var firstField = document.getElementById("name").value;
var secondField = document.getElementById("id").value;
document.write(firstField);
document.write(secondField);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="name"/>
<input type="text" id="id"/>
<input type="button" id="push" onclick="controller()"/>
</body>
</html>
tested on Win7 with chrome 51+
Info: The better way to attach Events is to attach them over an
Eventlistener here is an link to the addEventListener Reference
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

How to move a text from an input field to another by pressing a button in javascript

Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>

Input Class undefined, but Input id works

Not sure why the result is undefined here, when I change the following items, <input type="text" id="myText" to <input type="text" class="myText" and document.getElementById("myText") to document.getElementsByClassName("myText")
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_text_value
getElementsByClassName() returns a nodeList, so if you want your example to work you must use it like this:
<!DOCTYPE html>
<html>
<body>
First Name: <input type="text" class="myText" value="Mickey">
<p>Click the button to display the value of the value attribute of the text field.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByClassName("myText");
document.getElementById("demo").innerHTML = x[0].value;
}
</script>
</body>
</html>
You mentioned a link with an example seems
document.getElementsByClassName("myText").value;
You are not suppose to do like that because the getElememtaByClassName function will return a collection of values not a single value like getElementById.
Get the value by using array index
Look into this documentation

html form.input.value is not getting printed why?

...
<script type="text/javascript">
function printvalues() {
document.write("This is my first JavaScript!");
document.write(form.inputobj1.value);
document.write(form.inputobj2.value);
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" onclick =" printvalues();">
</form>
why this line is not printing the value document.write(form.inputobj1.value);
The document.write overwrites the current document. Once done that, the whole <form> element disappears from the DOM and hence it and its input elements cannot be found.
Replace document.write(...) by for example alert(...) and it should work.
Alternatively you can write it as innerHTML of another element. E.g.
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "This is my first JavaScript!";
div.innerHTML += form.inputobj1.value;
div.innerHTML += form.inputobj2.value;
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" onclick =" printvalues();">
</form>
<div id="divId"></div>
Note that this is not the "best practice", but since you're learning... When done with core Javascript, I recommend you to get yourself through jQuery. It's a Javascript library which greatly eases DOM manipulation like that and more ;)
document.write()
is probably not what you want. It will overwrite the entire contents of the page. The reason you're getting that error is because when you call document.write, it removes all the previous content, and thus the page will no longer have a form element.
Normally you would use a function such as document.getElementById to get a DOM element. For example:
alert( document.getElementById('inputobj1_id').value );
For DOM element:
<input id="inputobj1_id" name="inputobj1" value="123" />
<script type="text/javascript">
function printvalues() {
var x = document.form.inputobj1.value;
var y = document.form.inputobj2.value
document.write("<Html><head></head><body><h1>");
document.write("This is my first JavaScript!</h1></br><h3>");
document.write(x);document.write("</h3></br><h3>");
document.write(y);document.write("</h3></body></html>");
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" value="click" onclick =" printvalues();">
</form>

Categories

Resources