onkeypress does not call function - javascript

I need to call a js function everytime a key is pressed in a textbox:
<html>
<script>
function checkValidity() {
alert("Checking...");
}
</script>
<body>
<input type="text" name="username" id="username" onkeypress="checkValidity()">
</body>
</html>
The alert, however, never get displayed. What's wrong with this code?
UPDATE
The script is actually in a separate js file but I'm certain it's declared correctly because if I call checkValidity() from the body's onload I do get the alert.

Actually your markup is right but the function name checkValidity is now an internal keyword for elements
Check here https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
You can change the name of the function thats all
<html>
<script>
function checkMyValidity() {
alert("Checking...");
}
</script>
<body>
<input type="text" name="username" id="username" onkeypress="checkMyValidity()">
</body>
</html>

checkValidity is Javascript's form validation method. Change the method name. Then it will work.

<html>
<head>
<script>
function checkValid() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" name="username" id="username" onkeypress="checkValid()">
</body>
</html>
I think it is working

Related

Cannot hide a element in javascript using onfocus event

when i trying to hide the element div while click on text box using javascript.but it can't.what is the error on my program .anyone suggest me a good one
<html>
<head>
<script>
function clear()
{
alert("hi");
document.getElementById("mails").style.display="none";
}
</script>
</head>
<body>
<input type="text" onfocus="clear();" />
<div id="mails">hii</div>
</body>
</html>
Instead of using function name as clear(), please use any other name.
clear method refers to obsolete document.clear() method so it does not call clear method written by you.
According to HTML5 Specification, clear() method must do nothing.
IT's very easy to hide elements if you use jQuery. This way, all you need to do is:
$('#mails').hide();
If you prefer using DOM, then you can try this:
<html>
<head>
<script>
function hideit()
{
alert("hi");
document.getElementById("mails").style.display="none";
}
</script>
</head>
<body>
<input type="text" onClick="hideit()" />
<div id="mails">hii</div>
</body>
</html>
Though clear is not a keyword but it seems some browser still supports document.clear & that may be stopping the clear function here . You can change the function name and try
function myF() {
document.getElementById("mails").style.display = "none";
}
<input type="text" onfocus="myF();" />
<div id="mails">hii</div>
I am to late but nevertheless I can agree brk. The clear() is blocked by a native function.
<html>
<head>
<script>
function clearFunction()
{
console.log("onfocus called");
document.getElementById("mails").style.display="none";
}
</script>
</head>
<body>
<input type="text" onfocus="clearFunction();" />
<div id="mails">hii</div>
</body>
</html>

how to access input tag in form with jquery?(include hidden type)

