1 Attachment(s)
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! :):)
Re: Login Form using javascript
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.
Re: Login Form using javascript
Quote:
Originally Posted by
the_cat
Hi
Thanks for the comment, unfortunately i tried but nothing works. still the same.
Let me know asap
Re: Login Form using javascript
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.
Re: Login Form using javascript
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
Re: Login Form using javascript
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.
Re: Login Form using javascript
Hi
Do you have a full code?
Re: Login Form using javascript
The "full code", as you so quaintly put it, is in comment #4: http://forums.codeguru.com/showthrea...43#post2228643
1 Attachment(s)
Re: Login Form using javascript
Attachment 35501
Hi
I see a yellow highlight, do you mean is this the error?
Let me know
1 Attachment(s)
Re: Login Form using javascript
Yes it's an error, because you've not closed the code block.
Attachment 35503
1 Attachment(s)
Re: Login Form using javascript
Quote:
Originally Posted by
the_cat
Hi
I follow everything still the same the yellow still on error see attached
Attachment 35505
Re: Login Form using javascript
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.
1 Attachment(s)
Re: Login Form using javascript
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
Re: Login Form using javascript
Can't open the file on my phone. Can you paste the code in a reply using code tags?
Re: Login Form using javascript
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>