I am unable to get Text from textarea because of some unknown reason, if I try simple textarea without using any javascript library, it is getting text. But when using any library, it shows undefined. Can somebody explain why?
Here is my code:
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<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> -->
<h1>
Testing page for Text Areas
</h1>
<textarea id="area2" style="width: 80%;">
</textarea><br />
<button type="button" onclick="myFunction()" id="submit_text2"> Submit Email </button>
<p id="demo">jkjnjk</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("area2").value;
document.getElementById("demo").innerHTML = x;
console.log(x);
alert(x);
}
</script>
</body>
</html>
Here, it is getting and showing text in Alert
Now if I uncomment the script to enhance my textarea using
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<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>
<h1>
Testing page for Text Areas
</h1>
<textarea id="area2" style="width: 80%;">
</textarea><br />
<button type="button" onclick="myFunction()" id="submit_text2"> Submit Email </button>
<p id="demo">jkjnjk</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("area2").value;
document.getElementById("demo").innerHTML = x;
console.log(x);
alert(x);
}
</script>
</body>
</html>
It has gone blank now, (there is no problem with script, I have tried some other as well!
It's because when you are using "styled textarea" it just create something else on top of your textarea. You need to use [nicInstance].getContent(). You can read niceEditor's docs here
In your case since you haven't saved your instance a variable, you should being able to use nicEditors.findEditor('area2').getContent();
Related
I'm creating a web page that has a text area in it and the user can enter code and have it displayed underneath. If I place my function in the HTML file it works just fine but when I move it to the JS file it doesn't work. Any help, even pointing me in the direction of my issue would be appreciated.
Here is my HTML code with the function commented out......
<!DOCTYPE html>
<html>
<head>
<title>DOM TREE 2</title>
<link rel="stylesheet" href="css/Content.css">
<script type="text/javascript" src="JS/js01.js"></script>
</head>
<body style="background-color:lightgray" id="bd">
<div id="third">
<h1> DOM TREE <img src="Images/tree_logo.jpg" alt="Calc" id = "pic">
</h1>
<form id="DOMForm">
<textarea id="myTextarea" rows="4" cols="50"></textarea>
<p><button type="button" onclick="AddFunction()">Add Content</button>
<button type="button" onclick="Change()">Change Style</button>
<button type="button" onclick="Clear()">Clear Content</button>
</p>
<p id="demo"></p>
<!--<script>
function AddFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
</script> -->
</body>
</html>
Here is the JS file with the function.....
function AddFunction()
{
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
function changestyle()
{
}
function clear()
{
document.getElementById("DomForm").reset();
}
Because names are different, compare onclick="Change()" to function changestyle() and onclick="Clear()" to function clear().
Hi guys im new to jquery/ javascript. i found some code in w3schools and i want to use it in my website. but i want the animation to trigger ever time i load the page. please help me how to do this
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
i want to do something like this
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>
Is this what you wanted:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}
</script>
</body>
</html>
try this
$(document).ready(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
if you are approaching for executing the function after Page loaded, then Put below JavaScript at end of your HTML design:
<script type="text/javascript">
window.onload = myFunction();
</script>
And define the function at start of the Page as you've done already!
So, final Code becomes like below:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<script type="text/javascript">
window.onload = myfunction();
</script>
</body>
</html>
Let me know by accepting it, if it works :)
I think best way is to use event listener.
<script type="text/javascript">
window.addEventListener('load',myfunction,false);
</script>
I've got such simple html.
vkbeatuify.js is located in the same folder.
<html>
<head>
<script type="text/javascript" src="vkbeautify.js"></script>
<script>
var variable = vkbeautify.xml("<root><cat></cat></root>");
document.getElementById('data').innerHTML = variable;
</script>
</head>
<body>
<div id="data">
</div>
</body>
</html>
But when I open page in browser Firefox - it displays nothing.
What is the problem?
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!
Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>
This works good when I add a div repeatedly. But I like to call it externally like the below code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>
Why is this not working?
Try using clone():
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>
You have to create a new element before adding it.
Demo
try this
$(document).ready(function(){
$("#num").click(function () {
$(".Box").first().clone().appendTo("#form");
});
});
Try something like this:-
$("#parent_div").append('<div id="created_div"></div>');