document.getElementById().focus() returning undefined - javascript

I have the following HTML:
<input type="text" id="endDateEditBox" value="" style="margin-left:5px; height:18px; width:70px; vertical-align:middle;" onchange="validateDate('endDateEditBox', $(dateFormatErrorString).value)">
And I am trying to make this focus using the following Javascript:
document.getElementById("endDateEditBox").focus();
Which chrome console and Firebug both return as undefined. I feel like I am missing something very obvious here, can anyone help?

The focus() method does not return a value. It sets the focus on the matched input, and then returns undefined...

The Javascript native focus function doesn't return anything.
If you expected to receive the element and use it in concatenation, you're probably confusing it with the jQuery's focus function.

Try this code:
<html>
<head>
<script type="text/javascript">
function setFocus()
{
document.getElementById("endDateEditBox").focus();
}
</script>
</head>
<body onload="setFocus()">
<form>
Date: <input type="text" id="endDateEditBox"><br />
</form>
</body>
</html>

Related

Pass html input into a js function?

I would prefer to accomplish this without inline script. I'd be interested to learn this both with and without jQuery.
After trying several different element selector methods, changing the placement of my script tag, and trying onclick, this is how my code looks.
The console is returning the error "Cannot read property 'addEventListener' of null".
javascript:
document.getElementById("button").addEventListener("click", someFunction(document.getElementById("number").value));
someFunction(){};
Html:
<head>
<script src="nibble.js"></script>
</head>
<body>
<form>
<input type="number" id="number" name="number" ></input>
<input type="button" id="button" name="button" value="Test number"></input>
</form>
</body>
</html>
Your script needs to be placed below the html (or be wrapped in window.onload) in order to find the elements at runtime. Also, your addEventListener is wrong, right now it isn't a function that gets called, but undefined. Try it like this:
document.getElementById("button").addEventListener("click", someFunction);
function someFunction(){
alert(document.getElementById("number").value)
};
HTML:
<head>
</head>
<body>
<form>
<input type="number" id="number" name="number" ></input>
<input type="button" id="button" name="button" value="Test number"></input>
</form>
<script src="nibble.js"></script>
</body>
</html>
Created one fiddle for you. Hope this will be of some help.
http://jsfiddle.net/mfLt7/96/
$(document).ready(function(){
document.getElementById('button').addEventListener('click', someFunction);
function someFunction(){
var value = document.getElementById('number').value;
alert(value);
}
});
Hope this be of some help. Happy Learning
Have a look at this fiddle I just made. The way you are passing someFunction to your addEventListener call is wrong because you are calling the function instead of passing it's reference to the event listener so it can decide to call it on its own.
Here's what the function looks like:
document.getElementById("button").addEventListener("click", someFunction);
function someFunction(){
document.querySelector('.output').innerHTML = document.getElementById("number").value
};

got confused with 'this' in one form in js

<HTML>
<HEAD>
<TITLE>Example 5.3</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calculate(form) {
form.results.value = eval(form.entry.value);
}
function getExpression(form) {
form.entry.blur();
form.entry.value = prompt("Please enter a JavaScript mathematical expression","");
calculate(form);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Enter a JavaScript mathematical expression:
<INPUT TYPE=text NAME="entry" VALUE="" onFocus="getExpression(this.form);">
<BR>
The result of this expression is:
<INPUT TYPE=text NAME="results" VALUE="" onFocus="this.blur();">
</FORM>
</BODY>
</HTML>
Above code is from one js tutorial.
Question:
onFocus="getExpression(this.form);" , what does this represent here? I thought it is window object, if so, then can not explain this line: onFocus="this.blur();", or both this mean the input field, if so, how to userstand this.form(input.form)?
I got confused with 'this' here, could anyone explain to me? Thanks.
onFocus="getExpression(this.form);" , what does this represent here?
this here is your input <INPUT TYPE=text NAME="entry"/>
onFocus="this.blur();"
this here is your input <INPUT TYPE=text NAME="results"/>
this means it refers to that particular form, and that particular element.
Example: this is the Shortest answer I ever posted (Refers to this question)
The this keyword is a tricky one in the JS Environment I would recommend this article since it really helped me to understand it some time ago. Understanding the this keyword.
In this case if the function is not being executed by call() or apply() which modifies the behaviour of the this keyword it should represent the caller of the function, in this case the input that the event was triggered from.
Hope this helps :)

How to execute a function every time the content is changed in an input field using JQuery?

I have a text field <input type="text" id="search" /> and I would like to execute a JavaScript function every time the user change the content in it (letter by letter). How can I do this using jQuery?
I tried to implement the function as the answer to Using JQuery, how do you detect if the value of a text input has changed while the field still has focus? but nothing happens for me.
Here is my HTML:
<html>
<head>
<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/search.js"></script>
</head>
<body>
<form>
<input type="text" name="search" id="search" />
</form>
</body>
</html>
My search.js is:
var target = $('#search'), val = target.val();
function search()
{
alert('search');
}
target.keyup(search);
I have also tried with (nothing happens):
$('input[name=search]').change(function() {
alert('changed');
})
And if I try just adding some HTML using jQuery, it works:
$(function(){
$("<p>hello</p>").insertAfter("#search");
})
The change event doesn't fire until the control loses focus. If you are only interested in text, you can use .keypress() to do something before the contents change, or .keyup() to do something afterwards.
Here is an example using keypress in jsfiddle: http://jsfiddle.net/R6vmZ/

$("#myForm").attr("action") returns a form element instead of undefined for forms with no actions

I have this basic example:
<!doctype HTML>
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#showAction").click(function(){
alert($("#myForm").attr("action"));
});
});
</script>
</head>
<body>
<form id="myForm">
<input type="text" name="action" value="myAction" />
</form>
<input type="button" value="click me" id="showAction" />
</body>
</html>
When you click 'click me' you can see the tag
$("#myForm").attr("action");
Doesn't actually return an attribute of the element. It returns the child of the form with the name "action".
Is this expected behavior? Is this a bug in jQuery?
It's a "bug" introduced by Netscape a long time ago (a boneheaded move, IMO), where form.action is a property because an element with that name is a child of the <form>. So no, it's not really a jQuery bug, but a JavaScript one, depending on your point of view...jQuery just doesn't have any additional checks for these cases.
To be safe, don't name your elements "action" or "submit", since it can mess with form.submit() as well.
Very odd indeed. I am going to quietly say - bug...
Form with an action attribute: http://jsfiddle.net/vMTYY/
Form without an action attribute: http://jsfiddle.net/ZWWTm/

Can you use Javascript to put date/time into form input onload?

I am trying to put the date and time into a form field onload. Am I doing something wrong here, I can't get it to work. Here is my code:
<HEAD>
<script type="text/javascript">
function updateData()
{
var cl_dt=new Date();
document.getElementByName("lastpost_cl").value=cl_dt;
}
</script>
</HEAD>
<BODY onLoad="updateData();">
<form id="FormName" action="updated.php" method="post" name="FormName">
<input id="lastpost_cl" name="lastpost_cl" type="text" size="25" maxlength="255">
Use getElementById. getElementsByName (There is an 's' after Element!) returns a collection of element(s).
getElementByName does not exist, at least not cross browser. Use getElementById instead. You already have an ID that is the same, so it will work with just that change.

Categories