Cannot get document.getElementById() to find my textarea - javascript

Maybe I've been working on my site for to long, but I can't get the following to work. I am having my textarea fire an onkeyup() event called limiter which is supposed to check the textarea and limit the text in the box, while updated another readonly input field that shows the amount of characters left.
This is the javascript code:
<script type="text/javascript">
var count = "500";
function limiter(){
var comment = document.getElementById("comment");
var form = this.parent;
var tex = comment.value;
var len = tex.length;
if(len > count){
tex = tex.substring(0,count);
comment.value =tex;
return false;
}
form.limit.value = count-len;
}
</script>
The form looks like this:
<form id="add-course-rating" method="post" action="/course_ratings/add/8/3/5/3"
accept- charset="utf-8"><div style="display:none;"><input type="hidden"
name="_method" value="POST" />
//Other inputs here
<div id="comment-name" style="margin-top:10px">
<div id="comment-name-text">
<b>Comments</b><br />
Please leave any comments that you think will help anyone else.
</div>
<style type="text/css">
.rating-form-box textarea {
-moz-border-radius:5px 5px 5px 5px;
}
</style>
<div class="rating-form-box">
<textarea name="data[CourseRatings][comment]" id="comment"
onkeyup="limiter()" cols="115" rows="5" ></textarea>
<script type="text/javascript">
document.write("<input type=text name=limit size=4
readonly value="+count+">");
</script>
</div>
<input type="submit" value="Add Rating" style="float: right;">
</form>
If anyone can help that would be great.

You have:
onkeyup="limiter()"
Since you aren't calling limiter in the context of an object, you are calling window.limiter.
var form = this.parent;
So this is window and form is window.parent, which is the same as window (unless the document is loaded in a frame).
You want to make this the form control. Do this using event binding in unobtrusive JavaScript.
(And don't use an input as an element solely for displaying output, it does not make sense. You probably want to use a label associated with the textarea … and to use another label for <b>Comments</b><br />Please leave any comments that you think will help anyone else.)

Would this work for your? Example Link
EDIT:
You should pass the element instance with the function call onkeyup="limiter(this)" this way in your function you'll have a reference to the object that called this function, now your function will be something like:
function limiter(a) {
var comment = a;
var form = document.getElementById('add-course-rating');
var tex = comment.value;
var len = tex.length;
if (len > count) {
tex = tex.substring(0, count);
comment.value = tex;
return false;
}
form.limit.value = count - len;
}
Also no need to create element dynamically if you don't really need that! so just set the value of the readonly with Javascript:
<input type="text" name="limit" id="limit" size="4" readonly value="">
<script type="text/javascript">
var limit = document.getElementById('limit');
limit.value = count;
</script>
And you are good to go!

Related

How to use information from created function to get added in new <p> tag

I'm currently trying to make a form where people can input information, and the info will then show up in a new div afterwards within a paragraph tag.
<form id="form" onsubmit="return false;">
<input type="text" id="userInput">
<input type="submit" onclick="addParagraphs()"> <!-- button -->
</form>
The way I'm currently trying to make it work is by having a function that looks at what information gets filled out, this is done by;
function othername() {
var input = document.getElementById("userInput").value;
}.
This way I am able to "save" the info, but my issue comes when I have to make it appear I a paragraph later on. I cannot for the life of me, figure out how to recall this stored information. The way I have tried is the following:
function addParagraphs()
{
var para = document.createElement("p");
var node = document.createTextNode(othername());
para.appendChild(node);
var element = document.getElementById("sizeValgt");
element.appendChild(para);
}
The "sizeValgt" is the id for the new div where the paragraph tag, is gonna be created when filling out the information.
This might be a little confusing, but I hope some people are able to understand what I'm trying to do here.
There are some mistakes in your code
First: : you are not returning value from your othername function
Second: you are not adding this value in p tag
function othername() {
var input = document.getElementById("userInput").value;
return input;
}
function addParagraphs(){
var para=document.getElementById("test");
if(para==null){
para = document.createElement("p");
para.id="test";
}
para.innerText=othername();
var element = document.getElementById("sizeValgt");
element.appendChild(para);
}
<form id="form" onsubmit="return false;">
<input type="text" id="userInput">
<input type="submit" onclick="addParagraphs()"> <!-- button -->
</form>
<div id="sizeValgt"></div>
You can do it simply in jquery. Example:
HTML
<input type="text" id="uinput"/>
<input type="submit" id="usubmit"/>
<p id="dis"></p>
Jquery
$(document).ready(function(){
$('#usubmit').click(function(){
var utext= $('#uinput').val();
$('#dis').html(utext);
});
});

How to get value from HTML textbox in Javascript

I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>
and the Javascript I'm trying to use looks like this:
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice);
}
However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?
Thanks
here's an example with change event listener for firing a function when there's a change in form
var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/
var divInner = div.innerHTML;
setTimeout(function(){
document.write(divInner);
},2000)
})
<form id="firstbox">Choice:
<input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>
Check this !
document.write(document.forms['firstbox'].firstinput.value);
OR
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice.value);
}
See http://www.w3schools.com/jsref/prop_text_value.asp
var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>
If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):
HTML
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
<div id="result"></div>
</div>
JS
var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;
You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.
JS
document.getElementById('firstinput').addEventListener('keypress', function(e) {
if(e.which == 13) { //detect enter key pressed
e.preventDefault();
document.getElementById('result').innerHTML = this.value;
}
});
use the value property
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice).value;
}

