direct access to Textbox returns undefined values - javascript

I have a weird problem. In my js file, if I access a textbox directly like txtbox1.value it returns undefined, while if I get it with document.getElementById('txtbox1').value it gives me the value. I am not sure why this is happening. Can you suggest me some thing, where should I look?
Is this something related to IE 8?

When you use txtbox1, you are accessing a (probably) global variable of that name, which does not necessarily have anything to do with the HTML element with id txtbox1.
When you use document.getElementById('txtbox1'), you are specifically looking up the HTML element with id txtbox1.

I think you should add id = 'txtbox1' in your textbox tag

Related

Cannot insert HTML value into another

I'm trying to have the value of an HTML element equal the value of another. Sounds simple enough but when I try various options, it doesn't work
Here's what I'm trying to do:
I tried a few things. First, I made a javascript function that when they info button is pressed, it simply sets the value of the newname textbox to the title and then I was going to use javascript to trim off the extension. As you can see on the page, it simply outputs {{modal_header}}. I believe this is because when the function is being called, the value hasn't been set yet and that's why it's outputting this. I couldn't find out where else to call the function in order for it to work.
To get around that issue, I tried using PHP to retrieve the name. The only thing I could find related to the name was which in stuck in the value property of newname, but this output only the last file in the directory, no matter what file you selected.
I tried a bunch of different little things, but without any luck. You guys have any ideas?
Website: http://box.endurehosting.com/
HTML: http://pastebin.com/dZ5rKGUY
try this code
$(function(){
var title = $("#title").html();
title = title.substr(0, title.indexOf('.'));
$("#newname").val(title);
})

Hidden input field not being updated properly

