I was doing a form using HTML and i found that when I'm using my submit button it is showing my local C drive
It doesn't submit my form
CODE:
<div class="container">
<form id="form" action="/">
<h1>Registration</h1>
<div class="input-control">
<label for="username">Username</label>
<input id="username" name="username" type="text">
<div class="error"> </div>
</div>
<div class="input-control">
<label for="username">Email</label>
<input id="email" name="username" type="text">
<div class="error"> </div>
</div>
<div class="input-control">
<label for="Message">Message </label>
<input id="Message" name="username" type="text">
<div class="error"> </div>
<button type="submit">Sign up</button>
</form>
In your <form> tag you have used an attribute action='/' which is opened when you click submit button. That is in case of a file the index or your drive default address. If you change it to:
<form id="form" action="#">
it will not redirect to default address.
Here you can use this logic :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form onsubmit="sub(event)">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">save</button>
</form>
<script>
async function sub(ev) {
// prevents refresh
ev.preventDefault();
console.log(ev.target.username.value);
console.log(ev.target.password.value);
}
</script>
</body>
</html>
Related
Everything was working fine before, but it stopped working after a while. When I press the button to sign up, it opens up a blank page with a blank box, unlike before, when it had the actual stuff it was supposed to have. I have here the images, please help me. Thanks in advance!
enter image description here
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Winit - Login/Sign Up</title>
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="stylesheet" href="./src/main.css">
<link rel="icon" href="https://lh3.googleusercontent.com/proxy/7ytbxkmMme0IPSvsHZN9ZFd19oIZ9lqtq_402Z1UbIr0-1yMU_OoIbwaJsZ3x3ZEoQtZTJ4lR9hHLxSQibKiacHqfNyEEKdNunHv4J9hohCTtNlqO0yfb2rYGQhxl1M"
</head>
<body>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
function SubForm(){
$.ajax({
url:'https://api.apispreadsheets.com/data/20789/',
type:'post',
data:$("#createAccount").serializeArray(),
success: function(){
alert("Form Data Submitted :)")
},
error: function(){
alert("There was an error :(")
}
});
}
</script>
<div class="container">
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__message form__message--error">Incorrect Username/Password Combination</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
<div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
Forgot your password?
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<form class="form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form_input" input name="username" class="form__input" autofocus placeholder="Username">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" input name="email" autofocus placeholder="Email Address">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" input name="password" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password">
<div class="form__input-error-message"></div>
</div>
<label>
<button onclick="SubForm()" <button class="form__button" type="submit">Continue</button>
<p class="form__text">
<a class="form__link" href="./" id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
</div>
<script src="./src/main.js"></script>
</body>
I have developed a "change password" form where the user shall enter the current password, new password and repeat the new password. The form itself is easy to create, but I haven't found a way to prevent the browser to suggest the internally stored password. I have used the attribute autocomplete="new-password" (without it the stored password is automatically inserted in the password input).
But the browser still suggest the stored password. Can this be solved?
See image below for user "test" (Swedish Firefox browser):
The code is showed below:
<html class="" lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Change password</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body class="">
<div class="container">
<form class="" action="changepwd.php" method="POST" autocomplete="off">
<h3>Change password</h3>
<p class="">Enter old and new password below</p>
<div class="form-group">
<label for="current_pwd">Current password:</label>
<input class="form-control" id="current_pwd" name="current_pwd" type="password" autocomplete="new-password">
</div>
<div class="form-group">
<label for="new_pwd">New password:</label>
<input class="form-control" id="new_pwd" name="new_pwd" type="password" autocomplete="off">
</div>
<div class="form-group">
<label for="repeat_pwd">Repeat password:</label>
<input class="form-control" id="repeat_pwd" name="repeat_pwd" type="password" autocomplete="off">
</div>
<div class="text-center py-3">
<button type="submit" name="submit" class="btn btn-submit btn-primary">Update password</button>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/styles.css">
<title>Contact Us</title>
</head>
<body>
<form action="MAILTO: xyz#gmail.com" method="post" enctype="text/plain"></form>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<div class="contact-form">
<div class="input-fields">
<input type="text" class="input" placeholder="Name" required>
<input type="text" class="input" placeholder="Email Address" required>
<input type="text" class="input" placeholder="Phone" required>
<input type="text" class="input" placeholder="Subject" required>
</div>
<div class="msg">
<textarea placeholder="Message"></textarea>
<button type="submit">Send</button>
<!-- <div class="btn">send</div> -->
</div>
</div>
</div>
</form>
</body>
</html>
Hi! I am trying to make a contact form but i am not able to receive the Email send by the form....actually it never sends the data...what can i do? I want to receive the data on my gmail when the user clicks the send Button.
There is a closing tag at the end of the line where you start your form.
<form action="MAILTO: xyz#gmail.com" method="post" enctype="text/plain">
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<div class="contact-form">
<div class="input-fields">
<input type="text" class="input" placeholder="Name" required>
<input type="text" class="input" placeholder="Email Address" required>
<input type="text" class="input" placeholder="Phone" required>
<input type="text" class="input" placeholder="Subject" required>
</div>
<div class="msg">
<textarea placeholder="Message"></textarea>
<button type="submit">Send</button>
<!-- <div class="btn">send</div> -->
</div>
</div>
</div>
</form>
Try the above instead.
On top of this - all this code will do is open a client on your computer for the user to then send an email direct. It won't submit a message direct to the user from the browser. If you wish to do that, you will have to use back-end code. I suggest Node.js and Nodemailer. Here's a good link explaining that:
https://blog.mailtrap.io/nodemailer-gmail/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sign Up</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="sign-up-form">
<style>
body {
background-image: url("background.jpg");
}
</style>
<img src="./assets/user-Icon.png" alt="User Icon" />
<h1>Sign Up Now</h1>
<form action="/" method="GET">
<input
type="email"
class="input-box"
placeholder="Your E-Mail"
required
/>
<input
type="password"
class="input-box"
placeholder="Your password"
required
/>
<p>
<span
><input type="checkbox" name="Terms and Conditions" id="T&C"
/></span>
I agee to the Terms and Conditions
</p>
<a href="./home.html"
><button type="button" class="signup-btn">Sign Up</button></a
>
<!-- <hr>
<p class="or">OR</p>
<button type="button" class="twitter-btn">Log In with Twitter</button>
<p>Do you have an account Sign In</p> -->
</form>
</div>
</body>
</html>
I am trying to create a sign up form but on clicking the sign up button it redirects me to the
home page even when the fields are empty...I tried using the required tag but it is not working too. Please help!
You have placed the submit button inside a link (<a href="...">). This link takes precedence over the button, when the user clicks in that area.
The button would not submit the form, either. For this it needs a type of submit:
<button type="submit">Sign Up</button>
Because you wraped your button in a link that redirect you to a different page,, you should use <input type='submit' value='submit btn' /> to submit your form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="sign-up-form">
<style>
body {
background-image: url('background.jpg');
}
</style>
<img src="./assets/user-Icon.png" alt="User Icon">
<h1>Sign Up Now</h1>
<form action="/" method="GET">
<input type="email" class="input-box" placeholder="Your E-Mail" required/>
<input type="password" class="input-box" placeholder="Your password" required/>
<p><span><input type="checkbox" name="Terms and Conditions" id="T&C"></span> I agee to the Terms and Conditions</p>
home link
<input type="submit" class="signup-btn" value='Sign Up' />
<!-- <hr>
<p class="or">OR</p>
<button type="button" class="twitter-btn">Log In with Twitter</button>
<p>Do you have an account Sign In</p> -->
</form>
</div>
</body>
</html>
I am creating a login form for my java app. But I can't get it to submit. I can't find any errors in my form.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Log in</title>
</head>
<body>
<div id="container">
<div id="top">
<h1>Please complete the form below</h1>
</div>
<div id="leftSide">
<fieldset>
<legend>Login details</legend>
<form action="login.jsp" method="get" class="form">
<label for="username">Username</label>
<div class="div_texbox">
<input name="username" type="text" class="username" id="username" value="username" />
</div>
<label for="password">Password</label>
<div class="div_texbox">
<input name="password" type="password" class="password" id="password" value="password" />
</div>
<div class="button_div">
<input name="submit" type="button" value="Submit" class="buttons" />
</div>
</form>
</fieldset>
</div>
</div>
</body>
</html>
There are some from other parts of page.
change this:
<input name="submit" type="button" value="Submit" class="buttons" />
to this:
<input name="submit" type="submit" value="Submit" class="buttons" />
Submit button type should be submit.
change the input type from button to Submit in this line and you should be able to submit
<input name="submit" type="button" value="Submit" class="buttons" />
your code is normal, if you can't submit it take a look to your "login.jsp".
also you can use
<form action="login.jsp" method="post" class="form">
and change:
type="botton"
to
type="submit"