Populating Textbox on website using javascript

I am working on a project that i would need to populate textbox's inside of BMC Web Remedy with information with JavaScript/HTA File. -- Essentially I just need to Push text into textbox's on the site
I can't seem to figure out how to populate the information onto the page itself though, was wondering if I could get some guidance of if this is possible/how i would go about doing this, or just pointed in the right direction.
Just to clarify as an example on the web site:
http://www.brivers.com/resume/scripts/tutorial-hta-textbox.php
Having data push into the name/address/city field
Something like this only I'm not sure how to push it to the website field itself
**sorry just to clarify the field I am wanting to push this to is external of the application, is there a way to push this to a text field on (literally any) website? for example a username/password textbox on any site
<script language="javascript" type="text/javascript">
function PushData_NSO(){
var userinput = txtPhoneNum.value;
document.getElementById('txtName').value = userinput;
}
</script>
<body>
<p> <input id="txtPhoneNum" type="text" value=""> </p>
<p> <input type="button" onclick="PushData_NSO()"> </p>
</body>
You're trying to do getElementById('txtName') where the html is <input id="txtPhoneNum" />. This will never work because the id isn't the same as the one you're trying to access.
For errors like this, you could use the developer tools (Chrome, IE, Firefox shortcut F12) to see if there are errors in the console.
Furthermore the variable txtPhoneNum isn't defined. If you'd want it to be the input-element you should first do txtPhoneNum = document.getElementById('txtPhoneNum').
I've created a plunker to illustrate.
Get the data from HTML like this,
var userinput = document.getElementById('txtPhoneNum').value;
// do something with userinput
To display data in HTML you should use,
document.getElementById("whateverID").innerHTML = "changed user input";
try this:
<script type="text/javascript">
function PushData_NSO(){
var userinput = document.getElementById('txtPhoneNum').value;
document.getElementById('txtName').value = userinput;
}
</script>
<body>
<p> <input id="txtPhoneNum" type="text" value=""> </p>
<input type="text" id="txtName" value="" />
<input type="button" onclick="PushData_NSO()" value="push "/>
</body>
When you use getElementById('ValueOfID'), the javascript searches all the elements in the html where the id attribute is the same value as "ValueOfID" (in this case).
The .value after getElementById means you are going to do something with that value, in this case you change it to whatever is in the "userinput" variable.
So in your case you need to do:
<script language="javascript" type="text/javascript">
function PushData_NSO(){
var userinput = txtPhoneNum.value;
document.getElementById('txtPhoneNum').value = userinput;
}
</script>
Please try this:
<script language="javascript" type="text/javascript">
function PushData_NSO(){
//First get the value or text, for an instance, just say "sampleText".
var userinput = document.getElementById('txtPhoneNum').value;
//Secondly get the id of the textbox and using that append the value to that textbox.
document.getElementById('txtName').value = userinput;
}
</script>
I think this is what your after
<form>
<input id="txtPhoneNum" type="text" value=""/>
<input type="button" onclick="PushData_NSO()" value="Add Number to Div"/>
</form>
<br/>
<div id="txt">The number will replace this text</div>
<script>
function PushData_NSO(){
var userinput = document.getElementById('txtPhoneNum').value
document.getElementById('txt').innerHTML = userinput;
}
</script>
Here is a JSFIDDLE showing it in action, if you have any questions about this feel free to ask

