Login Form Javascript

Question

I can't get this to work. Not sure what I'm doing wrong? I'm still very new to this, as most of my free time for coding goes into other languages.

I guess you can figure out what I'm trying to do. Browser should open a new page if the login is correct, and open an alert otherwise..

At this point I'm only still typing because my question is still mostly code.. But thanks in advance for any answers.

    <script type="text/javascript">
        function visitPage(){
            window.location.href = 'www.ynottfamily.com/na_sol.htm';
        }
        function checkform(){
            var myForm = "admin";
                var val = $("value").val();
                    if (val=="p123"){
                        visitPage();
                    }
                    else {
                        alert("Invalid Login");
                    }
    </script>
    <form name="admin" onsubmit="checkform()">
      <p><input type="password" name="passwordI" value="" placeholder="Password"></p>
      <p class="submit"><input type="submit" name="commit" value="Login"></p>
    </form>

Still wanting me to give more details... But I don't know what more there is to say really...

How did the hipster burn his tongue? He drank his coffee before it was cool.

Ok that did it.

Did you check your console? You might have missed to close `checkform()` function. Might be other stuff as well — Mr. Alien, Mar 22 '17 at 05:16
I guess this is just a test thing? You don't really want to check the password on the client side :) — Jochen Bedersdorfer, Mar 22 '17 at 05:17
If you don't have a `return false` after the alert, you'll just submit the to page — A. L, Mar 22 '17 at 05:24
your selector is wrong, if the element is an ID it should be `$("#value").val();` or if it is a class `$(".value").val();` — Luthando Ntsekwa, Mar 22 '17 at 05:46
Not a test exactly, but a personal learning project, with no details that are important outside of the website. The site is a 'family' or 'guild' page I guess, which will be used by 150-200 people in 4 subfamilies. The login is for the 4 leaders of those families to update their own news sections. — TheJack, Mar 22 '17 at 16:32

Shahid Rafiq · Accepted Answer · 2017-03-22T06:13:25.093

Your HTML should look like this after adding jquery and giving an id of input variable:

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> 
<form name="admin">
  <p><input type="password" name="passwordI" id="passwordI" value="" placeholder="Password"></p>
  <p class="submit"><input type="button" onClick="checkform()" name="commit" value="Login"></p>
</form>

Your jquery script will become like this after minor changes: 1. one bracket was missing. 2. you need to add http to redirect to other page.

function visitPage(){
        window.location.href = 'http://www.ynottfamily.com/na_sol.htm';
    }
    function checkform(){
        var myForm = "admin";
            var value_var = $("#passwordI").val();
                if (value_var=="p123"){
                    visitPage();
                }
                else {
                    alert("Invalid Login");
                }
                }

Here is a working example

score 0 · Answer 2 · edited May 23 '17 at 12:32

Assuming that you have jQuery referenced in your page you will need to update your code to something like this:

<form name="admin" onsubmit="checkform();">
  <p><input type="password" name="passwordI" id="passwordI" value="" placeholder="Password"></p>
  <p class="submit"><input type="submit" name="commit" value="Login"></p>
</form>

<script type="text/javascript">
    function visitPage() {
        window.location.replace('www.ynottfamily.com/na_sol.htm');
    }

    function checkform() {
        var val = $("#passwordI").val();

        if (val == "p123"){
            visitPage();
        }
        else {
            alert("Invalid Login");
        }
    }
</script>

Note: window.location.replace() is better as it disposes of the current session.

score 0 · Answer 3 · answered Mar 22 '17 at 05:56

if you want to use pure Javascript u should edit like so: HTML:

<form name="admin" onsubmit="">
      <p><input type="password" id='passwordI' name="passwordI" value="" placeholder="Password"/></p>
      <p class="submit"><input type="submit" onclick="return checkform(); visitPage();" name="commit" value="Login"/></p>
    </form>

u need put id on input password.at form call return checkform. If true then it continue call visitPage(). If false nothing happen. on form. but on javascript it will alert wrong password. JAVASCRIPT

function visitPage(){
            window.location.href = 'www.ynottfamily.com/na_sol.htm';
        }
function checkform(){
  var result = false;
  var val =document.getElementById('passwordI').value;
  console.log('AA:' + val);
  if (val=="p123"){
    result = true;
  }else{
        alert('Invalid Password')
  }
  return result;
}

Login Form Javascript

3 Answers3