stackoom
  简体   繁体   中英

Why isn't my JavaScript Login not functioning correctly?

 原文  2017-10-24 15:15:32  3   1    javascript/ html/ login

Question

I have been trying to solve this for hours and i have no idea how to do it - I have given up.

Can someone please have a look at the code below and figure out what is wrong with it please?

The idea of the program is to allow users to enter their Username and Password and when successfully verified then they are redirected to a URL. I think it is the Javascript which is not working properly Here is the code:

 <html>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
  padding:0;
  margin:0;}

fieldset, img {border:0}

ol, ul, li {list-style:none}

:focus {outline:none}

body,
input,
textarea,
select {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #4c4c4c;
}

p {
  font-size: 12px;
  width: 150px;
  display: inline-block;
  margin-left: 18px;
}
h1 {
  font-size: 32px;
  font-weight: 300;
  color: #4c4c4c;
  text-align: center;
  padding-top: 10px;
  margin-bottom: 10px;
}

html{
  background-color: #ffffff;
}

.testbox {
  margin: 20px auto;
  width: 343px; 
  height: 464px; 
  -webkit-border-radius: 8px/7px; 
  -moz-border-radius: 8px/7px; 
  border-radius: 8px/7px; 
  background-color: #ebebeb; 
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
  box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
  border: solid 1px #cbc9c9;
}

input[type=radio] {
  visibility: hidden;
}

form{
  margin: 0 30px;
}

label.radio {
    cursor: pointer;
  text-indent: 35px;
  overflow: visible;
  display: inline-block;
  position: relative;
  margin-bottom: 15px;
}

label.radio:before {
  background: #3a57af;
  content:'';
  position: absolute;
  top:2px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

label.radio:after {
    opacity: 0;
    content: '';
    position: absolute;
    width: 0.5em;
    height: 0.25em;
    background: transparent;
    top: 7.5px;
    left: 4.5px;
    border: 3px solid #ffffff;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

input[type=radio]:checked + label:after {
    opacity: 1;
}

hr{
  color: #a9a9a9;
  opacity: 0.3;
}

input[type=text],input[type=password]{
  width: 200px; 
  height: 39px; 
  -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; 
  -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; 
  border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; 
  background-color: #fff; 
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  border: solid 1px #cbc9c9;
  margin-left: -5px;
  margin-top: 13px; 
  padding-left: 10px;
}

input[type=password]{
  margin-bottom: 25px;
}

#icon {
  display: inline-block;
  width: 30px;
  background-color: #3a57af;
  padding: 8px 0px 8px 15px;
  margin-left: 15px;
  -webkit-border-radius: 4px 0px 0px 4px; 
  -moz-border-radius: 4px 0px 0px 4px; 
  border-radius: 4px 0px 0px 4px;
  color: white;
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  border: solid 0px #cbc9c9;
}

.gender {
  margin-left: 30px;
  margin-bottom: 30px;
}

.accounttype{
  margin-left: 8px;
  margin-top: 20px;
}

a.button {
  font-size: 14px;
  font-weight: 600;
  color: white;
  padding: 6px 25px 0px 20px;
  margin: 10px 8px 20px 0px;
  display: inline-block;
  float: right;
  text-decoration: none;
  width: 50px; height: 27px; 
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
  background-color: #3a57af; 
  -webkit-box-shadow: 0 3px rgba(58,87,175,.75); 
  -moz-box-shadow: 0 3px rgba(58,87,175,.75); 
  box-shadow: 0 3px rgba(58,87,175,.75);
  transition: all 0.1s linear 0s; 
  top: 0px;
  position: relative;
}

a.button:hover {
  top: 3px;
  background-color:#2e458b;
  -webkit-box-shadow: none; 
  -moz-box-shadow: none; 
  box-shadow: none;

}

</style>
<body>
<div class="testbox">
  <h1>Login</h1>

  <form action="/">
      <hr>
    <div class="accounttype">
      <input type="radio" value="None" id="radioOne" name="account" checked/>
      <label for="radioOne" class="radio" chec>Student</label>
      <input type="radio" value="None" id="radioTwo" name="account" />
      <label for="radioTwo" class="radio">Teacher</label>
    </div>
  <hr>
  <label id="icon" for="name"><i class="icon-envelope "></i></label>
  <input type="text" name="userid" id="name" placeholder="Username / Email"/>

  <label id="icon" for="name"><i class="icon-user"></i></label>
  <input type="text" name="insid" id="ins" placeholder="Institution Code"/>

  <label id="icon" for="name"><i class="icon-shield"></i></label>
  <input type="password" name="pswrd" id="pass" placeholder="Password"/>

  <div class="gender">
    <input type="radio" value="None" id="male" name="gender" checked/>
    <label for="male" class="radio" chec>Primary</label>
    <input type="radio" value="None" id="female" name="gender" />
    <label for="female" class="radio">Secondary</label>
   </div> 
   <p>By clicking Login, you agree on our <a href="#">terms and condition</a>.</p>
   <a class="button"  onClick="check(this.form)">Login</a>
  </form>
  <script language="javascript">
function check(form)
{
 if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd")
  {
    window.open('www.google.com')/*opens the target page while Id & password matches*/
  } 
</script>
</body>
</html>

1 answers

solution1
 0  2017-10-24 15:34:24

Several issues.

  • You need to close the brace of the check function.
  • As mentioned by Teemu, a hyperlink doesn't have reference to the form, so you probably have to use a input type button or other input element. If you want to keep a hyperlink, use querySelector or some other method to grab the userid and password input fields.
  • The hyperlink might not work. Depending on how you host this site, you might want to add http:// in front of the link.

After changing those 3 things, the page works on my pc. If you plan to use this login for something serious, do find a better system. If you put the user names and passwords in the front end code, anyone can login as any user.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Why isn't my message box functioning? Inline-Javascript for Hidden Input Field Isn't functioning correctly Why isn't this if statement functioning? Why is my javascript not functioning? JS autoscrolling to bottom isn't functioning correctly JavaScript why the 'this' isn't binded correctly My JavaScript isn't generating HTML correctly Why isn't my date parsing correctly? My JavaScript Directory isn't linking to my HTML code correctly. Not sure why Javascript for form validation isn't functioning
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM