What is the vanilla JavaScript equivalent of this jquery snippet of code

What is the vanilla JavaScript equivalent of this jquery snippet of code - javascript

The code is meant to toggle a form between register and login. Want to write it in plain javascript.
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
html Code
<div class="form">
<form class="register-form">
<input type="text" placeholder="first name" />
<input type="text" placeholder="last name" />
<input type="password" placeholder="password" />
<input type="text" placeholder="email address" />
<input type="text" placeholder="mobile number" />
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
Js for now
const formToggle = document.querySelector('.message a');
I expect the forms to be swapped when the form toggle is clicked

If you can do the transition with css, you could do something like:
var btn = document.querySelector('.btn');
var form = document.querySelector('.form');
btn.onclick = function() {
form.classList.toggle('closed');
}
form {
max-height: 300px;
opacity:1;
overflow:hidden;
transition: all 1s;
}
form.closed{
opacity:0;
max-height: 0px;
}
<form class="form">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
</form>
<button class="btn">click</button>

Related

Display message after form submit with javascript

I'd like to show the message what I type for submitting after clicking submit button with javascript.
I wonder I have to use alert or modal for it with javascript. I just want to use Javascript instead of JQuery or Ajax.
<body>
<form action="index.html" method="POST">
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" placeholder="First Name">
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" placeholder="Last Name">
<input type="Submit" value="Submit" />
</form>
</body>

You could do something like the following:
let form = document.getElementsByTagName("form")[0];
form.addEventListener("submit", (e) => {
e.preventDefault();
alert("Form Submitted!");
});
<form action="index.html" method="POST">
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" placeholder="First Name" />
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" placeholder="Last Name" />
<input type="Submit" value="Submit" />
</form>

I hope the following code will help.
let form = document.getElementById("form");
form.onsubmit = function(){
let inputs = Object.fromEntries([...form.children].filter(e=>e.localName=="input"&&e.placeholder).map(e=>[e.placeholder,e.value]));
for(key in inputs) alert(key+": "+inputs[key]);
}
<body>
<form id="form" action="index.html" method="POST"> <!--i've added an id -->
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" placeholder="First Name">
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" placeholder="Last Name">
<input type="Submit" value="Submit" />
</form>
</body>

How to allow all character types into an input

Im attempting to limit what the user can enter in each input... Everything is working as planned except the nothing() function:
I want this function to allow ALL characters to be entered into the inputs where onKeyDown="nothing();". For some reason the ones within the nothing() function follow the same layout as username (which is text and numbers only).
please help it will be much appreciated. Thanks for your time..
<?php
session_start();
?>
<html>
<head>
<title>Registration</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" onKeyDown="nothing()">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" onKeyDown="nothing()">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</form>
</body>
<footer>
<script>
function ValidateName() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateFname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateLname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateIGN() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function nothing() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z|^-,]/g, ''));
}) //IE
}
</script>
</footer>
</div>
</div>
</html>