I looking for how to access input tag in form via jquery.
I made something like below :
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test </title>
<script src="/resources/gtl_portal/js/jquery/jquery-2.1.1.min.js"></script>
<script src="/resources/gtl_portal/js/comon.js"></script>
</head>
<body>
<form id="a" action="#">
<input type="text" name="name" value=""><br/>
<input type="text" name="phone" value="numbervalidation"><br/>
<input type="hidden" name="hiddenParam" value="hidden parameters"><br/>
press<br/>
</form>
<script>
function chk(){
checkValidation('a');
}
</script>
</body>
</html>
and in common.js
function checkValidation(formName){
var form = $('#' + formName);
form.children('input').each(function(k){
var obj = $(this);
console.log(obj.val());
}
};
I can get value from input tags without hidden type. How can I get hidden type also at once. I found follow article. But if I use this, it looks have to iterate form twice which I do not want to.
Link : jQuery access input hidden value
Is there any way to access hidden and not hidden at once?
Thanks :D
P.S/ I also curious about access multiple selector. I have tried
form.children('input, textarea, select').each(function(i){//do something});
but does not work. Would you find anything wrong from here?
You can use the :input selector. It selects all <input> elements including hidden inputs
$(":input");
Simply selecting the elements by tag name like $("input"); works as well.
Getting hidden input just works, see following code below:
console.log($('input'))
function show(){
$('input').attr('type','text')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden">
<button onclick="show()" >show hidden fields</button>

javascript onsubmit not working

I am trying to make a javascript function work on submitting the form, the function doesnt seem to run. Can anyone help?
<html>
<head>
<script>
function upload(){
alert("I am an alert box!");
}
</script>
</head>
<body>
<form enctype="multipart/form-data" method="post" onsubmit="return upload();">
<input type="file" name="file">
<input type="submit" name="upload" value="Datei hochladen">
</form>
</body>
</html>
When attaching the event handler to the form element, the scope of the event handler is the form and not the window
<form enctype="multipart/form-data" method="post" onsubmit="return upload(this);">
<script>
function upload(scope) {
console.log(scope); // The passed scope from the event handler is
} // the form, and not window
</script>
As input elements inside a form are attached as properties to the form object, where the name is the key, calling upload() in the event handler, where the scope is the form, would equal calling form.upload(), but the form already has an element with that name so form.upload is the upload button, not the upload() function in the global scope.
To solve it, either rename the function or the element
<html>
<head>
<script>
function upload(){
alert("I am an alert box!");
}
</script>
</head>
<body>
<form enctype="multipart/form-data" method="post" onsubmit="return upload();">
<input type="file" name="file">
<input type="submit" name="upload2" value="Datei hochladen">
</form>
</body>
</html>
FIDDLE
My problem, I had without knowing a form inside a form I was interacting with the inner one no matter what I do the outer form always executes
Add return statement in your code
<script>
function upload(){
alert("I am an alert box!");
return false;
}
</script>

Using Form Information As a Variable using Javascript and Forms

Alright, people of Stack Overflow, I have a question for you: I am in a web design class at my high school and learning ahead of the class since I already knew the first half of the class. I was asked by my teacher if I could teach what I have learned about Javascript and I agreed. However, one of the things she wanted me to teach is not working for me when I try it out on my own. I am trying to do a simple check for a variable that when you input a name into a box, if it is my name or the teacher's name it pulls up a popup that says "welcome" or something like that, and if it is anyone else it says "go away" the only issue is that no matter what I try something in the code is not working. This is a test function that I have at the moment; it is intended to print out the
<!doctype html>
<html>
<head>
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
alert(name);
}
</script>
</head>
<body>
<form name="KageForm">
Username:<input type="text" name="User">
<br/>
Password: <input type="password" name="pass">
<br/>
<input type="button"value="Submit" onclick="validator()" />
</form>
<script type="text/javascript">
</script>
</body>
</html>
Here is the full version of the code that I am trying to get to work:
<!doctype html>
<html>
<head>
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
if(name=="Kage Kaldaka"){
alert("Eeyup")};
else
alert("Nnope");
}
</script>
</head>
<body>
<form name="KageForm">
Username:<input type="text" name="User">
<br/>
Password: <input type="password" name="pass">
<br/>
<input type="button"value="Submit" onclick="validator()" />
</form>
</body>
</html>
You have several issues here:
You have a semicolon after the if statement
You are reading the name value on page load, at a point when the input field hasn't even been added to the page yet and certainly hasn't been filled out by the user yet. You need to read it when the user submits the form, i.e. you need to move the name assignment inside the validator method:
JS:
function validator(){
var name = document.KageForm.User.value;
if(name=="Kage Kaldaka"){
alert("Eeyup");
} else {
alert("Nnope");
}
}
There shouldn't be a semicolon after the if. You also have to put the variable inside the function to make it update:
function validator(){
var name = document.KageForm.User.value;
if(name=="Kage Kaldaka"){
alert("Eeyup")
} else {
alert("Nnope");
}
}
JSFiddle: http://jsfiddle.net/FhCTc/1/
You are setting your variable outside your function:
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
if(name=="Kage Kaldaka"){
alert("Eeyup")};
else
alert("Nnope");
}
</script>
This means var name is set when the page loads, but no other times. Move it into validator().
You also ended your if with a semi-colon, which would cause an error on the else portion.
Besides all the previous answers it is in good manner in JavaScript to use === not ==

Submitting form located within another form

Take a look at this html:
<head>
<title>Test page</title>
<script type="text/javascript">
function submitForm() {
document.getElementById("form2").submit();
}
</script>
</head>
<body>
<form id="form1" name="form1">
<input type="hidden" name="test1" value="test" />
<form id="form2" name="form2" action="http://google.com">
<input type="hidden" name="test2" value="nothing" />
</form>
</form>
Submit
</body>
Thing I want to do is submitting form2 located within form1 with a javascript. I want this to be done by submitForm() function. The problem is that it doesn't appear to work. I'm using FireFox for testing and always get an error which says that it's undefined. Does anybody know how I can get it working? Thanks in advance!
You can't nest HTML forms like that. End form1 before starting form2. Duplicate the hidden input if necessary.
Well, given that you have no element with the ID "xxx", I could see where your script might have some difficulty. Perhaps you mean "form2"?

Categories

Resources