how can I reset multiple textareas to their default values (texts)? Is it possible without giving them specific class? I found only solution for one text input, but no successful with multiple textareas on 1 page, reseted by function.
<html>
<body>
<textarea rows="1" cols="30">Hello World</textarea><br/>
<textarea rows="1" cols="30">Hello Second World</textarea><br/>
<button onclick="reset()">Reset</button>
<script>
function reset() {
document.querySelectorAll('textarea').value = <!--Default Value-->
}
</script>
</body>
</html>
How about something like this?
Address:<br>
<textarea id="myTextarea">
342 Alvin Road
Ducksburg</textarea>
<textarea id="myTextarea2">
Value 2</textarea>
<p>Click the button to change the contents of the text area.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myTextarea").value = "Txt1";
document.getElementById("myTextarea2").value = "Txt2";
}
</script>
Edit to match the use case in the comment
According to MDN, textarea does not have a value property.
When the page loads the default value for a textarea is whatever the value in between some value. Therefore when the user changes it we don't have a way to find the original value.
To Overcome that we need somekind of a mechanism to store the default value
In your case if you have a lot of elements (Textareas), using a data attribute will help us to identify the default value after the page loads and the user changes the values
So use the following example
<textarea rows="1" cols="30" data-default="Default Val">Hello World</textarea><br/>
<textarea rows="1" cols="30" data-default="Default Val1">Hello World</textarea><br/>
<textarea rows="1" cols="30" data-default="Default Val2">Hello World</textarea><br/>
<button onclick="reset()">Reset</button>
<script>
function reset() {
var textareas = document.querySelectorAll('textarea');
for(i =0; i < textareas.length; ++i){
textareas[i].value = textareas[i].getAttribute('data-default');
}
}
</script>
You need to modify the js script like below:
function reset() {
document.querySelectorAll('textarea').forEach((elem) => elem.value = "Desiered value");
}
Or you can use an HTML placeholder and make the textarea value empty.
Related
I am currently working on a project for a introductory javascript and html class, and I am trying to figure out how to make it so that the text a user enters into a text box converts to all uppercase letters after clicking a button. Here is what I have so far (i know it is ugly but it just needs to work) , I am just having trouble figuring out my problem. :
<html>
<body>
<p> Enter any text into the field below and click "Convert" and it will make
every letter Upper Case. </p>
<form>
<input type="text" id="text" value="">
<input type="button" value="Convert" onclick="thefunction()">
</form>
<p id="lowercase"></p>
<script>
function thefunction(){
var text = ("text");
var conv = text.toUpperCase();
document.getElementById("lowercase").innerHTML = conv;
}
</script>
</body>
</html>
Looks like you just need to replace var text = ("text"); with var text = document.getElementById('text').value;
The full working code:
<html>
<body>
<p> Enter any text into the field below and click "Convert" and it will make
every letter Upper Case. </p>
<form>
<input type="text" id="text" value="">
<input type="button" value="Convert" onclick="thefunction()">
</form>
<p id="lowercase"></p>
<script>
function thefunction(){
var text = document.getElementById('text').value;
var conv = text.toUpperCase();
document.getElementById("lowercase").innerHTML = conv;
}
</script>
</body>
</html>
I suspect what you were doing wrong was trying to use var text = document.getElementById('text') and then trying to change that to upper case.
If you attempt this, you're actually attempting to apply the function toUpperCase to a HTMLInputElement and you'll get a console error as a result.
You just need to apply the toUpperCase function to the string value held within the HTMLInputElement called text by accessing it's value with var text = document.getElementById('text').value;
I have written a code, for opening 10 links that I am entering in the text box to open in a new window for each 10 links entered in the text box. But somehow its now working. Could anyone help me in executing it correctly. Below is the code:
<html>
<script>
function getValue(v)
{
var txt_arr=v.split('\n');
for(var i=0;i<txt_arr.length;i++)
{
window.open(txt_arr[i],"_blank");
}
//var link=document.getElementById("textLink").value;
//window.open(link,"_blank");
}
</script>
<body>
<h1>Get Text box value</h1>
<form>
<textarea id="textLink" type="text" name="link_val" rows="2" cols="2"></textarea>
<button id="btnClick" onClick="getValue(link_val.value)">Open the links</button>
</form>
</body>
</html>
link_val.value is not going to work, cause it does not refer to the element. Sure the variable name matches the name of the textarea, but that's not the same thing.
You need to actually get the element instead, so I would suggest doing that inside the handler:
onClick="getValue('link_val')"
function getValue(link_input_name)
{
var link_input = document.getElementsByName(link_input_name)[0];
var txt_arr = link_input.value.split('\n');
...
The problem here is that your button type is not defined,
by default it's "submit" and it will refresh the page, what you want is a button that does nothing else than the onClick action you need, so put type="button" in your button HTML and it will work.
You need to check if your browser don't block popups too.
var a = document.getElementById('textLink');
function getValue() {
var myWindow = window.open('', "_self");
//get value in new window use =>window.open('', "_blank");
myWindow.document.write(a.value);
}
<h1>Get Text box value</h1>
<form>
<textarea id="textLink" type="text" name="link_val" rows="2" cols="2"></textarea>
<button id="btnClick" onClick="getValue()">Open the links</button>
</form>
I am trying to see if it is possible to use a script to write two text areas to a single file when clicking "Submit" on my page? (For total context, these are HTML pages being hosted locally on the machine and are not being housed on a server anywhere)
I successfully learned to erase the two text areas with javascript:eraseText and having that button set the values to "".
I have been looking for an option but I don't know if I'm asking it the right way.
Any help is appreciated.
Edits for clarity
<!DOCTYPE html>
<html>
<head>
<script>
function eraseText() {
document.getElementById("one").value = "";
document.getElementById("two").value = "";
}
function submit() {
}
</script>
</head>
<body>
<div id="boxes">
<textarea id='one' rows="20" cols="70">
</textarea>
<p></p>
<textarea id='two' rows="20" cols="70">
</textarea>
</div>
<p></p>
<input type="button" value="Clear" onclick="javascript:eraseText();">
<input type="button" value="Submit" onclick="javascript:submit();">
</body>
</html>
So I'd like to click submit and have the values in "one" and "two" parsed to a single HTML output.
<!DOCTYPE html>
<html>
<head>
<script>
function eraseText() {
document.getElementById("one").value = "";
document.getElementById("two").value = "";
}
function submit() {
var combined = "";
combined += document.getElementById("one").value;
combined += document.getElementById("two").value;
document.getElementById("destination").innerHTML = combined;
}
</script>
</head>
<body>
<div id="boxes">
<textarea id='one' rows="20" cols="70">
</textarea>
<p></p>
<textarea id='two' rows="20" cols="70">
</textarea>
</div>
<p id="destination"></p>
<input type="button" value="Clear" onclick="eraseText();">
<input type="button" value="Submit" onclick="submit();">
</body>
</html>
The solution that doesn't use any server-side code to accomplish this, if I understand your question correctly, is as follows.
Let's write what your HTML probably currently looks like.
<textarea></textarea>
<textarea></textarea>
<button type="submit">Submit</button>
Let's first add an output area where the preview will appear. This could be a <div></div> element.
Now, add id attributes to all the elements (I'll use the IDs "a", "b", "c", and "d", and the output DIV. This allows JavaScript code to easily grab a certain element using the Document Object Model.
Once done, this is the code
document.getElementById("d").addEventListener("click", function(){ // do this when element with id `d` is clicked
document.getElementById("c").innerHTML = // set the output element's inner HTML to...
document.getElementById("a").value + document.getElementById("b").value
})
<textarea id="a"></textarea>
<textarea id="b"></textarea>
<div id="c"></div>
<button id="d">Submit</button>
document.getElementById(IDGOESHERE) returns a JavaScript object representing the element with that ID. .addEventListener binds something to an event happening (in this case, the click event triggers a function to be called).
That function takes the values of the two textareas, and adds (joins) them together using the + operator, which concatenates with strings.
It then assigns this HTML using the .innerHTML property of the output element.
I'm not sure if this is what you wanted, so please do clarify if it isn't.
Say I have this text box:
<input type="text" id="myText" placeholder="Enter Name Here">
Upon pressing a button, I would like to send the value entered into this div:
<div id="text2"></div>
I'm not entirely sure how to do this. Do I create a function and call it to the div? How would I do that?
Could someone clear this up for me? Thanks.
Add an onclick to your button:
<input type="button" id="somebutton" onclick="addText()">
Then write the javascript:
function addText()
{
document.getElementById('text2').innerHTML = document.getElementById('myText').value;
}
Solution using onclick event:
<input type="text" id="myText" placeholder="Enter Name Here">
<div id="text2"></div>
<button id="copyName" onclick="document.querySelector('#text2').innerHTML = document.querySelector('#myText').value" value="Copy Name"></button>
JSFiddle: http://jsfiddle.net/3kjqfh6x/1/
You can manipulate the content inside the div from javascript code. Your button should trigger a function (using the onclick event), which would access the specific div within the DOM (using the getElementById function) and change its contents.
Basically, you'd want to do the following:
<!DOCTYPE html>
<html>
<script>
function changeContent() {
document.getElementById("myDiv").innerHTML = "Hi there!";
}
</script>
<body>
<div id="myDiv"></div>
<button type="button" onclick="changeContent()">click me</button>
</body>
</html>
Mark D,
You need to include javascript to handle the button click, and in the function that the button calls, you should send the value into the div. You can call $("#myText").val() to get the text of the text box, and $("#txtDiv").text(txtToAppend) to append it to the div. Please look at the following code snippet for an example.
function submitTxt() {
$("#txtDiv").text($("#myText").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myText" placeholder="Enter Name Here">
<button onclick = "submitTxt()"> Submit </button>
<div id="txtDiv"> </div>
HTML could be:
<input type='text' id='myText' placeholder='Enter Name Here' />
<input type='button' id='btn' value='click here' />
<div id='text2'></div>
JavaScript should be external:
//<![CDATA[
var pre = onload; // previous onload? - window can only have one onload property using this style of Event delegation
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
var text2 = E('text2'); // example of Element stored in variable
E('btn').onclick = function(){
text2.innerHTML = E('myText').value;
}
}
//]]>
I would recommend using a library like jQuery to do this. It would simplify the event handling and dom manipulation. None the less, I will include vanilla JS and jQuery examples.
Assuming the HTML in the body looks like this:
<form>
<input id="myText" type="text" placeholder="Enter Name Here">
<br>
<input type="submit" id="myButton">
</form>
<div id="text2"></div>
The Vanilla JS example:
//Get reference to button
var myButton = document.getElementById('myButton');
//listen for click event and handle click with callback
myButton.addEventListener('click', function(e){
e.preventDefault(); //stop page request
//grab div and input reference
var myText = document.getElementById("myText");
var myDiv = document.getElementById("text2");
//set div with input text
myDiv.innerHTML = myText.value;
});
When possible avoid using inline onclick property, this can make your code more manageable in the long run.
This is the jQuery Version:
//Handles button click
$('#myButton').click(function(e){
e.preventDefault(); //stop page request
var myText = $('#myText').val(); //gets input value
$('#text2').html(myText); //sets div to input value
});
The jQuery example assumes that you have/are adding the library in a script tag.
Ok so I got a textarea and a link (which works as a button) and what I am trying to do is that when I click on the link, it sends the content from the textarea to a javascript function.
Something like this...:
<textarea name="text" placeholder="Type your text here!"></textarea>
Send!
Just assign an id to your textarea, and use document.getElementById:
<textarea name="text" placeholder="Type your text here!" id="myTextarea"></textarea>
Send!
Alternatively, you could instead change your myFunction function, to make it define the value inside the function:
JS:
function myFunction() {
var value = document.getElementById('myTextarea').value;
//rest of the code
}
HTML:
<textarea name="text" placeholder="Type your text here!" id="myTextarea"></textarea>
Send!
And if you're using jQuery, which it does look like you do, you could change the document.getElementById('myTextarea').value to $('#myTextarea').val(); to get the following:
JS:
function myFunction() {
var value = $('#myTextarea').val();
//rest of the code
}
HTML:
<textarea name="text" placeholder="Type your text here!" id="myTextarea"></textarea>
Send!
you can do simply like this to achieve it, just call function and do all work in that function:
Send
Jquery code:
function myFunction()
{
var text = $('textarea[name="text"]').val();
// use text here
return false;
}