form open onclick button

form open onclick button - javascript

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";

Related

Mailto in a form tag not opening in Gmail app

<form action="mailto:info#gmail.com" method="post" enctype="text/plain" target="_blank">
<div class="first-column">
<div class="first-row">
<label>First Name</label>
<input type="text" name="First Name" id="Name" class="inp-1 input-con" placeholder="Enter your first name" />
<label> Email Id</label>
<input type="email" name="Email" id="Email" class="inp-2 input-con" placeholder="Enter your email id " />
</div>
<div class="second-row">
<label>Last Name</label>
<input type="text" name="Last Name" id="First Name" class="inp-3 input-con" placeholder="Enter your last name" />
<label>Mobile No.</label>
<input type="number" name="Mobile No." id="Mobile NO." class="inp-4 input-con" placeholder="Enter your mobile no." />
</div>
</div>
<div class="big-inp">
<label>Department</label>
<input type="text" name="department" id="department" class="inp-5 input-con" placeholder="Select department" />
</div>
<div class="last-row">
<div class="last-column">
<label>Date</label>
<input type="date" name="date" id="date" class="inp-6 input-con" />
</div>
<div class="last-column">
<label>Time</label>
<input type="time" name="Time" id="Time" class="inp-7 input-con" />
</div>
</div>
<div class="submit">
<button type="submit" class="submit-btn">
Submit <i class="fa-solid fa-arrow-up sub-arrow"></i>
</button>
</div>
</form>
When I am using mailto in an anchor tag it's opening in gmail but in form tag it's not opening in gmail . My gmail is default stiil it's not opening and it's only happening in my phone in other phones it's opening . When I click on it it redirects me and then in chrome it shows that url -
mailto:info#gmail.com?body=First%20Name%3D%0D%0AEmail%3D%0D%0ALast%20Name%3D%0D%0AMobile%20No.%3D%0D%0Adepartment%3D%0D%0Adate%3D%0D%0ATime%3D%0D%0A%0D%0A
Chrome just stuck there and nothing opens . Someone help me . I don't know how to fix it

Is there a way to get your JQuery validation to populate onto the document?

For one of my classes we're using JQuery validation. I'm trying to get the answers to populate next to the corresponding text on the bottom that's listed (name, age, date,etc..) on the document below after the user inputs the info in the text box.
<script>
$(document).ready(function() {
$("#input").validate();
$("#input").submit(function(e) {
e.preventDefault(); //Prevents from submitting (which is the default action)
if (!$("#input").valid()) {
return false;
} else {
$("#result").append($("#name").val() + "<br>" + "Your name is");
}
});
});
</script>
<body>
<p><b>Fill out all the fields below and click submit</b></p>
<div>
<label for="name" class="label">Enter your name</label>
<input type="text" name="name" id="name" class="required" title="Please enter your name"> </div><br>
<div>
<label for="thedate" class="label">Enter today's date</label>
<input type="text" name="thedate" id="thedate" class="required date"></div><br>
<div>
<label for="theage" class="label">Enter your age</label>
<input type="text" name="theage" id="theage" class="required digits"></div><br>
<div>
<label for="theurl" class="label">Enter your web site</label>
<input type="text" name="theurl" id="theurl" class="required url"></div><br>
<div>
<label for="theemail" class="label">Enter your email</label>
<input type="text" name="theemail" id="theemail" class="required email"></div><br>
<div>
<input type='submit' value='Submit' name="submit" id='submitme'></div><br>
</form>
<p id="result"></p>
<p><b>Name:</b></p><br>
<p><b>Date: </b></p><br>
<p><b>Age:</b> </p><br>
<p><b>Website: </b></p><br>
<p><b>Email:</b></p><br>
</body>
</html>

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>

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

Hide pop-up when click somewhere

I have two div's, and inside this two div's i have <a href> that invoce javascript function.
My problem is, when i click somewhere outside my form should hide that hide, for the second div..this is working, but for the first isnt.
HTML that have javascript to invoce:
<div id="joinUs">
<a href="javascript:hideshow(document.getElementById('joinusLogin'))">
Join us!
</div>
<div id="invite">
<a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
<img src="/www/assets/newImages/header/Invite.png"></img>
</div>
HTML that have div's that is going to be invoced:
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
Here's my Javascript function:
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
Can anyone help me solve this problem?

the simplest way to do that
add event to the body on click hide all pop-ups
$('body').click(function(){
$('your-pop-up').hide();
});
then add stopPropagation() to this pop-ups to prevent hide when click inside it.
$('your-pop-up').click(function(e){
e.stopPropagation();
});
Now if you press any where outside your pop-ups thy will hide

Try to Use Color Box Plugin from Link
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Pop Up</title>
<style>
#joinUs{cursor:pointer; color:#0066CC}
#invite{cursor:pointer; color:#0066CC}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$("#joinUs").colorbox({inline:true, width:"50%", href:"#joinusLogin"});
$("#invite").colorbox({inline:true, width:"50%", href:"#inviteNowSignup"});
});
</script>
</head>
<body>
<div id="joinUs">Join us!</div>
<div id="invite">Invite Now</div>
<div style='display:none'>
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
</div>
<div style='display:none'>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
</div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

form open onclick button - javascript

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";

Related

Mailto in a form tag not opening in Gmail app

Is there a way to get your JQuery validation to populate onto the document?

How to allow all character types into an input

JS form validate is getting stuck after incorrect input

Hide pop-up when click somewhere

Categories

Resources