Remove all onKeyDown="functionNameXXX();" from input tag.
The problem is you are registering event every time when input value changes.
I just modified your code and it worked well.
JS Code remove all html inline method and add two handlers one for username and second for other names nothing to do with password and email if you are not willing to validate them.
//for validating username
$('input[name="username"]').keyup( function (e,i) {
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) ;
//for validating fname, lname and IGN
$('.name').keyup(function (){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
});
HTML remove onkeydown from all input and added class in fname, lname and IGN fields
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" class="name" >
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" class="name"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" class="name">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" >
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" >
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" >
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</form>

First of all your pattern for nothing is wrong (will throw error) ,
you said it will accept all charcter , so just remove the keyDown event no need for the nothing function ...
function ValidateName() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) //IE
}
function ValidateFname() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
function ValidateLname() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
function ValidateIGN() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
/*
function nothing() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z][^-,]/g, ''));
}) //IE
}
*/
input {display:block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();">
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>

Wrong parts:
You can't use this when you are using html inline event listeners.
$('input') means every input, which will bind same events to every input, causing duplication every times when you input text.
What should you do:
Try not to use inline event listeners.
This is more like an advice, but it makes your code harder to read and harder to manage. Try to bind events from JS.
Again, $('input') means literally every input in document, which will prevent you from making separate filters. You should select elements with more specific selectors, such as $("input[name='username']"). You can see various selectors from here : https://www.w3schools.com/cssref/css_selectors.asp
This will be your code :
$("input[name='username']").on('input', function(){
$(this).val( $(this).val().replace(/[^0-9A-Za-z]/g, ''));
})
$("input[name='fname']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
$("input[name='lname']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
$("input[name='ingame']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
<html>
<head>
<title>Registration</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username">
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" name="fname">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" name="lname"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</div>
</form>
</body>
</html>

How to send alert using inputted text

I'm trying to create a simple sign in/sign up form that sends an alert to the user once they've hit the submit button. The alert will show the user all the info they have put in (name, email, password). When I run the app the alert comes up as "undefined".
Here's my code:
HTML:
<form>
<h2>Sign In</h2>
<label>User Name:</label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Password:</label>
<input type="password" placeholder="Enter Password" name="password" required>
<input type="submit" class="submit-button si-submit" value="Sign In">
<div id="remember"><input type="checkbox" checked="checked"><span>Remember me</span></div>
</form>
</div>
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
JS:
var userInfo = document.getElementById("name");
document.getElementById("myButton").addEventListener("click", function() {
alert(userInfo.value);
});

Your code seems to work...
var userName = document.getElementById("name"),
userEmail = document.getElementById("email"),
userPassword = document.getElementById("password");
document.getElementById("myButton").addEventListener("click", function() {
alert(userName.value);
alert(userEmail.value);
alert(userPassword.value);
});
<div class="sign-up">
<form>
<h2>Sign Up</h2>
<label>Name:</label>
<input type="text" placeholder="Enter your name" value="" id="name" required>
<label>Email:</label>
<input type="email" name="email" id="email" required placeholder="Enter a valid email address">
<label>Password:</label>
<input type="password" placeholder="Enter your password" name="password" id="password" required>
<input class="submit-button su-submit" type="submit" id="myButton">
</form>
</div>

JS form validate is getting stuck after incorrect input

I'm trying to implement form validation for a 'confirm password' field, but it's being extremely difficult. I've got an onsubmit="validate() attribute on my form, and that's calling the below JavaScript fine, but if I enter the incorrect details, there are two issues which I can't seem to fix:
a) The message doesn't appear unless I click 'Submit' again
b) When I rectify the confirm password box, it still displays the message
My code is below:
#{
ViewBag.Title = "Login or Register";
}
<div class="jumbotron">
<h2>Login or Register</h2>
</div>
<div class="row">
<div class="col-xs-6">
#using (Html.BeginForm("CheckLogin", "Account", FormMethod.Get))
{
<input type="text" class="form-control" name="username" required placeholder="Username..." />
<br />
<input type="password" class="form-control" name="password" required placeholder="Password..." />
<br />
<input type="submit" class="btn btn-primary" value="Login!" />
}
</div>
<div class="col-xs-6">
<form id="registerForm" onsubmit="return validate()" method="post" action="/Account/RegisterAccount">
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" name="firstname" tabindex="1" required placeholder="First Name..." />
<br />
<input id="password0" data-minlength="6" type="password" class="form-control" name="password" tabindex="3" min="6" required placeholder="Password..." />
</div>
<div class="col-xs-6">
<input type="text" class="form-control" name="lastname" tabindex="2" required placeholder="Last Name..." />
<br />
<input id="password1" data-match="#password0" type="password" class="form-control" name="password1" tabindex="4" required placeholder="Confirm Password..." />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<br />
<input type="text" style="width: 100%; max-width: 100% !important;" class="form-control" name="username" tabindex="5" required placeholder="Username..." />
<br />
<input type="email" style="width: 100%; max-width: 100% !important;" class="form-control" name="email" tabindex="6" required placeholder="Email..." />
</div>
</div>
<br />
<input id="registerButton" type="submit" class="btn btn-primary" value="Register!" />
</form>
</div>
</div>
<script>
function validate() {
debugger;
if ($('#password0').val() != $('#password1').val()) {
document.getElementById("password1").setCustomValidity("These passwords don't match!");
} else {
document.getElementById("password1").setCustomValidity("");
}
return document.getElementById('password1').checkValidity();
}
</script>
UPDATE:
I've just published the recent version, it's at roconnor.somee.com/oas

form open onclick button

I have a form. In which I have fields SCHOLARSHIP FORM, PAYMENT, REGISTRATION NO. and ADMIT CARD. If i click on SCHOLARSHIP FORM, its fieldset should be open. If I click PAYMENT, its fieldset should be replace existing and payment's fieldset should be open inplace of existing.
It is opening, but below old one. It is not replacing.
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Scholarship Form</li>
<li class="active">Payment</li>
<li class="active">Registration No.</li>
<li class="active">Admit Card</li>
</ul>
<!-- fieldsets -->
<fieldset id = "theform1" style="display:none">
<h2 class="fs-title">Scholarship Form</h2>
<h3 class="fs-subtitle">Fill Your Details</h3>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="pass" placeholder="Password" />
<input type="password" name="cpass" placeholder="Confirm Password" />
</fieldset>
<script type = "text/javascript">
function showForm1() {
document.getElementById("theform1").style.display = "block";
}
</script>
<fieldset id = "theform" style="display:none">
<h2 class="fs-title">Payment</h2>
<h3 class="fs-subtitle">Pay scholarship fee</h3>
<input type="text" name="twitter" placeholder="Twitter" />
<input type="text" name="facebook" placeholder="Facebook" />
<input type="text" name="gplus" placeholder="Google Plus" />
</fieldset>
<script type = "text/javascript">
function showForm() {
document.getElementById("theform").style.display = "block";
}
</script>
<fieldset>
<h2 class="fs-title">Registration Number</h2>
<h3 class="fs-subtitle">Download or Print your Registration Number</h3>
<input type="text" name="fname" placeholder="First Name" />
<input type="text" name="lname" placeholder="Last Name" />
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>
</fieldset>
<fieldset>
<h2 class="fs-title">Admit Card</h2>
<h3 class="fs-subtitle">Download or Print Your Admit Card</h3>
<input type="text" name="phone" placeholder="Phone" />
<textarea name="address" placeholder="Address"></textarea>
</fieldset>
</form>

Sounds like you need to hide any open form first.
function showForm1() {
document.getElementById("theform1").style.display = "block";
document.getElementById("theform").style.display = "none";
}
If you do this for both forms you should be all set.

You need to toggle the display to none when you show a section, to do that you need to add in the first javascript tag :
document.getElementById("theform").style.display = "none";
and in the second one :
document.getElementById("theform1").style.display = "none";

Develop Reference

JavaScript is the programming language of the Web.

What is the vanilla JavaScript equivalent of this jquery snippet of code - javascript

Related

Display message after form submit with javascript

How to allow all character types into an input

How to send alert using inputted text

JS form validate is getting stuck after incorrect input

form open onclick button

Categories

Resources