Here is my code:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="container">
<textarea name="message' id="myarea">This is it</textarea>
<br/>
<input type="button" id="savebutton" value="Go" /> <p id="fuck"></p>
</div>
<script>
$('#savebutton').click(function() {
var text = $('#myarea').value();
alert(text);
});
</script>
On click I get error:
Uncaught TypeError: Object [object Object] has no method 'value'
It's .val(), not .value().
If you do your development with your developer console open, you'll see there's a TypeError. This should be the first place you look when something isn't working.
Two things, use val() instead of value(). And
<textarea name="message' id="myarea">This is it</textarea>
is invalid. Use
<textarea name="message" id="myarea">This is it</textarea>
instead. Note the name="message'.
The proper jQuery function is val(), not value().
That said, a unicorn has just been brutally murdered due to your code. Try Vanilla JS instead:
document.getElementById('savebutton').onclick = function() {
var text = document.getElementById('myarea').value;
alert(text);
};
EDIT: You also have mismatched quotes in your textarea's attribute values. Correct those, otherwise even this won't work ;)
Related
I am getting this error : Uncaught TypeError: Cannot read property 'getContent' of undefined
if (tinymce.editors.length > 0) {
alert('editor exist')
var myEditor = tinyMCE.get['rteCaseHeading'].getContent();
$("#bookId").html(myEditor);
}
In Html :
<textarea class="mceEditor" id="rteCaseHeading" rows="10" cols="100" style="height: 300px"> </textarea>
I also have specified : editor_selector : "mceEditor",during tinyMCE init.
I have referred various links/questions on this error and implemented.
This somehow still throws error though length of editors is greater than zero.
Someone , please suggest am struggling since more than 2-3 hrs with this issue.
[UPDATE]
I referred this link
and added the below code : http://jsfiddle.net/9euk9/49/
ed.on('change', function () {
ed.save();
});
Still, no luck.
Thanks a lot!
Enclose your <textarea> inside <form></form> tags.
Checkout the below code,
HTML
<form method="post" action="action_page">
<textarea class="mceEditor" id="rteCaseHeading" rows="10" cols="100" style="height: 300px">testtestet</textarea>
</form>
<button onclick="content()">Get content</button>
Javascript
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceEditor"
});
function content(){
alert(tinyMCE.get('rteCaseHeading').getContent());
}
Working Fiddle - http://jsfiddle.net/kqa13zz4/52/
Note: In fiddle, I have written the function content() function as window.content = function()... since fiddle accepts function declaration in that way only.
Hope this helps!
You are not calling the get() method correctly. You have this:
var myEditor = tinyMCE.get['rteCaseHeading'].getContent();
...it should be this:
var myEditor = tinyMCE.get('rteCaseHeading').getContent();
The way you have things written you are trying to access an array on the tinyMCE object - but the get is a method not an array - it is a method on the tinyMCE object hence the need for parenthesis and not square brackets.
https://www.tinymce.com/docs/api/tinymce/root_tinymce/#get
(the method call is the same for TinyMCE 3 and 4)
I try to get the content of tinymce, like this:
var hallo = tinyMCE.activeEditor.getContent();
alert(hallo);
but every time I get this message:
Uncaught TypeError: Cannot read property 'getContent' of null
I am using tinymce 4.
Thank you
You can get tinyMCE content by calling the the method triggerSave in the following way
tinyMCE.triggerSave();
after declaring this method you can get the contents by selector for example:-
var contents = $("#myTextArea").val();
or
var contents = tinyMCE.get('myTextArea').getContent();
Cannot read property 'getContent' of null often means that TinyMCE is unable to find your textbox which means there is something wrong in the reference to textarea's class.
<form method="post" action="somepage">
<textarea id="myTextArea" class="mceEditor">I should buy a boat. </textarea>
</form>
<button onclick="content()">Get content</button>
Take note of mceEditor class which we will now inform the TinyMCE editor about :
<script type="text/javascript">
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceEditor" //<<<----
});
</script>
And now simply get the contents of that textbox on the button click.
function content() {
alert(tinyMCE.get('myTextArea').getContent());
}
Here is working DEMO
Further to Shabaz's answer...
For TinyMCE version 4.1.9, I discovered the following:
tinyMCE.get('bobt').getContent(); and tinymce.get('bobt').getContent(); BOTH WORK (that is, uppercase the MCE does not matter)
bobt in my example code is an ID, not a class
The triggerSave() call is unnecessary - all that is important is for the textarea to have an ID, and to use the ID in the get('#YOUR_ID').getContent() call.
Full Example Code (non run-able):
$(function(){
$('button').click(() => {
//tinyMCE.triggerSave();
const out3 = tinyMCE.get('bobt').getContent(); //*MUST* be an ID, not a class
alert(out3);
$('#out').html(out3);
});
});
<textarea id="bobt" class="tinymce"></textarea>
<div id="outx"><button>Get it</button></div>
<div id="out"></div>
In the following code, I get an error
cannot read property "Area Sorted" of undefined
when I call the line
document.SortingForm.AreaSorted.value = Names.join("\n");
I've been over the code a hundred of times and I don't see why this is happening. I would really appreciate any help with this.
sort.html
<!doctype html>
<html>
<title>Sort</title>
<head>
<script type="text/javascript" src="sort.js">
</script>
</head>
<body>
<h1>Sorting String Arrays</h1>
<p>Enter two or more names in the field below,
and the sorted list of names will appear in the
text area.</p>
<form name=”SortingForm”>
Name:
<input type="text" name="FieldWord" size="20" />
<input type="button" name="ButtonAddWord" value="Add" onClick="SortNames();" />
<br/>
<h2>Sorted Names</h2>
<textarea name=”AreaSorted” cols=”60” rows=”10” >
The sorted names will appear here.
</textarea>
</form>
</body>
</html>
sort.js
var Names = new Array();
function SortNames()
{
Name = document.getElementsByName("FieldWord")[0].value;
Names.push(Name);
Names.sort();
document.SortingForm.AreaSorted.value = Names.join("\n");
}
You have weird speechmarks around the name of the form: ”. I'm a little suprised that using these is not valid though.
Why don't you try adding an id to the textarea and use:
document.getElementById('AreaSorted');
That should always work, regardless of the form being there.
Also the quotes before and after the form's name seem to be off, try retyping them.
I don't know where that syntax originates from, but obviously it doesn't work (any more). To get references to forms by their name, you should use document.forms.
document.forms.SortingForm.elements.AreaSorted.value = names.join("\n");
But the recommended way would be to assign an id to the input, and use document.getElementById.
AreaSorted isn't an id .. so either use
document.getElementByName('AreaSorted')[0]
or
.. give your element an id and use document.getElementById, which I would recommend.
I'm trying to take user form input and display it back to the user, among other things (all of which require the input being stored as a JS variable).
I'm trying to spit it out in an alert, as a quick feedback loop, and all I keep getting is [object HTMLInputElement]. I've tried to use document.forms[0] and document.getElementById (like below) and neither work. Also, I'm using bootstrap typeahead, could that be complicating this issue?
What am I missing?
Here's the code:
<div class="hero-unit">
<h1> Title </h1>
<p> This form description </p>
<form class="well" name="formInput" action= "#">
<label>Input</label>
<input Id="txtvarInput" class="span3" style="margin: 0pt auto;" type="text" placeholder="AAA, BBB, CCC..." data-provide="typeahead" data-items="10" data-source="["AAA","BBB","CCC","DDD","EEE","FFF","GGG","HHH","III","JJJ","KKK","LLL"]"/>
</label>
<div class="form-actions" "span3">
<input name="submit" type="submit" class="btn" value="Select" onclick="alert('you chose ' + theInput.value)"/>
<script language="JavaScript" type="Text/JavaScript">
var theInput = document.getElementById('txtvarInput');
</script>
</div>
</form>
</div>
<div class="page-header">
<h1>Input:
<script language="JavaScript" type="Text/JavaScript">
document.write(theInput.value);
</script>
</h1>
Edit: PART II, now the code works for the alert, but I need to use it elsewhere (like I said) and the variable isn't available in other sections of the html. Above, I'm just trying to get it to display that same value as a part of the html. It could be my JS, but this is pretty boilerplate stuff, so I think it's related to the location of the variable.
What do I need to do use it elsewhere? I've added the next div above to show what I'm trying.
--left an extra declaration of the variable in part II by accident, was one of the tests I was trying, removed now.
Right now, the object you're alerting is an HTML element, not a string. You can get its value using the value property:
alert('you chose ' + theInput.value)
(Note that you probably didn't mean:
var theInput = document.getElementById('txtvarInput').value;
As other answers suggest, because that would give you an empty string. It's only read once.)
You are trying to output the entire HTML-object that you have selected, not the value-property of it. Since alert() expect a string, JavaScript gives you the string representation of that object which is [object HTMLInputElement].
Try this instead:
var theInput = document.getElementById('txtvarInput').value;
var theInput = document.getElementById('txtvarInput');
should be
var theInput = document.getElementById('txtvarInput').value;
In the alert, use
theInput.value
You need to use the value property:
var theInput = document.getElementById('txtvarInput').value;
You forgot .value
Something like:
document.getElementById('txtvarInput').value
You are going to print the value of the input at the page load time. You will get an empty alert.
just do this!
<input name="submit" type="submit" class="btn" value="Select" onclick="alertVal()"/>
<script language="JavaScript" type="Text/JavaScript">
function alertVal(){
var theInput = document.getElementById('txtvarInput').value;
alert('you chose ' + theInput);
}
</script>
Ok, so I'm REALLY new to programming and javascript, but I'm having a problem with this little string of code. The thing that is bothering me about it, is that I have done things similar to this in other programs, but it's just not working right in this specific little part of this program. Here is basically what isn't working:
<html>
<script type="text/javascript">
function test()
{
var myTextField = document.getElementById('myText');
document.write (myTextField);
}
</script>
<form>
<input type="text" id="myText">
<input type="submit" value="submit" OnClick="test()">
</form>
</html>
When I do this, it returns [object HTMLInputElement] instead of the value of that text field. Thanks for any help cause I'm most of you know this. :P
getElementById returns the Object itself, which has many methods and properties as members.
You need to reference the value property, like this:
document.getElementById('myText').value;
That should work :)
Also, here's a general reference: https://developer.mozilla.org/en/A_re-introduction_to_JavaScript
Try:
document.write (myTextField.value);
function test()
{
var myTextField = document.getElementById('myText').value;
alert(myTextField);
// or
console.log(myTextField);
}
You should not use document.write here, as you document is already loaded. Document.write will remove the page.