Add text to TextArea from Button - html

Is there a way to set text in a TextArea? I have four Buttons and when I click on a Button I want the text in the Button to appear in the TextArea.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="practice.css">
<script>
var elem = document.getElementById('ta1');
function displayText(e){
elem.setText(elem.getText());
}
</script>
</head>
<body>
<div>
<input class="button" type="button" id="button0" value="testing1"/>
<input class="button" type="button" id="button1" value="testing2" />
<input class="button" type="button" id="button2" value="testing3"/>
<input class="button" type="button" id="button3" value="testing4"/>
</div>
<textarea id = "ta1" disabled rows="3" cols="50"></textarea>
</body>
</html>
I thought of creating a method displayText(e) that collects the Button text and sets it in the TextArea. But I am not sure how to access the Button text. And once I get the text, how do I save it in the TextArea? Any ideas?

So do you mean like this?
<!DOCTYPE html>
<head>
<script>
document.addEventListener('DOMContentLoaded', start, false);
function start(){
document.getElementById("button0").addEventListener("click", function(){addText(this);} );
document.getElementById("button1").addEventListener("click", function(){addText(this);} );
document.getElementById("button2").addEventListener("click", function(){addText(this);} );
document.getElementById("button3").addEventListener("click", function(){addText(this);} );
function addText(elem) {
document.getElementById("ta1").innerHTML += elem.value;
}
};
</script>
</head>
<body>
<textarea id = "ta1" disabled rows="3" cols="50">
</textarea>
<br>
<input class="button" type="button" id="button0" value="testing1"/>
<input class="button" type="button" id="button1" value="testing2" />
<input class="button" type="button" id="button2" value="testing3"/>
<input class="button" type="button" id="button3" value="testing4"/>
</body>
</html><html>

Use the .value property to display preset text into a text area.
<!DOCTYPE html>
<html>
<body>
<textarea id="demo" cols="10" rows="20">
</textarea>
<script>
var cars = ["Saab", "Volvo", "BMW"];
for(var i = 0; i < cars.length;i++){
document.getElementById("demo").value += " " + cars[i];
}
</script>
</body>
</html>

for each button, give an onclick to a separate function and have each function look something like this:
function button1 () {
var node = document.createTextNode(x); /*var x, or whatever you want the variable
to be called will be the text you want it to display. You will have to define this in
an earlier variable already defined*/
var container = document.getElementById("ta1");
container.appendChild(node); //Appends text node to inside the TA
}

You could do it by adding "onclick" to the input statement as follows:
// add **onclick="function()"** to the button
<div>
<input class="button" type="button" id="button0" value="testing1" onclick="addText1"/>
<input class="button" type="button" id="button1" value="testing2" onclick="addText2"/>
<input class="button" type="button" id="button2" value="testing3" onclick="addText3"/>
<input class="button" type="button" id="button3" value="testing4" onclick="addText4"/>
</div>
// use stylesheet for positioning, etc.
<div id="text1"></div>
<div id="text2"></div>
<div id="text3"></div>
<div id="text4"></div>
//now when you click the button, it will call the respective function in the script
<script>
var text1 = "Enter text 1";
var text2 = "Enter text 2";
var text3 = "Enter text 3";
var text4 = "Enter text 4";
function addText1(){document.getElementById("text1").innerHTML += text1;}
function addText2(){document.getElementById("text1").innerHTML += text2;}
function addText3(){document.getElementById("text1").innerHTML += text3;}
function addText4(){document.getElementById("text1").innerHTML += text4;}
</script>

Related

How to create MULTIPLE boxes where you copy text to clipboard on button click?