I am trying to get the referrer and update the referrer so that my users can go back to the page they came back from. I have a hidden input field which holds the value of the redirect. I have a static value in there just in case the referrer is empty. If the referrer is not empty, I want to update the value of it. Here is the code I have written, I even tested it and it said it was updated, however, I am not being redirected properly, so it is not working.
JavaScript and HTML I have written (keep in mind, I have correctly linked the file and such):
$(document).ready(function(){
if (document.referrer != "") {
document.getElementsByName("redirect").value = document.referrer;
var test = "false";
if (document.getElementsByName("redirect").value == document.referrer){
test = "true";
}
alert(test);
}
});
<script src="js/referrer.js"></script>
<input type="hidden" name="redirect" value="https://www.google.com" />
I feel like this is a minor error or there might be some sort of standard I am not following.
Thanks for the help! I appreciate any insight!
I can't see what the problem is off hand by what you've given me. But what I can say is that if you are going to use JQuery in one place (document ready function) then you should also use it to grab the value of your input field.
It would also help if you put an Id on the input field instead of doing it by name. Ids are the best way to get a specific element. That could be your problem too.
Then call it using:
$("#ID").val()
so your code would become:
if($("#ID").val() === document.referrer)
I would also suggest using triple equals as well. But that is completely up to you.
I've never done anything with document.referrer, but there might be a better way of doing that as well.
One odd thing is that you are setting these 2 things equal to each other
document.getElementsByName("redirect").value = document.referrer;
and then immediately testing if they're equal to each other.
if (document.getElementsByName("redirect").value == document.referrer)
I can't say that this is your issue, but it's bad coding and should be fixed.
I think a single letter is tripping you up here.
if (document.getElement**s**ByName("redirect").value == document.referrer){
There's no singular equivalent for 'byName', so you do end up with an array (or at least, an array-like object). Unlike IDs, it is allowable for multiple inputs to have the same name. The easiest solution is this:
if (document.getElementsByName("redirect")[0].value == document.referrer){
Doing document.getElementsByName will return an object array that DOES NOT include the value. There is no way to change the value (That I know of and have tried) when using the getElementsByName. I have solved this issue by using getElementById, it actually works properly for me.

Loop though DOM with jQuery to get some data- attribute value

This seems like a simple thing, but I keep getting "undefined"
I am trying out the "data-" HTML5 attribute and I am looping through a bunch of div tags that look like this:
<div id="myEvent"
data-scheduledOn="1399985100000"
data-eventStatus="3">
And I am looping through a bunch of these like this:
$('[id="myEvent"]').each(function(index, divItem) {
alert($(divItem).data("scheduledOn"));
}
But I keep getting "undefined" If I do this (get the attribute) it works fine:
alert($(divItem).attr("data-scheduledOn"));
So What am I missing?
http://api.jquery.com/data/
"The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks."
At least at this point in time, to use the .data function you have to attach the data using the function before you can read it back using the .data function.
If you need to read pre-existing data use the .attr or .prop functions.
It seems as though It is a naming problem as Hamza Kubba suggested, but just a bit different...
if I changed the name of the data attribute to "data-scheduled-on" I can retrieve it by .data("scheduledOn") OR using data-scheduledon and .data("scheduledon") also works.
So don't use CAPS for data- names is the moral of this story!
Please note that per HTML 5 specs, the attribute name should not contain any uppercase letters and some browsers such as FF & Chrome will change any uppercase letter to lowercase. That's why the following demo works if you access the data attributes with lowercase names:
http://jsfiddle.net/fiddleyetu/5LdQd/
$('div.myEvent').each(function(index, divItem) {
console.log($(divItem).data("scheduledon"));
console.log( $(divItem).data("eventstatus") );
});
Ans since you cannot have more than one element on a page with the same ID, I have used a class selector for the demo.
MORAL: Do not use UPPERcase; your browsers may not always be that 'understanding'.

Javascript json, check all keys for undefined ('null') and set default

Firstoff I'd like to add I've been learning javascript for like only 2 days now. I'm pretty much way ahead of myself with what I'm trying to get but here goes.
I have a json array from which I get data to replace/insert in my page. The first problem I have is that if it comes across an empty ('null') key it will just stop. Will not even try to continu.
document.getElementById("id1")src=json.img1.link;
document.getElementById("id2")src=json.img2.link;
document.getElementById("id3")src=json.img3.link;
json.img2.link is empty ('null' response from json.). javascript will then not replace "id2" but it also won't replace "id3".
I'm now trying to find a solution where it will if nothing else at least set a default.
The script is not continuing executing because it comes to an error --trying to access property link of an undefined object
Try
document.getElementById('id2').src = json.img2 ? json.img2.link : 'defaultLink';
This way your are checking for undefined (ie null) object in img2 and assigning the default value. This assumes that what is not defined (null) is the img2 object.
Actually I don't think your code should work at all, you are missing the. before the src So, try
document.getElementById("id1").src=json.img1.link;
document.getElementById("id2").src=json.img2.link;
document.getElementById("id3").src=json.img3.link;
and let us know if that doesn't solve the problem.
Btw, +points for learning JavaScript and not just straight into jQuery!

bookmarklet: inserting text into textarea with js?

What I am doing wrong?
javascript:document.getElementsByTagName('textarea').innerHTML='inserted';
I want to create a bookmarklet to insert simple text to a textarea on a given webpage.
Use the value property rather than innerHTML and make sure your code evaluates to undefined, which you can do by wrapping it in a function with no return statement. If you don't do this, the contents of the page will be replaced with whatever your code evaluates to (in this case, the string 'inserted').
javascript:(function() {document.getElementsByTagName('textarea')[0].value = 'inserted';})();
Update 14 January 2012
I failed to spot the fact that the original code was treating document.getElementsByTagName('textarea') as a single element rather than the NodeList it is, so I've updated my code with [0]. #streetpc's answer explains this in more detail.
Unlinke getElementById, getElementsByTagName has an sat Elements because it returns an array array-like NodeList of the matching elements. So you'll have to access one of the elements first, let's say the first one for simplicity:
javascript:void((function(){document.getElementsByTagName('textarea')[0].value='inserted'})())
Also, as mentioned by others, value property rather than innerHTML here.
In case anyone wonders how to use the currently focused text field, use the following:
document.activeElement.value = "...";
In jQuery you have to use if this way:
for single element -> $('#element_id').html('your html here')
for all text areas -> $('textarea').val('your html here')
I have to confess that I`m not sure why it works this way but it works. And use rameworks, they will save you time and nerves.

Categories

Resources