javascript function working only once

Question

I have been trying to use java script to validate a contact form. The idea is to add a paragraph tag above each textbox and when the submit button is clicked a javascript function should be fired. if the textbox is empty the "hidden" class will be removed from the class list of the paragraph so it will be visible The problem is that function is fired only once, the first time i click the button. but if I fill on textbox and click again the function is not fired. can any body help me about this? Note: if I use getElementById the function is not fired and the compiler goes to the server side function btnSubmit_Click but when using getElementByName the function is fired only once as described above.

        <div id="contactForm" runat="server">
            <div class="control-group form-group">
                <div class="controls">
                    <p id="errname" class="hidden">You must insert your <b>name</b></p>
                    <input type="text" runat="server" class="form-control" id="txtname" name="txtname" placeholder="*Full Name" >
                </div>
            </div>              
            <div class="control-group form-group">
                <div class="controls">
                    <p id="erremail" class="hidden">You must insert your <b>email</b></p>
                    <input type="email" runat="server" class="form-control" id="txtemail" name="txtemail" placeholder="*Email" >
                </div>
            </div>
            <div class="control-group form-group">
                <div class="controls">
                    <p id="errmessage" class="hidden">You must insert a <b>message</b></p>
                    <textarea runat="server" rows="10" cols="100" class="form-control" id="txtmessage" name="txtmessage" placeholder="*Message" maxlength="999" style="resize:none"></textarea>
                </div>
            </div>
            <asp:Button ID="btnSubmit" runat="server"  OnClientClick="return myfun();" OnClick="btnSubmit_Click"  Text="Send Message" class="btn btn-primary btn-block" />
        </div>

and the javascript function is:

    function myfun() {
        document.getElementById("errname").classList.add('hidden');
        document.getElementById("erremail").classList.add('hidden');
        document.getElementById("errmessage").classList.add('hidden');

        var flag = true;
        if (!document.getElementsById("txtname").value) {
            document.getElementById("errname").classList.remove('hidden');
            flag= false;
        }

        if (!document.getElementsById("txtemail").value) {
            document.getElementById("erremail").classList.remove('hidden');
            flag= false;
        }

        if (!document.getElementsById("txtmessage").value) {
            document.getElementById("errmessage").classList.remove('hidden');
            flag = false;
        }
        if (flag == false) { return false;}

    }
</script>

`document.getElementsByName` returns an `HTMLCollection`, so it has no `value` property. Your function _does_ run every time (try `console.log`), it’s just not correct. — Sebastian Simon, Nov 14 '17 at 14:29
Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Sebastian Simon, Nov 14 '17 at 14:29
i tried document.getElementById and it was not working also. if the function is running the second time I expect that the paragraph related to the filled textbox should be hidden — Heba, Nov 14 '17 at 14:35
What wasn’t working exactly? Please, [edit] your question and provide a [mcve]. Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. — Sebastian Simon, Nov 14 '17 at 14:37
I have edited the question and removed some code that is not related to the question. hope it is clearer now. also i have tried to use the browser console (dev tools) it doesn't show any errors it simply goes to the backend code — Heba, Nov 14 '17 at 14:58
when i tried the console.log i got the following error "Uncaught TypeError: Cannot read property 'value' of null at myfun" — Heba, Nov 14 '17 at 15:14
It’s `getElementById` without the `s`. Make sure that `myfun` is only called from that button click. If that button can be clicked, there should be no such errors, except if they come from somewhere else. — Sebastian Simon, Nov 14 '17 at 15:23
yes in my code it is without s, just when i edited the code her i replaced the Name by Id that's why the s exists. and yes myfun is called at he button nowhere else calls it. and yes the button can be clicked, that is how it goes to the backend code — Heba, Nov 14 '17 at 15:40

score 0 · Accepted Answer · answered Nov 14 '17 at 16:52

it is done by adding clientIdMode="static" to the textboxes that are called in the javascript function

                    <input type="text" runat="server" class="form-control" id="txtname" name="txtname" placeholder="*Full Name" clientIdMode="static">

score 0 · Answer 2 · answered Nov 14 '17 at 21:21

0

Your JS can never return true. You have:

if(flag == false) {return false;}

But you never tell it to return true. Instead of the line above, why not just:

return flag;

Since you are changing the value from true to false if there's an error, it'll return whatever the value of flag is.

answered Nov 14 '17 at 21:21

Taylor's Designs

57
8

the flag is returned to true at the beginning of the function – Heba Nov 14 '17 at 21:49

javascript function working only once

2 Answers2