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.
Related
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 am having a text area and a button.Like this :
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" />
Now,what i want to do is that on click of the button that text to be displayed on the same page above this text area just like we do comment or answer a question on stackoverflow.
How this can be done ?Please help.
you can do this using javascript
add any tag before (generally div or span tag is used) textarea tag
<div id="adduserdata"></div>
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" onclick="showtext()" />
Javascript code would be
function showtext(){
var text = document.getElementById("txtarea");
var showarea = document.getElementById("adduserdata");
showarea.innerHTML=text.value;
}
here is working example
As what you want, thus appending to the <div> division element, I assume that you will accept this answer (as a summary to all the comments and answers above) :
<!-- This is the HTML Part -->
<div id="text"></div>
<textarea id="new"></textarea>
<input type="button" onclick="appendTextToDiv();" />
<script>
function appendTextToDiv(){document.getElementById("text").innerHTML = document.getElmentById("text").innerHTML + document.getElementById("new").value;}
</script>
This can let you simply append it to the text. Fiddle
This will do if using Jquery (and previously text will stay) :
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('p').text(text);
}
});
or like this:
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('<p></p>').text(text).insertBefore('textarea');
}
});
Fiddle
I cant for the life of me figure out why the following is not working. I took if from the W3school example here.
Basically I want to take the value from the input text when it changes and modify another div to include the value. I only want the div to show the new value, but I do want it to change it each time so I figured the onchange was the way to go.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + x.value;
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<div id="divID"></div>
</body>
</html>
Thanks in advance for all the help on this one.
You have 2 problems, first is that x is undefined.
second you should use another trigger for this for this to happen each time.
try this out:
function myFunction()
{
var input = document.getElementById('fname')
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + input.value;
}
and change your html to:
<input type="text" id="fname" onkeypress="myFunction()">
x is undefined in your function, it should be document.getElementById('fname').
And if you want to change the div each time you press the key, use onkeyup or onkeypress instead of onchange.
You may change x.value to document.getElementById("fname").value, if I understand your question correctly.
<head>
<script type="text/javascript">
function input(){
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
</script>
</head>
<form method="post" action="#">
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
</form>
<div id="display"></div>
Ok, so check this out - http://jsfiddle.net/2ufnK/2/
The issue is that you need to define x here,
var x = document.getElementById("fname");
x now references to the html object.
Then you can just call the, ".value", method to get its text. Then everything else works the way you've written it.
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