I'm reading a tutorial of Javascript, I'm making a html file with a javascript function with a box, the fact is that the alert does not show what goes into the text field, what am I doing wrong ?, this is my code. I'm not entirely clear, how it handles the event onBlur, someone explain more about it? as in the tutorial the only explanation they give is "Losing the focus control," I don't know what they mean by the word focus, or how it is handled the text box, without enter botton.
<html>
<head>
<script>
function show ()
{
var age= parseInt (cage.value);
if (age<=18)
alert("access denied");
else
alert("Welcome");
}
</script>
<title> New Page I </title>
</head>
<body>
Age:
<input type="text" id "cage" name="cage" size="10"
onBlur=show();>
</body>
</html>
The onBlur event fires when the current control loses focus. When a control has focus, meaning that it's currently "selected", things that can cause it to lose focus include clicking on another control or pressing the tab key.
The reason your method does not work properly is because it has a small error. Try this:
<html>
<head>
<script>
function show(el)
{
var age = parseInt(el.value);
if (age<=18)
alert("access denied");
else
alert("Welcome");
}
</script>
<title> New Page I </title>
</head>
<body>
Age:
<input type="text" id="cage" name="cage" size="10" onBlur="show(this);" />
</body>
</html>
You have to use () after function name and look up the element first and then retrieve the value from it.. here is sample code.. (should work, not tested)
function show(){
var age = document.getElementById('cage').value;
if (parseInt(age, 10)<=18)
alert("access denied");
else
alert("Welcome");
}
the onBlur event is fired when you click on anything other than the input box (e.g. clicks another one, or click on a link to something). Basically, if you can't type in the input field, it does not have focus.
As for why it's not working, see #Teja Kantamneni 's answer, which should make it work.
You can getting an error because you are missing the parentheses() after the function declaration. Even if you have a function with no parameters must include the parentheses () after the function name.
Focus is when a form element receives control, so you can type in it or change options of a dropdown. Like onBlur there is also an onFocus event.
Focus is generally set on page load. so when the page is loaded so user does not have to go and click on the first field they need to fill in.
In this example you can have:
Javascript
function setFocus(){
document.getElementById('cage').focus();
}
HTML
<body onLoad="setFocus();">
Related
I am using React if that helps.
I'm working on some user actions analytics for my website which has a form. I'm adding a logger on some user actions. One of them being I want to log every time the user clicks on the input field to enter some value into it. How can I achieve this functionality?
I was thinking of onClick but I don't think that would be the best way to go about it cause that wouldn't serve the purpose.
<input onClick={logCount}>
More info about events:
https://reactjs.org/docs/handling-events.html
I'm not exactly sure why you're claiming an onclick event wouldn't be the right approach.
You can add an ID to the input tag and access it through a JavaScript file, adding an onclick event to it.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="test">
<script>
document.getElementById('test').onclick = function() {
console.log('An input field with the id "test" has been clicked.')
}
</script>
</body>
</html>
Hello everyone and sorry for my english.
Following this jdfiddle, I have a problem I don't understand.
First I change the value of the input, then I click on the button and what I expected to see is "click" but I see "change" meaning onclick is called after onchange.
<input type="text" onChange="alert('change')" />
<button type="button" onClick="alert('click');">Click!</button>
I found on this post that it's because of chrome which fires onchange event before the onclick event. But I don't really have the same need as this post because my event are not declared in the same tag. And secondly, if I click on the button I would like to only execute the onclick function and not onclick and then onchange (this methods consists in using onMouseDown).
Do you have a good method to do that?
Ok so I can see that you really wan't this.
You could let the on change function run first, and then afterward see what has focus, if it is that button, you would know that it was clicked, and thus was the reason for loosing focus.
you cannot check this while the change function is running, as the body still has focus at this time..
<head>
<script language="javascript">
function focussed()
{
var triggerElement = document.activeElement
alert(triggerElement)
console.info(triggerElement)
}
function change()
{
alert("change")
setTimeout(focussed, 1)
return true
}
</script>
</head>
<body>
<input type="text" onChange="alert('change')" />
<button type="button" onClick="alert('click');">Click!</button>
</body>
I am trying to understand the Execution Order of HTML and JS functions.
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementsByName("check1");
x[0].disabled=true;
x[0].checked=true;
x[0].value="Y";
}
function myFunction1()
{
var x=document.getElementsByName("check1");
alert(x[0].value);
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<form>
<input type="checkbox" name="check1" unchecked enabled value="N"/>
<input type="button" value="Button" onclick="myFunction1()"/>
</form>
</body>
</html>
Finally the element "check1" value is =Y.
finally checkbox is checked and disabled.
Can anyone explain about this.
I have already gone through this link which is very useful:
Load and execution sequence of a web page?
Still the above example will help bit more .Thanks
first you change the name of functions.. it must be different. then the execuation order is
first onbody load function is called then input button function called.
you can even check it by alert that.
The "myFunction()" method called in on load event so that it executed immediately after a page is loaded. and the function "myFunction1()" called on button click event .And you are initializing check box value with "N" value thats why it displaying n after every page load function
If I understood your question you mean why your checkbox value is 'Y' despite you disabled the checkbox.
disabling checkbox only make it inactive as far as User Interface is concerned but through script you can still change the value.
Is it possible to have an html that links to different websites depending on what text the user enters? In other words, I have a simple text form where users can enter text and then hit submit. As an example of what I'm hoping to do, is there a way to set it up so that if they enter "ABC" and hit submit it takes them to google, but if they enter "XYZ" it takes them to yahoo?
Yes you can, but you need JavaScript, here's a very contrived example almost reminiscent of Web 1.0 scripts. The code sets up a listener on the textfield (keyup), and whenever it changes it calls the function changed, which then evaluates the value in the field. If it matches 'XYZ', it then sets the form's action property to be the URL where you want the form submission. In this particular case, the URL to will be something that doesn't exist. Now of course this is not a complete solution and you'll have to spend a bit of time getting the handler to work correctly.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form id="myform">
<input type="text" id="mytext" onkeyup="changed()">
</form>
<script type="text/javascript">
function changed()
{
var v = document.getElementById('mytext').value;
if("XYZ" === v)
{
var action = "http://www.foobar.nothing/" + v;
document.getElementById('myform').action = action;
}
}
</script>
</body>
</html>
I'm seeing my Friend's code here...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Check action </TITLE>
<script>
function detectEvent(){
if(window.event.keyCode==13)
{
alert("you hit return!");
}
}
</script>
</HEAD>
<BODY>
<form name="name1" onkeyup="detectEvent()" action="page2.html">
<p> Field1
<input type="text" id="text1"/>
</p>
</form>
</BODY>
</HTML>
and when he tried entering a value in the textbox and pressed enter, it did not call the detectEvent(). I said, it'll always call onSubmit on enter button.....
and he surprised me,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Check action </TITLE>
<script>
function detectEvent(){
if(window.event.keyCode==13)
{
alert("you hit return!");
}
}
</script>
</HEAD>
<BODY>
<form name="name1" onkeyup="detectEvent()" action="page2.html">
<p> Field1
<input type="text" id="text1"/>
</p>
<p> Field1
<input type="text" id="text2"/>
</p>
</form>
</BODY>
</HTML>
Now press enter, The function gets called.....
Why so!?
Why onKeyUp not called on forms with just one field.!!! am i missing something?
The order of events is:
keydown
keypress
submit
keyup
So by the time your keyup handler would have been called, the form has already started submitting. If the action of the form is a page2.html on the local filesystem, that's going to navigate very quickly and probably move away from the page before keyup can be called; set the action to an external site, on the other hand, and keyup will have time to fire.
Adding the second input field is a different issue: in this case the form is not submitted at all. It is a curious historical quirk that browsers will submit a form that has only one input and no submit button, but refuse to submit a form with more than one input, and no submit button. This goes back to the HTML 2.0 spec:
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
HTML 2.0 didn't specify whether or not Enter should be accepted to submit a form in any other circumstances (the intention seems only to have been to duplicate the functionality of the ancient <isindex> element), but browsers of the day seem to have interpreted that to mean that Enter-submission shouldn't happen where there are multiple fields, but then any submit button causes Enter-submission to happen anyway. IE and other later browsers copied this odd behaviour.
Unrelated point: the reliance on window.event makes the code needlessly IE-only. For all other browsers, the event object is passed in as an argument to the event handler function. You can do onkeyup="detectEvent(event)" in the HTML and then use that argument in the detectEvent function, which works on both models because either the local argument event or the global window.event is used. But the usual approach would be to lose the event handler attribute and assign from JavaScript:
<form action="page2.html" id="enterform">
<p> Field1
<input type="text" id="text1">
<!-- Note: *no* trailing slash - the doctype says HTML4, not XHTML -->
</p>
</form>
<script type="text/javascript">
document.getElementById('enterform').onkeyup= function(event) {
if (event===undefined) event= window.event; // for IE
if (event.keyCode===13)
alert('You pressed Enter');
};
</script>
Having said all that... I'm generally suspicious of trapping the Enter key. I'm not quite sure what you're trying to do, but if it's the common case of changing the default button in a form this definitely isn't the way to do it and will cause an assortment of problems. There is no good reason you should be trapping the Enter key to call .submit() on a form.
Interestingly enough, in Google Chrome, the form with the second input field will still submit, so it never catches the enter key on a keyup event, regardless of how many fields you have.
Solution = use keypress or keydown.