Issue adding javascript to a form using addEventListener

Question

I have a form:

 <form method="post" name="Form1" action="default.asp" onsubmit="return processField();">

    <input type="hidden" name="hiddentext1">


    <input type="text" name="text1">
    <input type="submit" value="Submit" id="button1">
</form>

And what I want is to call ProcessField function on the submit of the form. I know that ProcessField function works fine - tested it using an inline call. But now I want to attach the event via JavaScript. Below is my JavaScript code:

<script type="text/javascript">
if (window.addEventListener){
        window.addEventListener('load', attachFormSubmit, false);
} else if (window.attachEvent){
        window.attachEvent('onload', attachFormSubmit );
}

function attachFormSubmit(){
    theForm = document.getElementById("Form1");
    alert("attaching form submit");
    if (theForm.addEventListener){          
            theForm.addEventListener('submit', CleanUpEID, false);
        } else if (theForm.attachEvent){            
            theForm.attachEvent('onsubmit', CleanUpEID);
        }

}

function ProcessField()
{
    alert("processing field");

    if (this.text1.value == '') 
    {
        alert ("Please enter the value")
        this.text1.focus()
        return false
    }

    this.hiddentext1.value = this.text1.value;

    // Disable button
    with ($('button1')) {
        value = "Processing ...";
        disabled = true;
    }


    return true;    
}   

</script>

I have two issues with the above script:

it attaches the event to the form multiple times - every time page reloads. I suspect there is a better place for my code but cannot figure it out.
Keyword "this" in processField function comes up undefined. It works fine if I replace "this" with form name, but I was wondering what needs to be done in order for keyword "this" to work in this case.

I'd really appreciate if someone could point me in the right direction. Thanks.

Is action="default.asp" on a IIS-server? – kometen Jan 13 '16 at 19:50 — kometen, Jan 13 '16 at 19:50

score 1 · Answer 1 · edited Sep 16 '21 at 13:26

EDIT

OP had a series of questions that involve some fundamental concepts of JavaScript. I have provided some links that will hopefully answer those questions. See the end of this post.

Rewrote the code to demonstrate it actually works with a test server. With the syntax errors, you'd never get it working. The biggest error is you call processField() but you define a function called ProcessField(), JavaScript is case-sensitive.

In order to function for your purposes, you'll have to change the form's action of course. I had to validate it's input for a min of 5 and a max of 15 alphanumerics due to the test server's limits, so you'll want to change that as well probably.

it attaches the event to the form multiple times - every time page reloads. I suspect there is a better place for my code but cannot figure it out

You are adding/attaching the eventListener/Handler to the window which makes your submit event global, plus you didn't provision any way to prevent default behavior, so any form and form elements that by default are triggered by a submit event will popup on the event chain. I added the eventListener to the form and then used stopPropagation(); to prevent any unintentional triggering during the bubbling phase.

Keyword "this" in processField function comes up undefined. It works fine if I replace "this" with form name, but I was wondering what needs to be done in order for keywrod "this" to work in this case.

See explanation above concerning the typo of processField.*

Btw, I didn't bother adding the cross-browser crap attachEvent because IE8 is dead, and that 1% of the world can use IE9. If you want to cater to that 1% just apply attachEvent as you did in your code.

http://glpjt.s3.amazonaws.com/so/34775593.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>34775593</title>
</head>

<body>


    <form method="post" id="Form1" name="Form1" action="http://www.hashemian.com/tools/form-post-tester.php/so_post">

        <input type="hidden" id="hiddentext1" name="hiddentext1">


        <input type="text" name="text1" id="text1" placeholder="Submit 5 to 15 alphanumerics">
        <input type="submit" value="Submit" id="button1">
    </form>
    <p>Once post is submited, server's response is returned with value of #hiddentext1 and #text1</p>
    <div class="serverData">
        <a href="http://www.hashemian.com/tools/form-post-tester.php/data.php/so_post">Server-side Results</a>
    </div>

    <script>
        var form = document.getElementById('Form1');
        var htxt = document.getElementById('hiddentext1');
        var btn = document.getElementById('button1');

        form.addEventListener('submit', processField, false);

        function processField(e) {

            var txt = document.getElementById('text1');
            var str = txt.value;
            var alnum = str.length;
            alert("processing field");

            if (alnum < 5 || alnum > 15) {
                alert("Please enter a value of 5 to 15 alphanumeric values ");
                txt.focus();
                return false;
            }

            htxt.value = str;

            // Disable button
            this.setAttribute('disabled', true);
            this.value = "Processing ...";

            e.stopPropagation();
        }
    </script>
</body>

</html>

References

just FYI, the type has nothing to do with it, since it was only a type when I was typing the code into stackexchange, on my actual page the is no typo — Coding Duchess, Jan 14 '16 at 14:15
Oh, and I was not going to down vote your answer in any case:) Quite the contrary — Coding Duchess, Jan 14 '16 at 14:16
Btw, your code won't work because form.addEventListener('submit', processField, false); gets called before window loads — Coding Duchess, Jan 14 '16 at 15:01
On the contrary, it works here: http://glpjt.s3.amazonaws.com/so/34775593.html anything loading before the [window load event is not only possible but desired](http://stackoverflow.com/a/588048/2813224). — zer00ne, Jan 14 '16 at 16:13
*just FYI, the type has nothing to do with it, since it was only a type when I was typing the code into stackexchange, on my actual page the is no typo* That's great, but it's not my responsibility to ensure that you type accurately nor could I have the knowledge of the real source in question. I can only go by what you provide. When I post a question or answer, I go over it at least once if not twice over again for any typos, grammatical, and even syntactical errors (at least the ones I'm capable of recognizing myself). . — zer00ne, Jan 14 '16 at 16:26
what happens with your code is document.getEelementById returning null because elements on the page are not loaded yet — Coding Duchess, Jan 14 '16 at 16:43
Ok, first off let's establish **ONE** thing first: review http://glpjt.s3.amazonaws.com/so/34775593.html Please verify that it indeed functions. — zer00ne, Jan 14 '16 at 18:43

Issue adding javascript to a form using addEventListener

1 Answers1

EDIT

References