如何有效地实现这些 JavaScript 函数

Question

I've made a couple of JavaScript function and I'm looking for the best way to implement them into my web application.

The main Three functions are:

• Focus()

Focus does exactly what you think it will do, it gives focus to a textbox. This has a check build in that checks which textfield needs the focus. The function looks something like this:

function Focus(field) {
            if (Locatie.value == "" && Bonregel == ""){
                Locatie.focus();
            }
            else if (Locatie.value == "") {
                Locatie.focus
            }
            else if (Bonregel.value == "") {
                Bonregel.focus();
            }
        }

And I think that I need to call use that functions as soon as the page loads.

• Send()

Send does also do what you expect it do to, it sends (submits) the data from the form. And that functions looks something like this:

function Send(keycode, locatie, bonregel) {
            //Assign fields to variables
            Form_Keycode = document.getElementById("form_keycode");
            Form_Locatie = document.getElementById("form_locatie");
            Form_Bonregel = document.getElementById("form_bonregel");
            
            // Assign values to fields
            Form_Keycode.value = keycode;
            Form_Locatie.value = locatie;
            Form_Bonregel.value = bonregel;
            
            //submit data from myform 
            document.myform.submit();
        }

• Check

This is the last big function that needs to be included, Check checks if which key is pressed and then uses Send() to send the information. This looks something like this:

function Check() {
            // check alle data vooor verzenden
            // Keycode 13 -> ENTER
            // Keycode 125 -> Green key on device

            Locatie = document.getElementById("locatie").value;
            Bonregel = document.getElementById("bonregel").value;

            if (event.keyCode == 125) {
                Send(125, locatie, bonregel);
            }
            else if (event.keyCode == 13) {
                delay(Send(13,locatie,bonregel), "Send", 500);
            }
            else {
                Focus();
            }
        }

Now on to the question:

What would be the most efficient way to implement these functions into my html, and which methods should be used? my html looks like this:

<legend>Test</legend><br />
            <form name="myform" action="/" method="post">
                <input type="hidden" id="form_locatie" name="locatie" />
                <input type="hidden" id="form_bonregel" name="bonregel" />
                <input type="hidden" id="form_keycode" name="keycode"/>
            </form>
            <table>
                <tr>
                    <td>Locatie:</td>
                    <td><input type="text" id="locatie" onkeyup="CheckLocation()" value="{locatie}" /></td>
                </tr>
                <tr>
                    <td>Bonregel:</td>
                    <td><input type="text" id="bonregel" onkeyup="keyup(event)" /></td>
                </tr>
                <tr>
                    <td>Bonlijst:</td>
                    <td><textarea id="bonregelbox" readonly></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="Velden Legen" id="reset" onclick="ClearFields()" /></td>
                </tr>
            </table>

Answer 1

I would not use a different form for a function which requires javascript. I would wrap the table with a form element, add validation on event on the input fields onchange="check(this)" and keep it simple.

<form name="myform" action="/" method="post" onsubmit='return validate();'>
        <table>
            <tr>
                <td>Locatie:</td>
                <td><input type="text" id="locatie" onchange="check(this)" value="{locatie}" /></td>
            </tr>
            <tr>
                <td>Bonregel:</td>
                <td><input type="text" id="bonregel" onchange="check(this)" /></td>
            </tr>
            <tr>
                <td>Bonlijst:</td>
                <td><textarea id="bonregelbox" readonly></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="Velden Legen" id="reset" onclick="ClearFields()" /></td><!-- i do not understand this! -->
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit" /></td>
            </tr>
        </table>
        </form>

Answer 2

This avoid's unnecessary assignments of values and variable declarations

1) Focus(param1,param2)

function Focus(Locatie,Bonregel) {
            if (Locatie.value == "" && Bonregel.value  == ""){
                Locatie.focus();
            }
            else if (Locatie.value == "") {
                Locatie.focus
            }
            else if (Bonregel.value == "") {
                Bonregel.focus();
            }
        }

2) Send(param1,param2,param3)

function Send(keycode, locatie, bonregel) {
            //Assign value directly
            document.getElementById("form_keycode").value = keycode;
            document.getElementById("form_locatie").value=locatie;
            document.getElementById("form_bonregel").value=bonregel;
            //submit data from myform 
            document.myform.submit();
        }

3) Check()

function Check() {
            // check alle data vooor verzenden
            // Keycode 13 -> ENTER
            // Keycode 125 -> Green key on device
            if (event.keyCode == 125) {
                Send(125, document.getElementById("locatie").value, document.getElementById("bonregel").value);
            }
            else if (event.keyCode == 13) {
                delay(Send(13,document.getElementById("locatie").value,document.getElementById("bonregel").value), "Send", 500);
            }
            else {
                Focus(document.getElementById("locatie"),document.getElementById("bonregel"));
            }
        }