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>
Related
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>
I'm making a login/register webpage and would like to alternate between both when you either click on Register or Login anchors. To do so I'm using Jquery and I cannot figure out the reason why it doesn't run the function. I have organised the login and register with the <div id="register" or id="login". The goal is to use the class called collapsed to not display one of the two. If you need any more info that I have forgotten to add please comment.
$(document).ready(function() {
$("div #register").addClass('collapsed');
$('#form a').click(function(event) {
event.preventDefault();
$(event.target).parent().parent().parent().addClass('collapsed');
$(event.target).parent().parent().parent().siblings().removeClass('collapsed');
document.title = $(event.target).attr('id');
});
});
.collapsed {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form">
<div id="register" class="">
<h2>Register</h2>
<form action="login_register.php" method="post">
<span>Have an account? <a id="Login" class="change" href="#login" >Login</a></span><br>
<div id="half-left" class="textbox">
<input type="text" placeholder="First Name" name="firstname" required autocomplete="off">
</div>
<div id="half-right" class="textbox">
<input type="text" placeholder="Last Name" name="lastname" required autocomplete="off">
</div>
<div class="textbox">
<input type="text" placeholder="Email" name="email" required autocomplete="off">
</div>
<div class="textbox">
<input type="password" placeholder="Password" name="password" required autocomplete="off">
</div>
</form>
</div>
<div id="login" class="">
<h2>Login</h2>
<form action="login_register.php" method="post">
<span>Don't have an account? <a id="Register" class="change" href="#register" >Register</a></span><br>
<div class="textbox">
<input type="text" placeholder="Email" name="email" required autocomplete="off">
</div>
<div class="textbox">
<input type="password" placeholder="Password" name="password" required autocomplete="off">
</div>
<span class="password">Forgot password?</span>
</form>
</div>
</div>
Needed an older version of Jquery for it to work on Dreamweaver.
The code worked fine.
Here is an older version that should work: jQuery actions (in general) not working -Dreamweaver
try this code
$(document).ready(function() {
$("#register").hide();
$('#form a').click(function(event) {
event.preventDefault();
let id = $(this).attr("id");
if (id === "Login"){
$("#login").show();
$("#register").hide();
}
else if(id === "Register"){
$("#login").hide();
$("#register").show();
}
document.title = $(this).attr('id');
});
});
You likely have to use proper HTML format, ie; proper use of <HTML> and <head> etc as Dreamweaver can be pretty particular.
So try change it to something like;
$(document).ready(function() {
$("div #register").addClass('collapsed');
$('#form a').click(function(event) {
event.preventDefault();
$(event.target).parent().parent().parent().addClass('collapsed');
$(event.target).parent().parent().parent().siblings().removeClass('collapsed');
document.title = $(event.target).attr('id');
});
});
.collapsed { display: none; }
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="form">
<div id="register" class="">
<h2>Register</h2>
<form action="login_register.php" method="post">
<span>Have an account? <a id="Login" class="change" href="#login" >Login</a></span><br>
<div id="half-left" class="textbox">
<input type="text" placeholder="First Name" name="firstname" required autocomplete="off">
</div>
<div id="half-right" class="textbox">
<input type="text" placeholder="Last Name" name="lastname" required autocomplete="off">
</div>
<div class="textbox">
<input type="text" placeholder="Email" name="email" required autocomplete="off">
</div>
<div class="textbox">
<input type="password" placeholder="Password" name="password" required autocomplete="off">
</div>
</form>
</div>
<div id="login" class="">
<h2>Login</h2>
<form action="login_register.php" method="post">
<span>Don't have an account? <a id="Register" class="change" href="#register" >Register</a></span><br>
<div class="textbox">
<input type="text" placeholder="Email" name="email" required autocomplete="off">
</div>
<div class="textbox">
<input type="password" placeholder="Password" name="password" required autocomplete="off">
</div>
<span class="password">Forgot password?</span>
</form>
</div>
</div>
</body>
</html>
Dreamweaver can be VERY particular about proper coding and formatting etc.
<!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/
When i include the CodeIgniter library on my website
I have this :
SEE THE PROBLEM HERE
A blank after the body tag
This is caused by the recaptcha library , because when i have removed it , the blank have disappeared
Need some help ;)
My code :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Razal</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<META NAME="description" CONTENT="Serveur privé Dofus 1.29.1">
<META NAME="author" CONTENT="Ichiga">
<link href="https://www.razal.eu/style/css/style_v13.css" rel="stylesheet" type="text/css" />
<link href="https://www.razal.eu/style/css/pure-min.css" rel="stylesheet" type="text/css" />
<script language="javascript">
<!--
if (top.location!= self.location)
{
top.location = self.location.href
}
function ToogleMobileMenu()
{
document.getElementById("div-left").classList.toggle('div-left-open');
}
function UpdateMinViewIpad()
{
var viewportmeta = document.querySelector('meta[name="viewport"]');
if(window.innerHeight > window.innerWidth) {viewportmeta.content = 'width=device-width';}
else{viewportmeta.content = 'width=device-height';}
}
// BUG orientation portrait/lanscape IOS //
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i))
{
UpdateMinViewIpad();
document.addEventListener('orientationchange', function ()
{
UpdateMinViewIpad();
}, false);
}
//-->
</script>
</head>
<body>
<div class="div-header">
<div class="div-header-content">
</div>
<div class="div-bar-menu">
<div class="div-menu">
<img src="https://www.razal.eu/style/img/menu_separator.png">
Accueil
<img src="https://www.razal.eu/style/img/menu_separator.png">
Rejoindre Razal
<img src="https://www.razal.eu/style/img/menu_separator.png">
Classements
<img src="https://www.razal.eu/style/img/menu_separator.png">
Forum
<img src="https://www.razal.eu/style/img/menu_separator.png">
<a onclick="alert('à venir')" href="#">Vidéos</a>
<img src="https://www.razal.eu/style/img/menu_separator.png">
</div>
</div>
</div>
<div class="div-content">
<div id="div-left" class="div-left">
<div class="div-floater-menu" onclick="ToogleMobileMenu();">
<img src="images/floatter-menu.png" alt="menu">
</div>
<div class="div-box">
<button class="pure-button pure-button-active" style="width:100%;" id="vote">Créer un compte</button>
</div>
<div class="div-box">
<legend>Connexion</legend>
<hr>
<form action="https://www.razal.eu/utilisateur/connexion" method="post" accept-charset="utf-8">
<div class="pure-form pure-form-stacked">
<fieldset>
<label for="username">Nom de compte</label>
<div class="pure-u-3-2">
<input class="pure-u-1" id="username" type="text" name="username" placeholder="Nom de compte">
</div>
<label for="password">Mot de passe</label>
<div class="pure-u-3-2">
<input class="pure-u-1" id="password" type="password" name="password" placeholder="Mot de passe">
</div>
<button type="submit" class="pure-button pure-button-primary">se connecter</button>
</fieldset>
</div>
</form>
</div>
<div class="div-box">
<legend>Voter</legend>
<img style="width:100%" src="https://www.razal.eu/style/img/rpg.png">
</div>
</div>
<div class="div-page">
<div class="div-box">
<h2>Formulaire d'inscription</h2>
<hr class="hrtitle" />
<div class="pure-u-1-4">
</div>
<div class="pure-u-1-3">
<form action="https://www.razal.eu/utilisateur/inscription" method="post" accept-charset="utf-8">
<div class="pure-form pure-form-stacked">
<fieldset>
<label for="username">Nom de compte</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="username" name="username" type="text">
<label for="email">Adresse e-mail</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="email" name="email" type="email">
<label for="nickname">Pseudo</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="nickname" name="nickname" type="text">
<label for="password">Mot de passe</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="password" name="password" type="password">
<label for="password">Confirmation MDP</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="password" name="passwordconfirm" type="password" >
<p><div class="g-recaptcha" data-sitekey="6LfDgB0TAAAAANw_dSy0Pd-ezJMRTko_UHmpcm6R"></div>
<script src="https://www.google.com/recaptcha/api.js?hl=fr" async defer></script></p>
<button type="submit" class="pure-button pure-button-primary">S'inscrire</button>
</fieldset>
</div>
</form>
</div>
</div>
<br>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
entity looks like a result of including files saved in UTF-8 with BOM.
I suggest to check for files encoding, maybe if you are working with different conflicting formats.
<html>
<body>
<link rel="stylesheet" type="text/css" href="css.css"
<form action="RegnDisplay.php" method="post" class="registration_form">
<fieldset>
<legend>Registration Form </legend>
<p>Personal Information </p>
<div class="elements">
<label for="name">Name :</label>
<input type="text" id="name" name="name" size="25" />
</div>
<div class="elements">
<label for="e-mail">E-mail :</label>
<input type="text" id="e-mail" name="e-mail" size="25" />
</div>
<p>Security Information </p>
<div class="elements">
<label for="Password">Password:</label>
<input type="password" id="Password" name="Password" size="25" />
</div>
<div class="elements">
<label for="Password">Confirm Password:</label>
<input type="password" id="Password_Confirm" name="Password_Confirm" size="25" />
</div>
<div class="submit">
<input type="hidden" name="formsubmitted" value="TRUE" />
<input type="submit" value="Register" />
</div>
</fieldset>
</form>
</body>
</html>
This is a basic form, trying to post user submitted values to a processing page, however my page is just blinking and not performing the action. Any help would be appreciated.
On line 3:
<link rel="stylesheet" type="text/css" href="css.css"
Should be:
<link rel="stylesheet" type="text/css" href="css.css"/>