Send textarea content to javascript function - javascript

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;
}

Related

Multiple textareas

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.

Form with Button to Remove Brackets and Text Inside Brackets

I'd like to know how to set up this function to target text in the input form 'STOCK1'.
Javascript as it stands:
function removeBrackets(element) {
document.body.innerHTML = element.replace(/\[[^\]]+\]/g, '__');
}
HTML as it stands:
<button onclick="javascript:removeBrackets(element)">Remove Brackets and Text Inside Brackets</button>
<input type="text" name="STOCK1" id="STOCK1" placeholder="Place text here..." />
Please help me to understand how this should work! Many thanks!
Pass document.getElementById('STOCK1') to removeBrackets call, set .value of element instead of setting document.body.innerHTML. Note, you can alternatively use RegExp /\[.*\]/g.
<script>
function removeBrackets(element) {
element.value = element.value.replace(/\[.*\]/g, '__');
}
</script>
<button onclick="removeBrackets(document.getElementById('STOCK1'))">Remove Brackets and Text Inside Brackets</button>
<input type="text" name="STOCK1" id="STOCK1" placeholder="Place text here..." />

Input text value into a div?

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.

Setting a text to Bold in a textarea

Heres the particular html code, which consists of the button 'bold' and the text area.
<form name="myform">
< input type="button" onClick="Bold()" value="Bold">
</form>
<textarea name="myTextArea" id="myTextArea" cols="100" rows="14" placeholder="Enter Text Here ...">< /textarea>
Heres My Javascript
function Bold() {
myTextArea.document.execCommand('bold',false,null);
}
What am i doing wrong ????
You can simply use javascript like this:
function Bold() {
document.getElementById("myTextArea").style.fontWeight = 'bold';
}
Demo
If you want the textarea to display bold text, you can do that via css style attribute:
<textarea style="font-weight: bold">test-text</textarea>
Also, you can use div insted, and set contenteditable="true" http://jsfiddle.net/XNkDx/2852/ And, use hotkey ctrl+b
UPDATE:
If you want to use button, just, get selected text and change it http://jsfiddle.net/XNkDx/2859/
I Think you should use string.bold() function of javascript like this one:
function Bold() {
var str = document.getElementById('myTextArea').value();
var result = str.bold();
}
or you can use css style
{font-weight:bold;}

Add a string of text into an input field when user clicks a button

Basically just trying to add text to an input field that already contains a value.. the trigger being a button..
Before we click button, form field would look like.. (user inputted some data)
[This is some text]
(Button)
After clicking button, field would look like.. (we add after clicking to the current value)
[This is some text after clicking]
(Button)
Trying to accomplish using javascript only..
Example for you to work from
HTML:
<input type="text" value="This is some text" id="text" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="button" />​
jQuery:
<script type="text/javascript">
$(function () {
$('#button').on('click', function () {
var text = $('#text');
text.val(text.val() + ' after clicking');
});
});
<script>
Javascript
<script type="text/javascript">
document.getElementById("button").addEventListener('click', function () {
var text = document.getElementById('text');
text.value += ' after clicking';
});
</script>
Working jQuery example: http://jsfiddle.net/geMtZ/
​
this will do it with just javascript - you can also put the function in a .js file and call it with onclick
//button
<div onclick="
document.forms['name_of_the_form']['name_of_the_input'].value += 'text you want to add to it'"
>button</div>
Here it is:
http://jsfiddle.net/tQyvp/
Here's the code if you don't like going to jsfiddle:
html
<input id="myinputfield" value="This is some text" type="button">​
Javascript:
$('body').on('click', '#myinputfield', function(){
var textField = $('#myinputfield');
textField.val(textField.val()+' after clicking')
});​
HTML
<form>
<input id="myinputfield" value="This is some text">
<br>
<button onclick="text()">Click me!</button>​
</form>
Javascript
const myinputfield = document.querySelector("#myinputfield");
function text() {
myinputfield.value = myinputfield.value + "after clicking";
}
I know this question is almost ten years old but this answer does not use jquery so it may be useful to others.
https://codepen.io/frog22222/full/oNdPdVB

Categories