Login Form using javascript

Hi to all experts

I was making a login form using javascript code.

When you hit enter key on the keyboard the form is working on submit.

The problem is when i use a mouse to click the "submit button" it does not work.

Hope this make sense to everybody.

Where do i miss?:(

Here's the live preview of the site on the top right you can see the login.
https://www.remoteally.com/

And here's my code (See attached image)
Attachment 35495

Thanks for the help guys! :):)

Try moving your <script> block after your HTML elements so the page has already loaded before you assign your script events. Secondly don't use jQuery .bind as it has been deprecated https://api.jquery.com/bind/#bind-ev...ntData-handler ; use .on instead.

Quote:

---

Originally Posted by the_cat

Try moving your <script> block after your HTML elements so the page has already loaded before you assign your script events. Secondly don't use jQuery .bind as it has been deprecated https://api.jquery.com/bind/#bind-ev...ntData-handler ; use .on instead.

---

Hi

Thanks for the comment, unfortunately i tried but nothing works. still the same.

Let me know asap

I think it's require which is causing the problem. Try using the Developer tools within your browser (CTRL + SHIFT + I) and go to Console and type in:

Code:

---

$('#submitImage').on('click',function(){alert("Click!")});

---

Then click on it; it should work fine (at least it did for me once I'd added the ID='submitImage' to the element). So try moving your jQuery into a code block which attaches the events to the elements once the page has loaded:

Code:

---

require(["jquery", "utility"], function ($, MO) {
        $(function() {
                $("#username").on("focus", function () {
                        $("#username").parent().removeClass("error");
                });
                $("#submitImage").on("click", function (event) {
                        var prefix = "http://";
                        var suffix = "-remoteally.viewnetcam.com:40040";
                        var myURL = prefix + $("#username").val() + suffix;
                        if (!MO.isBlank($("#username").val())) {
                                window.location.href = myURL;
                        }
                        else {
                                $("#username").parent().addClass("error");
                        }
                });
        });
});

---

The other useful thing to do with the Developer tools active is find the code where there are problems and add a breakpoint so you can (a) see that the click is being activated, and (b) see what happens during the course of the event.

Quote:

---

Originally Posted by the_cat

I think it's require which is causing the problem. Try using the Developer tools within your browser (CTRL + SHIFT + I) and go to Console and type in:

Code:

---

$('#submitImage').on('click',function(){alert("Click!")});

---

Then click on it; it should work fine (at least it did for me once I'd added the ID='submitImage' to the element). So try moving your jQuery into a code block which attaches the events to the elements once the page has loaded:

Code:

---

require(["jquery", "utility"], function ($, MO) {
        $(function() {
                $("#username").on("focus", function () {
                        $("#username").parent().removeClass("error");
                });
                $("#submitImage").on("click", function (event) {
                        var prefix = "http://";
                        var suffix = "-remoteally.viewnetcam.com:40040";
                        var myURL = prefix + $("#username").val() + suffix;
                        if (!MO.isBlank($("#username").val())) {
                                window.location.href = myURL;
                        }
                        else {
                                $("#username").parent().addClass("error");
                        }
                });
        });
});

---

The other useful thing to do with the Developer tools active is find the code where there are problems and add a breakpoint so you can (a) see that the click is being activated, and (b) see what happens during the course of the event.

---

Hi

Thanks for this do you have a clear explanation? you said moving the jquery block?

Let me know

You're calling "require" and then attaching the event handlers:

Code:

---

require(["jquery", "utility"], function ($, MO) {
                $("#username").on("focus", function () {
                        $("#username").parent().removeClass("error");
                });
// etc.
});

---

So put those event handlers for username and submitImage INSIDE a jQuery on document load call, i.e.

Code:

---

require(["jquery", "utility"], function ($, MO) {
        $(function() {    // <--- new bit
                $("#username").on("focus", function () {
                        $("#username").parent().removeClass("error");
                });
// etc.
        });    // <--- end of new bit
});

---

That way it will run after the document has been loaded and the event handlers will attach correctly.

Hi

Do you have a full code?

The "full code", as you so quaintly put it, is in comment #4: http://forums.codeguru.com/showthrea...43#post2228643

Attachment 35501

Hi

I see a yellow highlight, do you mean is this the error?

Let me know

Yes it's an error, because you've not closed the code block.
Attachment 35503

Quote:

---

Originally Posted by the_cat

Yes it's an error, because you've not closed the code block.
Attachment 35503

---

Hi

I follow everything still the same the yellow still on error see attached
Attachment 35505

Would you please post your code as that image is too low a resolution to read. I suspect you have simply not closed code brackets and / or braces but I can't really see.
When posting please put (omit the spaces)
[ c o d e ]
before the code, and (again omit the spaces)
[ / c o d e ]
after it so it appears as highlighted code.

Quote:

---

Originally Posted by the_cat

Would you please post your code as that image is too low a resolution to read. I suspect you have simply not closed code brackets and / or braces but I can't really see.
When posting please put (omit the spaces)
[ c o d e ]
before the code, and (again omit the spaces)
[ / c o d e ]
after it so it appears as highlighted code.

---

Hi

I attached the code on a text document.


Let me know

Can't open the file on my phone. Can you paste the code in a reply using code tags?

Quote:

---

Originally Posted by Arjay

Can't open the file on my phone. Can you paste the code in a reply using code tags?

---

1. This is the script.

Code:

---

<script language="JavaScript" type="text/JavaScript">
  function getURL() {
                var prefix="http://";
                var suffix="-remoteally.viewnetcam.com:40040"
                var myURL = prefix + document.myform.username.value + suffix;
                window.location.href = myURL;
        }
        require(["jquery", "utility"], function ($, MO) {
        $(function() {
                $("#username").on("focus", function () {
                        $("#username").parent().removeClass("error");
                });
                $("#submitImage").on("click", function (event) {
                        var prefix = "http://";
                        var suffix = "-remoteally.viewnetcam.com:40040";
                        var myURL = prefix + $("#username").val() + suffix;
                        if (!MO.isBlank($("#username").val())) {
                                window.location.href = myURL;
                        }
                        else {
                                $("#username").parent().addClass("error");
                        }
                });
        });
});
 </script>

---

Hi

2. And this is the form code see attached

Apart from the line:

Code:

---

var suffix="-remoteally.viewnetcam.com:40040";

---

in the getURL() function missing a semi-colon at the end, I can't see any syntactic error in what you've done. I'm not familiar with require so cannot advise there as to when you can call jQuery document loaded functions.
You can just go back to basics, and add an "onClick" event handler to your "Press Enter" button, like this:

Code:

---

<button onClick="validateLogin()" type="button">Press Enter</button>

---

And then add a script block afterwards which does exactly the same thing as your jQuery based code, so create a function e.g. validateLogin() which does exactly the same thing - reads the text input field and concatenates it with your URL, checking for "blankness":

Code:

---

function validateLogin(){
        var prefix = "http://";
        var suffix = "-remoteally.viewnetcam.com:40040";
        var username = document.getElementById("username");
        var myURL = prefix + username.value + suffix;
        if (username.value.replace(/ /g,'')!=='') {
                window.location.href = myURL;
        }
        else {
                username.parentElement.setAttribute("class","error");
        }
}

---

Here's a JSFiddle which put this altogether with your CSS: https://jsfiddle.net/sz63vp2g/

Quote:

---

Originally Posted by the_cat

Apart from the line:

Code:

---

var suffix="-remoteally.viewnetcam.com:40040";

---

in the getURL() function missing a semi-colon at the end, I can't see any syntactic error in what you've done. I'm not familiar with require so cannot advise there as to when you can call jQuery document loaded functions.
You can just go back to basics, and add an "onClick" event handler to your "Press Enter" button, like this:

Code:

---

<button onClick="validateLogin()" type="button">Press Enter</button>

---

And then add a script block afterwards which does exactly the same thing as your jQuery based code, so create a function e.g. validateLogin() which does exactly the same thing - reads the text input field and concatenates it with your URL, checking for "blankness":

Code:

---

function validateLogin(){
        var prefix = "http://";
        var suffix = "-remoteally.viewnetcam.com:40040";
        var username = document.getElementById("username");
        var myURL = prefix + username.value + suffix;
        if (username.value.replace(/ /g,'')!=='') {
                window.location.href = myURL;
        }
        else {
                username.parentElement.setAttribute("class","error");
        }
}

---

Here's a JSFiddle which put this altogether with your CSS: https://jsfiddle.net/sz63vp2g/

---

Hi

A Big thanks to you :)

This is working now, i can now use the mouse to click instead of pressing the enter key. on my keyboard :)

Thanks

Thank you for the examples.

Thanks for the samples