I am trying to display the content of one of my div in a textbox ... Can somebody help me out with this? How can I display the content of my div tag in a textbox in HTML?
The following is what I have tried so far:
<script>
var test = document.getElementById("div").innerHtml;
document.getElementById("Key").value = test;
</script>
<div id="div" style="width: 50px" /></div>
<input type="text" id="Key" style="width: 50px" />
Julius, in your code, the text part needs to be a div class and in an external css stylesheet; declare the div class with a border.
Example HTML :
<div class="boxed">
This text is enclosed in a box.
</div>
CSS :
.boxed {
border: 1px solid green ;
}
Another way is to have a div class outside the form code and with css style the div and form
<div id="div">
<form id="form">
<input id="text" type="textbox" />
</form>
</div>
#div {
text-align: center;
}
#text {
width: 200px;
}
Say you have a div:
var myTextBox = $("#myTextBox");
var myText = $(".myDiv").text();
myTextBox.val(myText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv"> blah blah </div>
<input type="text" value="" id="myTextBox" />
Using JQuery, you can do:
var myText = $(".myDiv").text(); // query the DOM for .myDiv selector and get its text
var myTextBox = $("#myTextBox"); // query the DOM and get your textbox
myTextBox.val(myText); // assign value to your textbox
To use jquery, you have to include it at the top of your html page like this:
<script type="text/javascript src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js" ></script>
This will get the content from the div once the page had loaded.
If you have dynamic data: You can put this into a function and have window.onload call that function. If you want the content to update with the dynamic data then you can call the function to update the text box.
window.onload=function(){
//Get the innerHTML of the div tag
var a=document.getElementById('div').innerHTML;
//Place the inner HTML into the text box 'Key'
document.getElementById('Key').value=a;
};
<div id="div" style="width:50px;">Content here...</div>
<input type="text" id="Key"/>
I hope this helps. Happy Coding!
Firstly div is a really bad name for an id - give it something meaningful.
Secondly - do you see the / inside the opening div tag? that means you've just closed the div...
<div id="div" style="width: 50px" />
is the same as
<div id="div" style="width: 50px" /></div> so your code is now
<div id="div" style="width: 50px"></div></div>
and nothing in between the
<div id="div" style="width: 50px" /> and </div> will count as the inner html
Related
I have 3 textareas and 3 divs under each in which some html should be showed.
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
When i am typing some text, in the div with class character_count below the textarea i am typing in, should the characters be displayed. I do not succeed in it:
This is my js:
tinymce.init({
selector: '.tinymce',
width: 400,
setup: function (ed) {
ed.on('keyup', function (e) {
var count = CountCharacters();
$(this).closest(".character_count").text("Characters: " + count); // find the closest div with class .character_count and show the html
});
}
});
function CountCharacters() {
var body = tinymce.activeEditor.getBody();
var content = tinymce.trim(body.innerText || body.textContent);
return content.length;
};
Fiddle to test: https://jsfiddle.net/4vron96z/3/
BTW: $(".character_count").text("Characters: " + count); does work but then the html is displayed in all the 3 divs...
tinymce.init({
selector: '.tinymce',
width: 400,
setup: function (ed) {
ed.on('keyup', function (e) {
var count = CountCharacters();
$(this.targetElm).closest('.wrapper')
.find('.character_count').text("Characters: " + count);
});
}
});
function CountCharacters() {
var body = tinymce.activeEditor.getBody();
var content = tinymce.trim(body.innerText || body.textContent);
return content.length;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<span class="wrapper">
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
</span>
<span class="wrapper">
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
</span>
<span class="wrapper">
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
</span>
Ok, so StackOverflow doesn't seem to like the tinymce library so I pulled it out of the runnable, but here is the version I got working in your jsfiddle.
Since the this inside your setup callback is some tinymce object, it will not work with jQuery. However, the this.targetElm appears to be the element that the tinymce was initialized for and is processing the event for.
So, using that, we could potentially use $(this.targetElm).next('div') to get your element, BUT, your next element is not the div. It is a <br /> you have in there. Which means you could do next().next('div') to get it, but that is ugly and fragile, SO!
The modified version of your html now has a wrapper around each textarea and div pairing. Changing the markup to be that, we can then use the closest('.wrapper').find('.character_count') logic to navigate up to the parent element of both the textarea and the div, and then find the nested div, no matter where it resides.
TinyMCE has a wordcount plugin that can tell you this without having to calculate the value. For example you could do something like:
tinymce.activeEditor.plugins.wordcount.body.getCharacterCount()
...or...
tinymce.activeEditor.plugins.wordcount.body.getCharacterCountWithoutSpaces()
Here is a running example:
http://fiddle.tinymce.com/Gmhaab
$('.button').click(function(){
$('.title').text('ipsum');
});
.button{
cursor:pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'><input class='checka' type='checkbox'>lorem</div>
</br>
<div class='button'>CLICK</div>
You can see that checkbox is deleted.
How to change only text on title i.e. keeping a checkbox (checked or not) as is?
Like so (assuming you are Ok adding a span around the text. This allows you to target the span instead.
$('.button').click(function(){
$('.title span').text('ipsum');
});
.button{
cursor:pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'><input class='checka' type='checkbox'><span>lorem</span></div>
</br>
<div class='button'>CLICK</div>
You can make this work with any other html element really, it doesn't have to be a span as long as you have something you can target using a selector.
Note: Aspointed out in the comments you might be better off using a label for this instead of a span as this is the correct element to accompany a form element. Your label would look something like:
<label for="myCheckboxIdHere">lorem<label>
and your selector would just change to .title label
1. Not best way but one of the option with your current code is to Replace the $('.title').html() with new html():
$('.button').click(function(){
$('.title').html($('.title').html().replace('lorem','ipsum'));
});
.button{
cursor:pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'><input class='checka' type='checkbox'>lorem</div>
</br>
<div class='button'>CLICK</div>
2. Correct way is to use <label for="checkbox_id">Text</label>
The <label> element is one of a handful of elements that only exists and makes sense in relationship to another element.
For a to to associate with another element , it must include a for attribute, which identifies the <input> to which it is associated. The for attribute's value should match the id (not the name) of the <input> element.
Read more
$('.button').click(function(){
$('.title label').text('ipsum');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'><input class='checka' id="checka" type='checkbox'><label for="checka">lorem</label></div>
</br>
<div class='button'>CLICK</div>
You should be using a label with your input to make this work.
Look at the following code:
$('.button').click(function() {
$('.checkbox-label').text('ipsum');
});
.button {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>
<input id="check" type='checkbox'>
<label for="check" class='checkbox-label'>lorem</label>
</div>
<br>
<div class='button'>CLICK</div>
just give span class to the text element you want to change
$('.button').click(function(){
$('.changeble_text').text('ipsum');
});
.button{
cursor:pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>
<input class='checka' type='checkbox'>
<span class="changeble_text">lorem</span>
</div>
</br>
<div class='button'>CLICK</div>
It is like comment box. People are able to post their comments. Here I have one text area and and a div. If click one a button the comment has to be done. The comment should display in a div. I have given an external link,
wich allows edit the text how they want.
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit- latest.js"> </script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<h4>First Textarea</h4>
<textarea name="area1" cols="40"></textarea>
</div>
<button type="submit" value="submit"
style="background-color:red; color:#fff;
width:80px; height:50px; padding:5px;" onclick=""> Submit</button>
<div id="demo" style="width:300px; height:200px; border:1px solid #333;"></div>
First, you need to give your textarea an Id value:
<textarea id="commentEditor" name="area1" cols="40"></textarea>
Then, in your script after you have created the editor, you need to create a function that can extract the text from your NicEdit box and put it into a div.
function SubmitComment {
var editor = nicEditors.findEditor("commentEditor"); //find the editor by the ID
var commentText = editor.getContent(); //this gets the actual text content from it
//then assign the div with your content
var commentDiv = document.getElementById('demo');
commentDiv.innerHTML = commentText;
//afterwards, you can clear the comment entry box
editor.setContent("");
}
Make sure you tell your button to trigger this function
<button type="submit" value="submit"
style="background-color:red; color:#fff;
width:80px; height:50px; padding:5px;" onclick="SubmitComment"> Submit</button>
<body>
<div class="container">
Input
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="getString" placeholder="Enter some string">
</div>
<button type="button" class="btn btn-primary" id="nowBtn">Now</button>
</form>
<br/>
<br/>
All Headings<textarea class="form-control" rows="6"></textarea>
</div>
</body>
I am using bootstrap and I will give some string in the form, when the Now button is pressed.
I should get the <h1> tag of that string in the textarea (i.e <h1>some string</h1> in the textarea with applied <h1> tag ).
Is it achievable? I want to use jQuery.
From your comments I've understood you'd like to set the font-size in the textarea to same size as h1 tag would have.
Since there's no h1 tag in your HTML, you need to create a one in the click event handler function of the #nowBtn:
var header = document.createElement('h1'),
size = window.getComputedStyle(header, null).fontSize; // Depending used browser and CSS, this returns for example 32px
Then you can set the font-size of textarea like this:
$('textarea').css('font-size', size);
A live demo at jsFiddle.
EDIT
As bfavaretto has mentioned, a cross-browser way would be to use jQuery to get the size of the h1:
size = $(header).css('font-size');
Have a look at this fiddle - it might be what you want.
http://jsfiddle.net/Nj7pj/
$(document).ready(function () {
$('.btn-primary').on('click', function () {
inputVal = $('#getString').val();
newTextAreaVal = "<h1>" + inputVal + "</h1>";
$('textarea').val(newTextAreaVal);
});
});
I think you can do
var h1 = $("h1.classYouWant");
$(".form-control").val( "<h1>" + h1.text() + "</h1>" );
if is dynamic the header (h1 or h2 or h3 )
you can do
var header = $(".classYouWant").get(0);
$(".form-control").val( header.outerHTML );
I'm trying a very basic example of creating a div inside an already existing div.
It doesn't seem to be working when I use:
document.getElementbyId('lc').appendChild(element)
but works fine when I do this:
document.body.appendChild(element)
Do I need to add windows.onload function? Though it doesn't work even then!
HTML code:
<body>
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />
<div id="lc">
</div>
</body>
JS code:
function test()
{
var element = document.createElement("div");
element.appendChild(document.createTextNode('The man who mistook his wife for a hat'));
document.getElementbyId('lc').appendChild(element);
//document.body.appendChild(element);
}
Your code works well you just mistyped this line of code:
document.getElementbyId('lc').appendChild(element);
change it with this: (The "B" should be capitalized.)
document.getElementById('lc').appendChild(element);
HERE IS MY EXAMPLE:
<html>
<head>
<script>
function test() {
var element = document.createElement("div");
element.appendChild(document.createTextNode('The man who mistook his wife for a hat'));
document.getElementById('lc').appendChild(element);
}
</script>
</head>
<body>
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />
<div id="lc" style="background: blue; height: 150px; width: 150px;
}" onclick="test();">
</div>
</body>
</html>
'b' should be in capital letter in document.getElementById modified code jsfiddle
function test()
{
var element = document.createElement("div");
element.appendChild(document.createTextNode('The man who mistook his wife for a hat'));
document.getElementById('lc').appendChild(element);
//document.body.appendChild(element);
}
Yes, you either need to do this onload or in a <script> tag after the closing </body> tag, when the lc element is already found in the document's DOM tree.