I can get text from the textarea with my current code. But I want to get it when the textarea contained in an iframe, is that possible?
My current code is
<script>
function get_text() {
var value = $('textarea').val();
$('#show_value').html(value);
}
</script>
<textarea></textarea>
<div id="show_value"></div>
Click me to show text
I tried editing that code like the code below but it didn't work
<script>function get_text() {
var value = $('iframe textarea').val();
$('#show_value').html(value);
}
</script>
<iframe src='http://check0909.vv.si/s.html'></iframe>
<div id="show_value"></div>
Click me to show text
You can see my demo at here http://check0909.vv.si/
Thank you in advance for any help!
Put like a name and an id and you should be able to use something like this.
$('iframe[name=select_frame]').contents().find('#select_name').val();
Related
I have a div which shows result of a quotation form. Results changes if user change form value instantly. I want to display or copy the same results of that div to another div or more like a "second version" of that div.I know this below sort of code will work.
$("div1").clone().appendTo("div2");
But it works only for the 1st time page loads. After that it doesn't change the results with the div1 results.
Does anyone have a hint on what to do here?
Many thanks in advance!
Use the onchange event in your html on the form. Then call your code from it somewhat like:
onchange="$('div1').clone().appendTo('div2');"
or
onchange="someJSfuncion();"
also dont forget to delete the old copy. Further information:
https://www.w3schools.com/jsref/event_onchange.asp
You need to setup your event handlers on form changes and then copy the output to other div. Example:
// Original js
(function() {
$('.inp_name').on('change', function() {
$('.original-output .name_text').text($(this).val());
});
})();
// Your js
(function() {
var version = 0;
$('.inp_name').on('change', function() {
version++;
// Don't use clone as your events starts working in cloned code also which you don't expect
//$('.original-output').clone().appendTo('.copied-output');
$('.copied-output').append($('.original-output').html());
$('.copied-output').append(`<div>Version: ${version}</div>`);
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note: Focus out see text getting change.
<div class="original-form">
Enter text here: <input type="text" class="inp_name" placeholder="enter your name" />
</div>
<div class="original-output">
Entered name: <span class="name_text">Entered Name</span>
</div>
<div class="copied-output">
</div>
I would like to know if anyone knows how I can get the value typed in a textarea with codemirror and insert at the same time into another textarea without codemirror. I know I need to use editor.getValue (); But how do I insert into the other textarea at the same time?
You figured out the first half: CodeMirror .getValue(), to get text from first area.
The second half is jQuery .val() function to set the text to second area.
Click "Run code snippet" below to see a demo.
var config = {
lineNumbers: true
};
var editor = CodeMirror.fromTextArea($('#area1')[0], config);
editor.setSize(120,48);
$('#copy').click(function() {
var text = editor.getValue(); // CodeMirror function to get content
$('#area2').val(text); // jQuery function to set content
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cm">
<textarea id="area1">
Hello
world
</textarea>
</div>
<button id="copy">↓ Copy content</button>
<div>
<textarea id="area2"></textarea>
</div>
How to get append value in jquery or other method?
I want to show the the value Hello Append!!! append value on <div id="get_append_value"></div> tag,
My Javascript code:
$(document).ready(function() {
$("#show_append_value").append("Hello Append!!!");
});
My Html code
<body>
<div id="show_append_value"></div>
<div id="show_hello_world">Hello World!!!</div>
<br>
<br>
<div id="get_append_value"></div <!--need to use jquery to show 'Hello Append!!! on it, but result is empty'-->
<div id="get_hello_world"></div>
</body>
<script>
var $show_value = $('#show_append_value').html();
$('#get_append_value').html($show_value);
var $show_value2 = $('#show_hello_world').html();
$('#get_hello_world').html($show_value2);
</script>
This result:
Hello Append!!!
Hello World!!!
Hello World!!!
Although it can show the value on <div id="show_append_value"> and <div id="show_hello_world">, it doesn't give the appended value to show on <div id="get_append_value"></div> , it is empty
Can anyone teach me how to get the appended value in jquery or other method to show the value on other div tag?
Your code executes in the wrong order.
Any code that is put directly in a script tag, outside of any call-back, is executed before what you have inside the ready call back, so that means Hello Append!! is not yet in your document when you are fetching it.
To solve this, put all of your code in the ready event handler:
$(document).ready(function() {
$("#show_append_value").append("Hello Append!!!");
var $show_value = $('#show_append_value').html();
$('#get_append_value').html($show_value);
var $show_value2 = $('#show_hello_world').html();
$('#get_hello_world').html($show_value2);
});
I am fairly new to javascript and I am 13. So I am new to events in javascript. I would like help on this code:
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
if (x=="Kyle")
{
document.write("Correct!");
}
else
{
document.write("Incorrect!")
}
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
</body>
I want it to say correct when I type my name. Please help. Thanks
the line
if (x=="Kyle")
should read
if (x.value=="Kyle")
x represents the element, not the element's value.
I hope this helps. Feel free to ask if you have any other problems.
First create a div tag below your form and give it an id of something like "messageBox"
so:
<div id="messageBox"></div>
then replace
document.write("Correct!");
with
document.getElementById('messageBox').innerHTML = "Correct!";
and the same for incorrect.
All this does is create a div tag so that the javascript has somewhere to output the success/failure message.
You were oh so very close. You get the DOM element (getElementById), but you need to get the actual value of the element. Use x.value == "Kyle"
Dear all, my issue is this.
I have like the alert box to display all the text I have in a element. May I know how I can do it?
My ori idea:
<a onclick="displaytext(something)">testing</a>
function displaytext(something){
alert(something);
}
Can someone please help me to solve this? Thanks.
Use innerHTML (or innerText if you don't want the HTML) and this:
<script>
function displaytext(something) {
alert(something.innerHTML); //alerts 'testing'
return false;
}
</script>
<a onclick="displaytext(this)">testing</a>
Use the innerHTML attribute, after you've gotten the object using getelementbyid or similar.
If you are just wanting to display the text you should use innerText
Live example
HTML
<a onclick="displaytext(this)">testing</a><br />
<a onclick="displayOtherText()">I'll display the div innerText</a><br />
<a onclick="displayOtherHtml()">I'll display the div innerHTML</a><br /><br />
<div id="textToDisplay"><span>Some sample</span> text here</div>
JavaScript
<script>
function displaytext(element){
alert(element.innerText);
}
function displayOtherText(){
alert(document.getElementById('textToDisplay').innerText)
}
function displayOtherHtml(){
alert(document.getElementById('textToDisplay').innerHTML)
}
</script>
you should use a simple function like this. but be careful this function takes an element id so this will not work for a class name or a element name.
function sayText(elId) {
var html = document.getElementById(elId).innerHTML;
if (html != null) alert(html)
}