CODEWITHSUNDEEP
javascriptfunctiontextboxevent-handling
rayvd
rayvd

Reputation: 141

Simple HTML input onkeypress event not working

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

Upvotes: 0

Views: 13758

Answers (4)

mplungjan
mplungjan

Reputation: 177885

Several issues apart from the already mentioned uppercase F in Function

  1. your function passes a variable called id but expects a field
  2. you pass a string that is not an ID and not referring to a field
  3. only the last version using (this) will work, but there is no value to alert
  4. 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

Upvotes: 1

user1619962
user1619962

Reputation: 374

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>

Upvotes: 0

Gabe
Gabe

Reputation: 50493

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');
 }

Upvotes: 1

Anoop
Anoop

Reputation: 993

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

Upvotes: 0

Related Questions