<!DOCTYPE html>
<html>
<body>
<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
</body>
</html>
I got this code from w3schools website, here is the link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard
I'm super beginner, can u please help me create multiple boxes so which ever box you click on it will copy to clipboard that text?
I tried duplicating the same code and changed the myInput but it doesn't seem to work!
You need to wrap each box within a div. Then, you need to pass event object to onclick function of each button. Since the text input is immediately followed by a button, you can use previousElementSibling method, which selects the previous sibling of it (which is input).
function myFunction(e) {
var copyText = e.target.previousElementSibling;
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
<!DOCTYPE html>
<html>
<body>
<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
<div>
<input type="text" value="Hello World" class="myInput">
<button onclick="myFunction(event)">Copy text</button>
</div>
<div>
<input type="text" value="Input 2" class="myInput">
<button onclick="myFunction(event)">Copy text</button>
</div>
<div>
<input type="text" value="Input 3" class="myInput">
<button onclick="myFunction(event)">Copy text</button>
</div>
</body>
</html>
Another way you can achieve is by using this object. I have modified your code.
<!DOCTYPE html>
<html>
<body>
<div >
<input type="text" value="Hello World 1" id="myInput" >
<button onclick="myFunction(this.parentNode.children[0])">Copy text</button>
</div>
<div >
<input type="text" value="Hello World 2" id="myInput" >
<button onclick="myFunction(this.parentNode.children[0])">Copy text</button>
</div>
<div >
<input type="text" value="Hello World 3" id="myInput" >
<button onclick="myFunction(this.parentNode.children[0])">Copy text</button>
</div>
<script>
function myFunction(previousSibling) {
var copyText = previousSibling;
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
</body>
</html>
What is happening here?
We make use of this object, which refers to context of current element, which is button after we click it.
Then we find the parent of it (parent of button) using this
Then from parent we get the corresponding child (input field)
which is children[0]
This child is then passed to the function
Above steps repeat for any button click

I can't get my page to change after I hit the enter key

I have been working on a website, but for some reason when I click enter it stays on the same page. But when I click the button I added on the page itself it works. What I'm trying to do is go from my login page, index.html, to my home page after the password is verified, home.html. Any Ideas?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/popup.css?Version=1.1">
</head>
<body>
<div id="box">
<form id="myform-search" method="post" autocomplete="off">
<h1>Enter Password</h1>
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<button class="unmask" type="button" onclick="toggle()"></button>
<button class="enter" type="button" onclick="done()">Enter</button>
</p>
</form>
</div>
<div id="wrong">
<p>Sorry, but the password you entered is incorrect!</p>
</div>
<!--Javascript to show password Box-->
<script>
//Verifies password
function done() {
document.getElementById("box").style.display = "none";
var password = document.getElementById("p").value;
if (password == "12345") {
location.replace("http://apr.great-site.net/Home/home.html");
} else {
document.getElementById("wrong").style.display = "block";
}
};
function toggle() {
var x = document.getElementById("p");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
</html>
```````````````````````````````````````````
// Verifies password
function done() {
document.getElementById("box").style.display = "none";
var password = document.getElementById("p").value;
if (password == "12345") {
// returning true will submit the form
return true;
} else {
document.getElementById("wrong").style.display = "block";
// returning false will prevent submiting the form
return false;
}
};
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/popup.css?Version=1.1">
</head>
<body>
<div id="box">
<form id="myform-search" method="post" action="validationUrlHere" autocomplete="off" onsubmit="return done();">
<h1>Enter Password</h1>
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<!-- Commented this button as it is not needed in the context of the solution -->
<!--<button class="unmask" type="button" onclick="toggle()">something</button>-->
<!-- HERE is the interesting part : -->
<!-- Clicking the "Enter" button has same effect as -->
<!-- hitting the default submit button or pressing the Enter button on your -->
<!-- keyboard. Your cursor focus must be inside one of the form's elements, -->
<!-- preferably in the password input field -->
<button class="enter" type="button" onclick="done()">Enter</button>
<input type="submit" value="Real Submit" />
</p>
</form>
</div>
<div id="wrong" style="display: none;">
<p>Sorry, but the password you entered is incorrect!</p>
</div>
</body>
</html>
Take a look at this snippet, take what you need from it. To be honest, it's not clear what you are seeking... hope it will help you understand some basics :-)
Try this :
<form onSubmit="done()">
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<button class="unmask" type="button" onclick="toggle()"></button>
<button type="submit" class="enter">Enter</button>
</p>
</form>
If you want the function done() to be called when you hit enter you should add an event listener for Enter on your form. (Have in mind that you opened 2 form tags)
document.getElementById('myform-search').addEventListener('keyup', function(e) {
if(e.key=='Enter') {
done()
}
}

Add new button after text changed

I`m using Angualr for my web.
I have this part in html code:
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
</div>
I want to add method (in the Controller) that when the text change, it will add a new button down.
How can I do it? I can`t understand how ng-change works.
thanks
Simply use ng-if to check if newCreative.companionUrl exists in scope :
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="newCreative.companionUrl">
</div>
You can also use a function to validate button visibility :
index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="scripts.js"></script>
</head>
<body ng-controller="SampleController as ctrl">
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="ctrl.isButtonAvailable()">
</div>
</body>
</html>
script.js
angular.module('app', []);
angular.module('app').controller('SampleController', function ($scope) {
var ctrl = this;
ctrl.isButtonAvailable = function() {
if(!$scope.newCreative) {
return false;
}
// Ensure companion url starts with https:// using a regular expression
return /^https:\/\//.test($scope.newCreative.companionUrl);
}
});
Working example
Check out this Plunker : https://plnkr.co/edit/n8VtJrenePGf9hCbmzWJ
You can use the directives ng-change on input and ng-if or ng-show on button, plus a little code on controller.
Check this:
http://codepen.io/mQuixaba/pen/oZqXWG?editors=1111
HTML:
<div ng-app="myApp" ng-controller="MyController">
<label for="input">Text:</label>
<input type="text" id="input" ng-model="text" ng-change="showButton=true"/>
<button ng-if="showButton" ng-click="hideButton()">My Button</button>
</div>
JS:
angular
.module('myApp', [])
.controller('MyController', function($scope){
$scope.showButton = false;
$scope.text = "My text";
$scope.hideButton = function() {
$scope.showButton = false;
}
});

Html send userinput to td

When I gave an input(text) in the textfield and the text that i input is appearing in TD and then its always gone.
first_name is the userinput
f1 is the td
function ajax_post(){
var fn = document.getElementById("first_name").value;
var table = $("#f1");
table.text(fn);
}
my submit button
<input name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">
i'm using <form> </form>
i'm wondering that my script is kinda wrong
function ajax_post(){
var fn = document.getElementById("first_name").value;
var table = document.getElementById("f1");
table.innerText = fn;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form onsubmit="return false;">
<input type="text" id="first_name" />
<input name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">
</form>
<table>
<tr>
<td id="f1"></td>
</tr>
</table>
</body>
</html>

Writing html form data to a txt file without the use of a webserver

I was wondering if there is a way to submit/write html form data to a txt file with the use of scripts but with out using a webserver, webhost, wamp, xamp etc.
I have been trying with php scripts but they just open the php document on submitting.
Any help is appreciated :D
Something like this?
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" value="test.txt">
<textarea rows=3 cols=50 name="text">Please type in this box. When you
click the Download button, the contents of this box will be downloaded to
your machine at the location you specify. Pretty nifty. </textarea>
<input type="submit" value="Download">
</form>
</body>
</html>
You can use JavaScript:
<script type ="text/javascript">
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("C:\test.txt", True);
s.writeline(document.passForm.input1.value);
s.writeline(document.passForm.input2.value);
s.writeline(document.passForm.input3.value);
s.Close();
}
</script>
If this does not work, an alternative is the ActiveX object:
<script type = "text/javascript">
function WriteToFile(passForm)
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.CreateTextFile("C:\\Test.txt", true);
s.WriteLine(document.passForm.input.value);
s.Close();
}
</script>
Unfortunately, the ActiveX object, to my knowledge, is only supported in IE.
i made a little change to this code to save entry of a radio button but unable to save the text which appears in text box after selecting the radio button.
the code is below:-
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" value="test.txt">
<textarea rows=3 cols=50 name="text">PLEASE WRITE ANSWER HERE. </textarea>
<input type="radio" name="radio" value="Option 1" onclick="getElementById('problem').value=this.value;"> Option 1<br>
<input type="radio" name="radio" value="Option 2" onclick="getElementById('problem').value=this.value;"> Option 2<br>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="problem" id="problem">
<input type="submit" value="SAVE">
</form>
</body>
</html>
I know this is old, but it's the first example of saving form data to a txt file I found in a quick search. So I've made a couple edits to the above code that makes it work more smoothly. It's now easier to add more fields, including the radio button as #user6573234 requested.
https://jsfiddle.net/cgeiser/m0j7Lwyt/1/
<!DOCTYPE html>
<html>
<head>
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download() {
var filename = window.document.myform.docname.value;
var name = window.document.myform.name.value;
var text = window.document.myform.text.value;
var problem = window.document.myform.problem.value;
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
"Your Name: " + encodeURIComponent(name) + "\n\n" +
"Problem: " + encodeURIComponent(problem) + "\n\n" +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form name="myform" method="post" >
<input type="text" id="docname" value="test.txt" />
<input type="text" id="name" placeholder="Your Name" />
<div style="display:unblock">
Option 1 <input type="radio" value="Option 1" onclick="getElementById('problem').value=this.value; getElementById('problem').show()" style="display:inline" />
Option 2 <input type="radio" value="Option 2" onclick="getElementById('problem').value=this.value;" style="display:inline" />
<input type="text" id="problem" />
</div>
<textarea rows=3 cols=50 id="text" />Please type in this box.
When you click the Download button, the contents of this box will be downloaded to your machine at the location you specify. Pretty nifty. </textarea>
<input id="download_btn" type="submit" class="btn" style="width: 125px" onClick="download();" />
</form>
</body>
</html>