How can I implement these JavaScript functions efficiently

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>

I'd give your function more specific/other names. Now they are very confusing. They look like actual JS inherent functions. — Bram Vanroy
– Bram Vanroy, Commented Jun 17, 2015 at 6:42
@NinaScholz Yes, the Form is on top of the html, this so i can use key events like skip to another textbox when i press on enther or something like that — Collin
– Collin, Commented Jun 17, 2015 at 6:47

Nina Scholz · Accepted Answer · 2015-06-17 06:58:50Z

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>

edited Jun 17, 2015 at 6:58

answered Jun 17, 2015 at 6:52

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Collin Over a year ago

Do you maybe have a example, because i dont completly understand you

ANR Upgraded Version · Accepted Answer · 2015-06-17 07:30:39Z

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

Collectives™ on Stack Overflow

How can I implement these JavaScript functions efficiently

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related