login form looking for help - please

Started by newbiedude77, 02-21-2012, 03:46:49

Previous topic - Next topic

newbiedude77Topic starter

   
Hello Im looking for help with my login form...So far I have coded that if I put in the correct password and username then I will getinto my site. I would like to have something whereby if I put in 3 failed attempts I get a message each time telling me how many attempts I have left and then no access.
After every failed attempt I want the textbox to clear aswel so i can enter in the next attempt......Thanks guys

All help would be very helpful...I have tried this for a few days now with success ......

here is my cose so far

<script language="javascript">

function passuser(form)
{
if (form.user.value=="tony" &&form.password.value=="hello")
{
window.alert("Hello tony")
location='http://www.google.com'

}
}
</script>
</head>

<body><center><br />



<form action="name" method="get">
<table width="300" height="200" border="1" cellpadding="5"cellspacing="5">
<tr>
<th colspan="2" scope="col"bgcolor="#6699FF"><center>LOGIN FORM</center></th>
</tr>
<tr>
<td width="120" align="center"> User Name</td>
<td width="140"><label>
<input type="text" name="user" id="user" />
</label></td>
</tr>
<tr>
<td align="center">Password</td>
<td><label>
<input type="password" name="password" id="password" />
</label></td>
</tr>
<tr>
<td align="center"><label>
<input type="reset" name="cmdClear" id="cmdClear" value="Reset" />
</label></td>
<td align="center"><label>
<input type="submit" name="enter" id="log" value="Login" onclick="passuser(this.form)" />
</label></td>
</tr>
</table>
</form>
</center>
</body>
  •  


Vinil

#1
after completing if{}put an else condition that will display some alerts when credentials are not correct


Based on your description, it seems like you want to add functionality to your login form to handle failed login attempts and display a message indicating the number of attempts left. You also want to clear the text fields after each failed attempt. Here's an updated version of your code that implements these features:

```html
<script language="javascript">
// Define a variable to keep track of the number of failed attempts
var attempts = 0;

function passuser(form) {
  if (form.user.value == "tony" && form.password.value == "hello") {
    window.alert("Hello tony");
    location = 'http://www.google.com';
  } else {
    // Increment the number of failed attempts
    attempts++;

    // Display the number of attempts remaining
    var attemptsRemaining = 3 - attempts;
    window.alert("Incorrect credentials. Attempts remaining: " + attemptsRemaining);

    // Clear the text fields
    form.user.value = "";
    form.password.value = "";

    // If there are no attempts remaining, disable the login button
    if (attemptsRemaining === 0) {
      document.getElementById("log").disabled = true;
    }
  }
}
</script>

<body>
  <center><br />
    <form action="name" method="get">
      <table width="300" height="200" border="1" cellpadding="5" cellspacing="5">
        <tr>
          <th colspan="2" scope="col" bgcolor="#6699FF">
            <center>LOGIN FORM</center>
          </th>
        </tr>
        <tr>
          <td width="120" align="center"> User Name</td>
          <td width="140">
            <label>
              <input type="text" name="user" id="user" />
            </label>
          </td>
        </tr>
        <tr>
          <td align="center">Password</td>
          <td>
            <label>
              <input type="password" name="password" id="password" />
            </label>
          </td>
        </tr>
        <tr>
          <td align="center">
            <label>
              <input type="reset" name="cmdClear" id="cmdClear" value="Reset" />
            </label>
          </td>
          <td align="center">
            <label>
              <input type="submit" name="enter" id="log" value="Login" onclick="passuser(this.form)" />
            </label>
          </td>
        </tr>
      </table>
    </form>
  </center>
</body>
```

In this code, I added a variable called "attempts" to keep track of the number of failed login attempts. Every time the user enters incorrect credentials, the "attempts" variable is incremented by one. I also display the number of attempts remaining to the user using a JavaScript alert box.

After every failed attempt, the code clears the text fields by setting their values to an empty string. If there are no more attempts remaining, the login button is disabled using the `disabled` attribute.

Please note that this code is only for demonstration purposes and may require further modifications based on your specific requirements and the technologies you are using.


newbiedude77Topic starter

Hi and thnks for your reply. I got the login form working ok but when I put a wrong password into the form my form page shuts down when viewing it on the net. The process works fine when testing it out on dreamweaver. any ideas? am i missing some code. All help would be great thank you. Here is my code now up to date:

<script language="javascript">
var counter = 2
function passuser(form)
{
if (form.user.value=="john" &&form.password.value=="hello")
{
window.alert("Hello there")
location='http://www.google.com'

}
  else if (counter <=0)
{
   window.alert("Access Denied")
   window.close()


}
else
{
window.alert("Username or Password is incorrect - You have " +counter+ " tries left")
     counter = counter - 1
return false;
  }
}






</script>
</head>

<body><center><br />


   
<form action="name" method="get">
  <table width="300" height="200" border="1" cellpadding="5"cellspacing="5">
    <tr>
      <th colspan="2"  scope="col"bgcolor="#6699FF"><center>LOGIN FORM</center></th>
    </tr>
    <tr>
      <td width="120" align="center"> User Name</td>
      <td width="140"><label>
        <input type="text" name="user" id="user" onFocus="this.value=''" value="" />
      </label></td>
    </tr>
    <tr>
      <td align="center">Password</td>
      <td><label>
        <input type="password" name="password" id="password" onFocus="this.value=''" value="" />
      </label></td>
    </tr>
    <tr>
      <td align="center"><label>
        <input type="reset" name="cmdClear" id="cmdClear" value="Reset" />
      </label></td>
      <td align="center"><label>
        <input type="submit" name="enter" id="log" value="Login" onclick="passuser(this.form)" />
      </label></td>
    </tr>
  </table>
</form>
</center>
</body>
  •  

Vinil

#3
hey I got the issue with the code.You did a mistake.Do modify the code with this line
<form action="form.html">

check your code it must be like above I wrote.I checked  manually you put form action ="name" which is wrong .In action ,we use to put the url of page where it will be redirected after the page will be submitted .replace your code with above mentioned one and you will be get the desired results


Post Merge: 02-21-2012, 21:48:10


also i strongly recommend you please visit w3schools for the syntax of programming code .you have mistaken in  few more lines and learn javascript from there
to open a new site the code must looks like window.open("http://www.google.com")

newbiedude77Topic starter

Ok thanks for your help ill take that advice  :)
  •  


Vinil

its ok .Feel free to contact me in case any issue in web development.i will definitely try to solve the issues