CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: Login Form using javascript

  1. #1
    Join Date
    Feb 2019
    Posts
    10

    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)
    Name:  Code.jpg
Views: 214
Size:  30.1 KB

    Thanks for the help guys!

  2. #2
    Join Date
    Jun 2009
    Posts
    113

    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.

  3. #3
    Join Date
    Feb 2019
    Posts
    10

    Re: Login Form using javascript

    Quote Originally Posted by the_cat View Post
    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

  4. #4
    Join Date
    Jun 2009
    Posts
    113

    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.

  5. #5
    Join Date
    Feb 2019
    Posts
    10

    Re: Login Form using javascript

    Quote Originally Posted by the_cat View Post
    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

  6. #6
    Join Date
    Jun 2009
    Posts
    113

    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.

  7. #7
    Join Date
    Feb 2019
    Posts
    10

    Re: Login Form using javascript

    Hi

    Do you have a full code?

  8. #8
    Join Date
    Jun 2009
    Posts
    113

    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

  9. #9
    Join Date
    Feb 2019
    Posts
    10

    Re: Login Form using javascript

    Name:  screenshot.jpg
Views: 92
Size:  20.8 KB

    Hi

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

    Let me know

  10. #10
    Join Date
    Jun 2009
    Posts
    113

    Re: Login Form using javascript

    Yes it's an error, because you've not closed the code block.
    Name:  Capture.jpg
Views: 117
Size:  31.4 KB

  11. #11
    Join Date
    Feb 2019
    Posts
    10

    Re: Login Form using javascript

    Quote Originally Posted by the_cat View Post
    Yes it's an error, because you've not closed the code block.
    Name:  Capture.jpg
Views: 117
Size:  31.4 KB
    Hi

    I follow everything still the same the yellow still on error see attached
    Name:  screenshot.jpg
Views: 91
Size:  22.9 KB

  12. #12
    Join Date
    Jun 2009
    Posts
    113

    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.

  13. #13
    Join Date
    Feb 2019
    Posts
    10

    Re: Login Form using javascript

    Quote Originally Posted by the_cat View Post
    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
    Attached Files Attached Files

  14. #14
    Arjay's Avatar
    Arjay is offline Moderator / EX MS MVP Power Poster
    Join Date
    Aug 2004
    Posts
    13,399

    Re: Login Form using javascript

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

  15. #15
    Join Date
    Feb 2019
    Posts
    10

    Re: Login Form using javascript

    Quote Originally Posted by Arjay View Post
    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>

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Windows Mobile Development Center


Click Here to Expand Forum to Full Width




On-Demand Webinars (sponsored)