Simple HTML input onkeypress event not working

Question

I'm new here (and to web development in general), and I have been trying to understand why my function is not being executed on the specified event.

I found this post, and it seems exactly like what I want, but even this did not work:

html <input type="text" /> onchange event not working

Any help would be appreciated. My exact code follows. I have some text input fields (actually search boxes), and ultimately I want to have it check a checkbox when the user enters data into the text fields, but it doesn't even seem to call the function.

I have tried a few variants while reading the post mentioned above. Here are some input field attributes I have tried:

<input type="date" name="dt" size="10" value="2012-07-21" onChange="SetCheckBox('d')" />
<input type="search" size="10" name="sl" value="" onChange="SetCheckBox('n')" />
<input type="search" size="10" name="sf" value="" onkeypress="SetCheckBox('n')" />
<input type="search" size="20" name="st" value="" onkeypress="SetCheckBox(this);" />

and here is my javascript:

<script language="javascript" type="text/javascript">
    Function SetCheckBox(id) {
        alert (id.value);
        document.write('test');
    }
</script>

I have tried not passing any arguments and just doing a document.write, but it doesn't seem to be calling the function. And yes, javascript is enabled and working elsewhere on the page just fine! The script is in the body, just below the form.

The (lack of) behavior is the same in multiple browsers. Thank you for any help you can provide. Ray

Why did you write `Function` with a capital? – PeeHaa Aug 23 '12 at 16:11 — PeeHaa, Aug 23 '12 at 16:11

Gabe · Accepted Answer · 2012-08-23T16:20:44.093

1

For javascript the function keyword is lowercase.

Function SetCheckBox(id)

needs to be:

function SetCheckBox(id)

Also, you're not passing object to get an id, so...

function SetCheckBox(id) {
        var ele = document.getElemenyById(id);
        alert (ele.value);
        document.write('test');
 }

edited Aug 23 '12 at 16:20

answered Aug 23 '12 at 16:11

Gabe

49,577
28
142
181

1

NEVER do document.write after page has rendered – mplungjan Aug 23 '12 at 16:34
Thanks... I knew it was something minor. And the code I had within the function was just bogus to test whether it would do something. I used a couple of different methods, which is why I had the id.value (which is how the other page showed it, when passing 'this'). – rayvd Aug 23 '12 at 18:19

mplungjan · Answer 2 · 2012-08-23T16:45:17.310

Several issues apart from the already mentioned uppercase F in Function

your function passes a variable called id but expects a field
you pass a string that is not an ID and not referring to a field
only the last version using (this) will work, but there is no value to alert
document.write will WIPE the page and all scripts on it when it is invoked after page load (e.g. not inline)

So code should be EITHER

function SetCheckBox(id) {
    var val = document.getElementById(id).value
    alert (val);
    document.getElementById('someContainer').innerHTML=val;
}

OR

function SetCheckBox(fld) {
    var val = fld.value
    alert (val);
    document.getElementById('someContainer').innerHTML=val;
}

Based on your description, my guess is you want to do this: DEMO

<input type="date" id="dt" name="dt" size="10" value="2012-07-21"
onkeypress="SetCheckBox(this)" />
<input type="checkbox" id="dtChk" />

using this script

function SetCheckBox(fld) {
    var checkbox = document.getElementById(fld.id+"Chk");
    // check if something is entered, uncheck if not
    checkbox.checked=fld.value.length>0; 
}

and maybe even with this addition

window.onload=function() {
  document.getElementById("dt").onkeypress();
}

which will check the box if the field is not empty at (re)load time

That's pretty much what I want... :) Thanks for all the help! — rayvd, Aug 23 '12 at 18:21

score 0 · Answer 3 · answered Aug 23 '12 at 16:14

0

in javascript function keyword is written in small letters and here you wrote F in caps.

answered Aug 23 '12 at 16:14

Anoop

993
6
16

score 0 · Answer 4 · edited Aug 23 '12 at 16:33

0

onkeypress and onchange event should works

<body>
<script type="text/javascript">

function SetCheckBox() {
    alert("1");
}

</script>

<input id = "test" value="" onkeypress="SetCheckBox();" />

<input id = "test1" value="" onchange="SetCheckBox()" />

</body>

edited Aug 23 '12 at 16:33

mplungjan

169,008
28
173
236

answered Aug 23 '12 at 16:20

user1619962

374
2
3

Not related to the problems in the question and don't use `<` in your code – mplungjan Aug 23 '12 at 16:32

Simple HTML input onkeypress event not working

4 Answers4