CKeditor with multible dynamic textareas

I have a forms which allows multiple steps to be submitted. When a user clicks "add step" another textarea appears. I am using CKeditor. It works great of the first iteration, but on all subsequent ones, it shows a standard text area. Here is my code:
<form method="post" action="process_project.php">
<b>Steps for your project:</b>
<div> </div>
Step 1
<div id="divWho">
<textarea name="projSteps[]" class="steps" id="1" rows="10" cols="60"></textarea>
</div>
<div> </div>
<input type="button" value="Add project step" onClick="addTextArea();">
<input type="submit" name="submit" value="submit" />
</form>
<script type="text/javascript">
var counter = 1;
var limit = 11;
function addTextArea() {
if (counter == limit-1) {
alert("You have reached the limit of adding " + counter + " project steps");
return false;
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Step " + (counter + 1) + " <br><textarea name='projSteps[]' id=counter rows='10' cols='60'>";
document.getElementById('divWho').appendChild(newdiv);
counter++
return true;
}
}
</script>
<script> CKEDITOR.replace('1');</script>
How can I make each new dynamically created text areas also use CKeditor? I have been working on this for hours and I am stumped.
I think you need to move CKEDITOR.replace('1'); inside the addTextArea() method enclosed in the else block before the return statement.
And also if you hard code the replace parameter to '1', it will only convert the first instance of textarea with id 1 to CKEditor and ignore others. Generate an Id dynamically and pass it to repalce method. Something like below,
var step = 'step'+counter;
div = <textarea name='projSteps[]' id=step rows='10' cols='60'>;
CKEDITOR.replace(step);
I haven't written the second step completely, I guess you can modify it as you need.
I'm working on a similar functionality and this approach works for me.
use like this.
<textarea class="ckeditor" name="abc1"</textarea>
and in JS add this
CKEDITOR.replaceAll( 'ckeditor' );
I hope it will work for all the textareas.

Grabbing value and appending to textarea with Javascript?

I'm stuck!
I have this simple form:
<p><input type="text" name="hometown" id="hometown" size="22" /></p>
<p><textarea name="comment" id="comment"></textarea></p>
What I need is to append the input value from #hometown to textarea! It mustn't replace text already written there. In the best case, it'd just print at the end of whatever is written on ''submit'' click.
This is how far I've got with my Javascript, but nothing seems to work.
function addtxt(input) {
var hometown = document.getElementById('hometown').value;
var obj=document.getElementById(comment)
var txt=document.createTextNode(lol)
obj.appendChild(txt)
}
Textarea has value property to operate with its contents. Just use += to append text:
document.getElementById("comment").value +=
document.getElementById("hometown").value;
Try this
var oldval=$('#comment').val();
var newval=$('#hometown').val();
S('#comment').val(oldval+' '+newval);
Here's an example for you I've put on JSFiddle, using pure javascript and the onClick listener
http://jsfiddle.net/vyqWx/1/
HTML
<input type="text" name="hometown" id="hometown" size="22" />
<textarea name="comment" id="comment"></textarea>
<input type="submit" onClick="doMagic();">
JS
function doMagic(){
var homeTown = document.getElementById("hometown").value;
document.getElementById("comment").value += homeTown;
}

Categories

Resources