I am trying to print the input text of a textarea to the console.
The user would type a message then click a button and then the text would get printed to the console...
Here's my HTML:
<form action='/send_message' method='POST'>
<textarea name='message' id='message_box'></textarea>
<input name='receiver_id' type='text' id='number' style="display: none" value="{{info[0][0]}}">
<button id='btn' class='btn btn-primary' type='submit'>Message {{info[0][2]}}</button>
</form>
and here is the JS:
var message = $('textarea#message_box').val();
var button = document.getElementById('btn');
button.addEventListener('click',function(){
console.log(message)
});
The problem is that I get an empty message in the console no matter if the area is empty or containing text.
I tried various combinations of val(), text, innerHTML but I pretty much always get the same empty output...
You need to get the value of textarea when the button is clicked so assign the message variable inside the event listener. Because we want to get the value of textarea each time button is clicked.
var button = document.getElementById('btn');
button.addEventListener('click', function() {
var message = $('textarea#message_box').val();
console.log(message)
});
Related
I have a text field in parent/main page with a button to open a child page.
The child page suppose to load and populate with required data (I got this).
The code as follows in main page.
<input class="form-control" type="text" size="50" id="SNOW_INC" required>
<button class="btn btn-outline-secondary" type="button" onclick="find_incident()">Find</button>
<script type="text/javascript">
var get_Active_INC;
function find_incident(){
get_Active_INC = window.open("get_active_inc.php","OCC Active Incident(s)", "width=700,height=500");
get_Active_INC.focus();
}
</script>
So far all good, a popup window opened in focus and my data being displayed. The code in get_active_inc.php as follows.
foreach($data['result'] as $line){
echo '<button type="button" id="' . $line['number'] .'" onclick="set_incident(this.id);" class="btn btn-link">' . $line['number'] . '</button>';
echo $line['short_description'];
echo '<br>';
}
<script type="text/javascript">
function set_incident(clicked_id){
if(window.opener != null && !window.opener.closed) {
var SNOW_INC = window.opener.document.getElementById("SNOW_INC");
SNOW_INC.value = document.getElementById(clicked_id).value;
}
window.close();
}
</script>
Now the popup page displays my data with button (id and text is same) and some text.
What I want is when I click the button, it supposed to get the ID of the button, close the window and the text field in parent window get filled with the ID.
I think what I wrote is correct but nothing happens. The window just closes without doing anything.
I know its getting the ID because when I do alert(clicked_id); inside the function, I do get the ID I was expecting.
Trying to find out what I'm doing wrong. Thank you!!!
If you want to set the button id to the SNOW_INC element you should set
SNOW_INC.value = clicked_id;
If you want to set the button text to the SNOW_INC element you should set
SNOW_INC.value = document.getElementById(clicked_id).innerText;
Here is a picture. I have done css and html on my own and now don't know how to add javascript here.
What I want is:
a user writes something
then he clicks on button (for example uppercase) and his text appears at the bottom, instead of words "Here will be you text". How can I add such a function? I am confused.
If you want it in pure Javascript, you can do the code in the snippet.
I will assume that you know HTML and CSS, end explains only the javascript code.
The idea is:
You attach an event listener to handle de user click in each button. Each button has it's own class name, you can use it as a parameter of the document.getElementsByClassName to get an array of objects with this class name. Next you attach the event handler, you can do this with addEventListener.
Inside the click event function, you put the action that will be triggered after any click at the button.
The snippet below has commented code to clear things.
//Get input field with text before any operation
var textField = document.getElementsByClassName("text-field")[0];
//Get button that will trigger the Upper Case function
var upperBtn = document.getElementsByClassName("to-upper-btn")[0];
//Get button that will trigger the Lower Case function
var lowerBtn = document.getElementsByClassName("to-lower-btn")[0];
//Get div that will show the result
var resultContainer = document.getElementsByClassName("text-result")[0];
//Attach a click event listener to the Upper Case button
upperBtn.addEventListener("click", function(){
//Set the inner html of the result container with te value of the input field in uppercase;
resultContainer.innerHTML = textField.value.toUpperCase();
});
//Attach a click event listener to the Lower Case button
document.getElementsByClassName("to-lower-btn")[0].addEventListener("click", function(){
//Set the inner html of the result container with te value of the input field in lowecase;
resultContainer.innerHTML = textField.value.toLowerCase();
});
.text-field {
width:300px;
}
.container {
margin-top:50px;
border:1px solid #e4e4e4;
border-radius:5px;
background:#000;
color:#FFF;
padding:10px;
}
<h1>Write something</h1>
<input type="text" class="text-field"/>
<button type="button" class="to-upper-btn">To Upper Case</button>
<button type="button" class="to-lower-btn">To Lower Case</button>
<div class="container">
<div class="text-result">Just write what you want to make Upper Case or Lower Case, the result will be displayer here</div>
</div>
For more details about the javascript methods used in this code:
getElementByClassName
addEventListener
toUpperCase
toLowerCase
The combination of onclick, toUpperCase and toLowerCase can be used to obtain the required result.
Here is a working example:
<!DOCTYPE html>
<html>
<body>
<h2>Write something</h2>
<input id="inputText" type="text" placeholder="write something" style="width: 300px;">
<br>
<button onclick="upperCaseButtonClicked()">Upper case</button>
<button onclick="lowerCaseButtonClicked()">Lower case</button>
<button onclick="doNothingButtonClicked()">Do nothing</button>
<br>
<textarea id="outputArea" rows="5" cols="35"></textarea>
<script>
function upperCaseButtonClicked() {
var input = document.getElementById("inputText").value
var output = input.toUpperCase()
document.getElementById("outputArea").innerHTML = input.toUpperCase()
}
function lowerCaseButtonClicked() {
var input = document.getElementById("inputText").value
var output = input.toUpperCase()
document.getElementById("outputArea").innerHTML = input.toLowerCase()
}
function doNothingButtonClicked() {
var input = document.getElementById("inputText").value
document.getElementById("outputArea").innerHTML = input
}
</script>
</body>
</html>
const nameNode = document.getElementById("Name");
const nameCopyNode = document.getElementById("NameCopy");
if(nameNode){
nameNode.addEventListener('input',function(){
if(nameCopyNode){
nameCopyNode.value = this.value
}
})
}
<input type = "text" placeholder = "type your name" id="Name"/>
<br>
<br>
<input type = "text" placeholder = "you are typing" disabled id="NameCopy"/>
In the simplest form, using jQuery:
$(document).ready(function() {
$('#uppercase-btn').click(function() {
$('#myoutput').val($("#textid").val().toUpperCase());
});
$('#lowercase-btn').click(function() {
$('#myoutput').val($("#textid").val().toLowerCase());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="myinput" id="textid" />
<button id="uppercase-btn">Uppercase</button>
<button id="lowercase-btn">lowercase</button>
<textarea id="myoutput" disabled></textarea>
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 got a form with a list of games I'm asking people to add that they've played.
It says "Add Game" with a hyperlink which has an event handler onClick which directs to a JavaScript function - it only does this once but I want it to do this as many times as the user decides to add games - without any limits - how can this be done?
Here are the screen shot images followed by the code:
http://i59.tinypic.com/16jk1nt.png
http://i59.tinypic.com/2zzntoo.png
Here's the JavaScript code for the above images:
function addFields1(){
var container = document.getElementById("container1");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
container.appendChild(document.createTextNode("Add Game"));
var input = document.createElement("input");
input.type = "text";
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
Here's the HTML form for the above JavaScript code:
<input type="text" id="member1" name="member1" value="">Add Game<br />
Add Game
<div id="container1"/>
When I click the "Add Game" hyperlink, it enters a blank input box only once while I want it to enter it as many times as I keep on clicking the "Add Game" hyper link. Also, I would like the "Add Game" hyper link to replicate itself every time I click that link.
<html>
<script>
function addFields1(){
var container = document.getElementById("container1");
//remove button
var addGameButton = document.getElementById("filldetails");
container.removeChild(addGameButton);
//create and insert input/text
var input = document.createElement("input");
input.type = "text";
container.appendChild(input);
container.appendChild(document.createTextNode("Add Game"));
container.appendChild(document.createElement("br"));
//create and insert button
addGameButton = document.createElement("a");
addGameButton.id="filldetails"
addGameButton.href="#";
addGameButton.onclick=function(){addFields1();};
addGameButton.text="Add Game";
container.appendChild(addGameButton);
}
</script>
<body>
<form>
<div id="container1">
<input type="text" id="member1" name="member1" value="">Add Game<br />
Add Game
</div>
</form>
</body>
</html>
I have a table of element, and when i click on a td, i show something on atextarea
the problem is when i click, nothing show on the textarea...
what i actually do is that :
td.onclick = (function(textToShow){
return function(){
var textArea = document.getElementById("modification_bloc");
textArea.value = textToShow;
}
})(structure[key])
HTML code (is .ejs)
<form id="modification_bloc" action="modification_bloc" name="modification_bloc" class="hidden" type="post">
<textarea name="contenu_bloc" id="contenu_bloc"></textarea>
<br />
<input type="submit" value="Sauvegarder modifications"/>
</form>
the problem is that my textarea is always empty....
If i do a console.log of "textToShow" i have the text, and if i add the text as a placeholder i can see it in the console but not on the textarea. The innerHTML method works, but the text is obviously not editable รง^^
I don't get what is wrong.
can you help me? without JQUERY :)