I've been trying around for a bit and starting to lose my patience. Why doesn't this work? It meant for an easy school project and that's why it doesn't have to be secure at all, just functional.
I've been awake for almost 24hrs and im sure that it's part of the reason why i cant get it to work :)
<form>
<div class="form-group">
<label for="inputUsername">Användarnamn</label>
<input name="username" type="text" class="form-control" placeholder="Ange användarnamn">
</div>
<div class="form-group">
<label for="inputPassword">Lösenord</label>
<input name="password" type="password" class="form-control" placeholder="Ange lösenord">
</div>
<div class="loginButton">
<button type="submit" class="btn btn-primary" onclick="login(this.form);">Logga In</button>
</div>
</form>
<script>
function login(form){
if(form.username.value == "test") && (form.password.value == "test"){
self.location.href = "medlemmar.html";
}
else{
alert("Felaktigt användarnamn eller lösenord");
return false;
}
}
</script>
You are now submitting a form without an action defined for the form, so probably, it is just refreshing the page.
So one way to solve this would be by changing the type of the button:
<button type="button" class="btn btn-primary" onclick="login(this.form);">Logga In</button>
Furthermore you have an error with the parenthesis in your if statement:
if((form.username.value == "test") && (form.password.value == "test")){
If you fix that, it should work as desired:
function login(form){
if((form.username.value == "test") && (form.password.value == "test")){
self.location.href = "medlemmar.html";
}
else{
alert("Felaktigt användarnamn eller lösenord");
return false;
}
}
<form>
<div class="form-group">
<label for="inputUsername">Användarnamn</label>
<input name="username" type="text" class="form-control" placeholder="Ange användarnamn">
</div>
<div class="form-group">
<label for="inputPassword">Lösenord</label>
<input name="password" type="password" class="form-control" placeholder="Ange lösenord">
</div>
<div class="loginButton">
<button type="button" class="btn btn-primary" onclick="login(this.form);">Logga In</button>
</div>
</form>
enter code here
<html>
<head>
<script type="text/javascript">
var n = prompt("Enter your number here", "type your number here");
n = parselnt(n);
if (NaN(n))
{alert("plese enter number");}
else if (n==0)
alert{("The number is zero");}
else if (n%2)
{alert("the number is odd");}
else
{alert("the number is even");}
</script>
</head>
</body><body>
</html>
122
<html>
<head>
<title>Login Page</title>
</head>
<script language="javascript">
function checke(form)
{
if (form.user.value== "Admin" && form.psrd.value=="Admin")
{
alert("login is sucesfull")
}
else
{
alert("Invalid user id")
}
}
</script>
<body>
<table height="10" width="10" border="1px">
<tr>
<td>
<input type="text" name="user">
</td>
<td>
<input type="password" maxlength="8" name="psrd" >
</td>
</tr>
<table>
</body>
</html>
Try changing the button type to button instead of submit.
I did not try it but i guess that your form always does a submit without getting to a evaluate your login-function. Changing the type will prevent that.
Another way would be to maintain the submit type and call preventDefault() function to avoid that behavior.
Related
I've written a validator for my HTML although I'm not sure where I'm going wrong.
What I'm trying to do below is determine if there is any text in the "First Name" box altogether. There is underlying css to the code but I believe my issue is surrounding my onsubmit and validate function as nothing in the javascript seems to be running once I click the submit button.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NewPatientForm</title>
<link rel="stylesheet" type="text/css" href="NewPatient.css">
<script>
function validate() {
var invalid = false;
if(!document.Firstname.value.length) {
invalid = true;
}
if(invalid) {
document.getElementById("form-error").style.display = "inline-block";
return false; //to make the text appear
}
return true;
}
</script>
</head>
<body>
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate();">
<div class="form-element">
<p id="form-error">All fields are required</p>
</div>
<div>
<label for="Firstname">First Name
<input type="text" name="Firstname" placeholder="First Name" id="Firstname">
</label>
</div>
<div>
<input type="submit" name="submit-button" value="Submit">
</div>
</form>
</body>
</html>
Looks like the culprit was your attempt to access Firstname on the document object.
I replaced it with the more standard document.getElementById() method and its working.
Some reading on this: Do DOM tree elements with ids become global variables?
function validate() {
var invalid = false;
if(!document.getElementById('Firstname').value.length) {
invalid = true;
}
if(invalid) {
document.getElementById("form-error").style.display = "inline-block";
return false;
}
return true;
}
#form-error {
display: none;
}
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate()">
<div class="form-element">
<p id="form-error">All fields are required</p>
</div>
<div>
<label for="Firstname">First Name
<input type="text" name="Firstname" placeholder="First Name" id="Firstname">
</label>
</div>
<div>
<input type="submit" name="submit-button" value="Submit">
</div>
</form>
There are a couple of typos, and I'll suggest something else as well. First, a fix or three in the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NewPatientForm</title>
<script>
function validate() {
const invalid = document.getElementById("Firstname").value.length == 0;
if(invalid) {
document.getElementById("form-error").style.display = "inline-block";
return false; //to make the text appear
}
return true;
}
</script>
</head>
<body>
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate();">
<div class="form-element">
<p id="form-error">All fields are required</p>
</div>
<div>
<label for="Firstname">First Name
<input type="text" name="Firstname" placeholder="First Name" id="Firstname">
</label>
</div>
<div>
<input type="submit" name="submit-button" value="Submit">
</div>
</form>
</body>
</html>
My suggestion is that you also look into built-in HTML form validation attributes. I'm thinking you're reinventing the wheel for things like requiring a non-empty Firstname. Why not this instead of JavaScript?
<input type="text" name="Firstname" id="Firstname" placeholder="First Name" required />
And many others, like minlength="", min="", step="", etc.
Plus there's still a JavaScript hook into the validation system with .checkValidity() so you can let the built-in validation do the heavy lifting, and then throw in more of your own custom aspects too.
I am trying to create a utility that will check if our site is down. The only way to do that is to login and if nothing is returned then the site is down. I've gotten it to the point where it will auto login, but not sure how to get it to check if the login was successful. Anyone got an idea?
<HTML>
<HEAD>
<TITLE>test Login</TITLE>
<script>
function loginForm() {
document.myform.action = "http://example.com";
document.myform.submit();
}
</script>
</HEAD>
<BODY onLoad="loginForm()">
<form action="http://example.com" class="uni-form" method="post" name="_58_fm">
<input name="_58_redirect" type="hidden" value="">
<input id="_58_rememberMe" name="_58_rememberMe" type="hidden" value="false">
<fieldset class="block-labels"> <div class="ctrl-holder">
<label for="_58_login">Email Address</label>
<input name="_58_login" type="text" value="emailaccount#email.com">
</div><div class="ctrl-holder"> <label for="_58_password">Password</label>
<input id="_58_password" name="_58_password" type="password" value="UberSecretPassword">
<span id="_58_passwordCapsLockSpan" style="display: none;">Caps Lock is on.</span>
</div><div class="button-holder">
<input id="submit" type="submit" value="Sign In">
</div></fieldset>
</FORM>
<script>
window.onload = function () {
document.getElementById('submit').click();
}
function checker(){
if(<-- what to put here --> =" You are signed in as "){
// Not sure what to put here
}
}
</script>
</BODY>
</HTML>
I have written the following form in my html file.
<form name = "myForm" method="post" action="" id="comment_form" class="comment_form" onsubmit="return validateForm()" >{% csrf_token %}
<div class="row-fluid">
<div class="span6">
<input type="text" id="email" name="email" placeholder="Email*">
</div>
<div class="span6">
<input type="text" id="name" name="name" placeholder="Name*">
</div>
</div>
<div class="row-fluid">
<div class="span8">
<textarea name="message" id="txt_message" placeholder="Message*" cols="30" rows="10"></textarea>
</div>
<div class="span4">
<button class="btn " type="button"><i class="li_paperplane"></i>Send message</button>
</div>
</div>
</form>
And I have added this javascript function inside my HTML file
<script>function validateForm()
{
var x=document.forms["myForm"]["name"].value;
var y=document.forms["myForm"]["email"].value;
var a=document.forms["myForm"]["message"].value;
var atpos=y.indexOf("#");
var dotpos=y.lastIndexOf(".");
if (x==null || x=="" ||y==null||y==""||a==""||a==null)
{
alert("All fields must be filled out");
return false;}
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length)
{
alert("Please enter a valid e-mail address");
return false;
}
else{
alert("Thank you for your response");
return true;
}
}</script>
On click of Send Message button I am not getting any response from the javascript. The code looks fine and the same code is working on another HTML file. What seems to be the problem?
Your "Send Message" button is just a button -- it doesn't submit the form. You can either use an <input type="submit"> or use JavaScript on your <button> to submit the form.
You need to add an onclick event to your button. Add the following attribute to the button
Syntax:
onclick="document.NameOfTheForm.submit();"
So in this syntax you have to add following
onclick="document.myForm.submit();"
When no value is provided to the roll input field an alert is produced by the empty() function but this empty value is still passed to retrive.php. So how can I stop this from happening and only pass the value to retrive.php when some input value is provided?
<html>
<head>
<title>STUDENT FORM</title>
<script type="text/javascript">
function empty()
{
var x;
x = document.getElementById("roll-input").value;
if (x == "")
{
alert("Enter a Valid Roll Number");
};
}
</script>
</head>
<body >
<h1 align="center">student details</h1>
<div id="input">
<form action='retrive.php' method='get'>
<fieldset>
<legend>Get Details</legend>
<dl>
<dt><label for="roll-input">Enter Roll Number</label></dt>
<dd><input type="text" name="roll" id="roll-input"><dd>
<input type="submit" value="submit" onClick="empty()" />
</dl>
</fieldset>
</form>
</div>
</body>
</html>
You need to return false to cancel the submit.
function empty() {
var x;
x = document.getElementById("roll-input").value;
if (x == "") {
alert("Enter a Valid Roll Number");
return false;
};
}
and
<input type="submit" value="submit" onClick="return empty()" />
jsFiddle example
How about using the required attribute?
<input id="Name" name="Name" class="form-control" placeholder="Enter name" type="text" required/>
Only works in html5 though.
The easiest way is to add attribute "required" into the input tag
<input type="text" name="name" required>
<form method="post" name="loginForm" id ="loginForm" action="login.php">
<input type="text" name="uid" id="uid" />
<input type="password" name="pass" id="pass" />
<input type="submit" class="button" value="Log In"/>
<script type="text/javascript">
$('#loginForm').submit(function()
{
if ($.trim($("#uid").val()) === "" || $.trim($("#pass").val()) === "") {
alert('Please enter Username and Password.');
return false;
}
});
</script>
</form>
i use with this I thinking it's maybe can help
$(function () {
$('form').submit(function () {
if ($('input').val() === "") {
alert('Please enter Username and Password.');
return false;
}
});
})
or work with class or ID like this
$('.inputClass')
$('#inputID')
If you want to save code you can simply do:
<input type="text" name="roll" id="roll-input">
<input type="submit" value="submit" onClick="return document.getElementById('roll-input').value !=''"/>
I just say.
I'm trying to make a password field for a webpage. So far I have:
<form name="PasswordField" action="">
Password:
<input type="password" name="password">
<input type="button" value="Log in">
</form>
Pathetic I know. It doesn't have to be fancy, I just need it to "get" the password from the textbox and match it against the password for the page. I'm assuming I can use an if-else?
*Code for get password from textbox when the "Log in" button is pressed here*
if (password = "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
Sadly I've been fooling with this for hours. I tried functions, too, and that didn't seem to work (for me) either.
If you go that route, you need to put the validation inside a function that gets called in the onclick event of your button. Also to access the password <input node in js, you can give it an id and use document.getElementById(id). Also, = is an assignment operator. Use == for comparison :)
<head>
<script type="text/javascript">
function isValid(){
var password = document.getElementById('password').value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>
<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid();">
</form>
Or an even easier way would be to pass the password DOM node as an argument to the function:
<head>
<script type="text/javascript">
function isValid(myNode){
var password = myNode.value;
if (password == "rawr")
{alert('Correct!')}
else
{alert('Wrong Password')}
}
</script>
</head>
<form name="PasswordField" action="">
Password:
<input type="password" id="password" name="password">
<input type="button" value="Log in" onclick="isValid(this);">
</form>
Is this what you are looking for?
document.forms['PasswordField'].elements['password'].value
I used jquery and here's my solution:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[name='login']").click(function() {
var s = $("input[name='password']").val();
if(s == "rawr") {alert('Correct!')}
else {alert('Wrong Password')}
});
});
</script>
</head>
<body>
<form name="PasswordField" action="">
Password:<input type="password" name="password">
<input type="button" value="Log in" name="login">
</form>
</body>
</html>