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.

Answers:

Answer

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

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/

Answer

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>
Answer

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>

Answer

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

}
//]]>
Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.