CODEWITHSUNDEEP
javascripthtmlcheckboxtextfield
Paul Williams
Paul Williams

Reputation: 1598

onKeyDown event not firing

I made a form that contains a checkbox and a small input field. I have made a script to do two things:

What is NOT working: * When a user types into the text field, the checkbox doesn't immediately (normally 2 keys are typed separately ) appear even though the logic says that when invokes, if the checkbox is unchecked, check it. * When a user clears the text area, using backspace/delete/etc., the checkbox remains.

What is working:

Here is the related coding being run on JSFiddle

function autocheck(ElementName, SectionName) {
//window.alert('keyword-' + SectionName + '-' + ElementName.toLowerCase());
    if (document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked == false)
    {
        document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked = true
    } 

    if (document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value == '')
    {
        document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked = false;
    }
}

function autofill(ElementName, SectionName) {
    ElementName=ElementName.replace(" ", "-"); 
    //window.alert('You got this: ' + ElementName);

    if(document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked == true)
    {
        document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value = document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).value;
    } else {
        document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value = '';
    }
}

And here is the related HTML

    <input type="checkbox" name="ufs_split_keywords[]" value="Throw" id="keyword-split-throw" onclick="autofill(this.value, 'split');"> <label for="keyword-split-throw">Throw</label>
    <br>
    <input type="text" name="ufs_split_keywords_entry[]" id="keyword-split-entry-throw" style="width:100px; float: right;" onkeydown="autocheck('throw', 'split');">

Upvotes: 2

Views: 2215

Answers (1)

L. Monty
L. Monty

Reputation: 882

Use onkeyup instead of onkeydown!
Since you will only then get the changed value of the field.

At the timepoint of keydown-event the value of the input will be the old one / unchanged.

Keep the basic lifecyle of keypress on inputs in mind:

  1. keydown-event bubbling
  2. applying keyevent on input (mostly writing in it or deleting from it)
    can also be applied multiple times when the user holds the key
  3. keyup-event bubbling


This fiddle works for me perfectly. (Your code with only onkeydown changed to onkeyup)

  <!DOCTYPE html>
    <html>
        <head>
              <script type="text/javascript">
                        function autocheck(ElementName, SectionName) {
                    //window.alert('keyword-' + SectionName + '-' + ElementName.toLowerCase());
                        if (document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked == false)
                        {
                            document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked = true
                        } 

                        if (document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value == '')
                        {
                            document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked = false;
                        }
                    }

                    function autofill(ElementName, SectionName) {
                        ElementName=ElementName.replace(" ", "-"); 
                        //window.alert('You got this: ' + ElementName);

                        if(document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).checked == true)
                        {
                            document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value = document.getElementById('keyword-' + SectionName + '-' + ElementName.toLowerCase()).value;
                        } else {
                            document.getElementById('keyword-' + SectionName + '-entry-' + ElementName.toLowerCase()).value = '';
                        }
                    }
              </script>

        </head>
        <body>
            <input type="checkbox" name="ufs_split_keywords[]" value="Throw" id="keyword-split-throw" onclick="autofill(this.value, 'split');"> <label for="keyword-split-throw">Throw</label>
            <br>
            <input type="text" name="ufs_split_keywords_entry[]" id="keyword-split-entry-throw" style="width:100px; float: right;" onkeyup="autocheck('throw', 'split');"> 
        </body>

    </html>

Upvotes: 4

Related Questions