I'm currently having some issues with a Login-box. I'm using my own version with the logic behind a tutorial online. It all works fine right now. When I click my Login button, a JQuery trigger displays the window which has the class active assigned to it. And once the login box has appears, the user could click on register in the login box and a register window becomes active. I know i could be a bit hard to follow here but the question should be fairly easy. I want to press a new button next to LOGIN, that takes the user directly to REGISTER. For that I would need to set the active state to different forms depending on which button I press. I'm trying to make a js script that senses which link has been click and then sets the active state to that form. So the first Code is the links, right now both of them open the login box at the signin stage. But my goal is to get the second one to open the register stage. Is this possible? How can I set the active state to the right form in a click ?
Here is an jsFiddle
HTML
<li>Login</li>
<li>Register</li>
<div id="login-box" class="login-popup"></div>
<form class="register" >
<input type="text" name="login" placeholder="email">
<input type="password" name='password' placeholder="pass" required>
<input type="submit" name="submit" value="Reg">
login
</form>
<form class="signin active">
<input type="text" name="login" placeholder="email">
<input type="password" name='password' placeholder="pass" required>
<input type="submit" name="submit" value="Login">
Reg
</form>
Javascript
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#login-box'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
$linkform.bind('click', function(e) {
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400, function() {
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm = $form_wrapper.children('form.' + target);
//animate the wrapper
$form_wrapper.stop()
.animate({
height: $currentForm.data('height') + 'px'
}, 500, function() {
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
});
I re-read your question, I think I hear where you are having problems:
// NOTE: add id="signinForm" and id="registerForm" to your forms, I suggest this over class="signin" and class="register" as you'll only have one signin/register form throughout your app.
// rename rel="register" to id="register", why are you using rel? http://www.w3schools.com/TAGS/att_a_rel.asp
$("#signin").click(function() {
$("#registerForm").removeClass("active");
$("#signinForm").addClass("active");
});
$("#register").click(function() {
$("#signinForm").removeClass("active");
$("#registerForm").addClass("active");
});
To access and submit your form, create another click event to your submit buttons:
$("input[type=submit]").click(function() {
var form = $("form.active")[0];
form.submit();
});
why don't you use tabs?
<div id="tabs">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
<div id="tabs-1">
<form class="login" >
<input type="text" name="login" placeholder="email">
<input type="password" name='password' placeholder="pass" required>
<input type="submit" name="submit" value="Reg">
login
</form>
</div>
<div id="tabs-2">
<form class="register">
<input type="text" name="login" placeholder="email">
<input type="password" name='password' placeholder="pass" required>
<input type="submit" name="submit" value="Login">
Reg
</form>
</div>
</div>
JS:
$(function() {
$( "#tabs" ).tabs();
});
it should be pretty much easier and you get the desired behaviour.
Greetings,
Related
When I load a page, I need to show form for name, but when I click "submit" i need hide that form. How can i do that with javascript?
<div id="small-form">
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit" onclick="hideForm()">
</form>
</div>
In the hideForm() function set display:none style for the div small-form.
Like that:
var myFormDiv = document.getElementById("small-form");
myFormDiv.style.display = "none";
You cannot just hide the form if it submits to the server unless you either Ajax the form to the server or target an iframe or new tab
When the form submits, a new page is loaded. If it loads the same page, you can either hide it on the server or set an instruction in localStorage to tell the page to not show the form
I also strongly suggest you do NOT use onclick of a submit button but the submit event
document.getElementById("myForm").addEventListener("submit",function(e) {
e.preventDefault(); // if you want to NOT submit the form
document.getElementById("small-form").classList.add("hide");
// here you can ajax or do other stuff without submitting
})
.hide { display: none; }
<div id="small-form">
<form id="myForm">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit">
</form>
</div>
You can set the display style to none in the hideForm() function in javascript to hide the form.
But, because you are using a submit button on the form it will try to redirect when the submit button is pressed. A simple solution to this (if you don't want the form to actually be submitted) is to change the type of the input to button rather than submit.
function hideForm()
{
document.getElementById('small-form').style.display = 'none';
}
<div id="small-form">
<form >
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="button" value="Submit" onclick="hideForm();">
</form>
</div>
If you wish to permanently hide the form you can do something like this. Just set the display property of the form to none. This will hide the form but it will exist there in the HTML code.
function hideForm() {
event.preventDefault();
var myForm = document.getElementById("My-Form");
myForm.style.display = "none";
var name = document.getElementById("Name");
alert(name.value);
}
<div id="small-form">
<form id="My-Form">
<label for="fname">First name:</label><br>
<input id="Name" type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit" onclick="hideForm(event)">
</form>
</div>
Another way to achieve what you are trying to do is simply remove the form. You can do this by calling remove() function on the form. This permanently removes the form.
function hideForm(event) {
event.preventDefault();
var myForm = document.getElementById("My-Form");
var name = document.getElementById("Name");
alert(name.value);
myForm.remove();
}
<div id="small-form">
<form id="My-Form">
<label for="fname">First name:</label><br>
<input id="Name" type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit" onclick="hideForm(event)">
</form>
</div>
I'm trying to make a login page and have the following:
<div id="loginField">
<input id="username" type="text" name="user" required></input>
<input id="password" type="password" name="password" required></input>
<input id="submit" type="submit" name="submit" value="Login"></input>
</div>
I made sure that the username and password fields are required. When the login is successful (for this sake, let's just say that both fields are not empty) a login disappears and another view appears. Anyway, I checked to see if the login button is pressed with JQuery:
$(function(){
$('#submit').on('click', function(){
$('#loginField').hide();
$('#differentView').show();});
The problem is that when the login button is clicked, the required attributes gets ignore and the next view is shown. How do I make sure that the required attributes are not ignored when the login button is clicked?
A crude way of doing it...
<div id="loginField">
<input id="username" type="text" name="user" class="required">
<input id="password" type="password" name="password" class="required">
<input id="submit" type="submit" name="submit" value="Login">
</div>
$('#submit').on('click', function(e){
e.preventDefault();
var isReady = true;
$('.required').each(function(){
if (this.value === '') {
isReady = false;
return;
};
});
if (isReady) {
// submit form
};
});
You can use this library: Parsley. It is a javascript form validation library and it is very easy to use and you can customize it for your own means. Good luck!
Instead of handling onclick on button, you can put input fields into the form...
<form action="post" method="post" id="loginField">
<input id="username" type="text" name="user" required></input>
<input id="password" type="password" name="password" required></input>
<input id="submit" type="submit" name="submit" value="Login"></input>
</form>
... and in jQuery you can handle on submit action like this:
$(document).ready(function(){
$('#loginField').on('submit', function(event){
event.preventDefault();
var [username password] = $(this).serializeArray(),
username = username.value,
password = password.value;
/* some validations */
});
});
event.PreventDefault prevents browser from subbmiting so your page won't be refresh. serializeArray returns an array of objects (key-value) that's why you have to use .value
The required attributes are ignored because the input elements are not inside an html form element
To use the HTML5 input valuation attributes (required, minlength... etc)
The inputs should be grouped inside a form element, and you can listen for the form submit event, that is triggered by default when the user press enter (while focus is on a field inside the form) or clicks the submit button (input or button with type="submit") that is also wrapped inside the form
HTML
<form id="loginForm">
<input id="username" type="text" name="user" required />
<input id="password" type="password" name="password" required />
<input id="submit" type="submit" name="submit" value="Login" />
</form>
Javascript
$(function(){
$('#loginForm').on('submit', function (event) {
event.preventDefault(); // prevent default form submit page reload
console.log('I will enter this handler only on valid form')
$('#loginForm').hide();
$('#differentView').show();
})();
Here is a basic plunker with 2 examples https://plnkr.co/edit/I0vUMSeOlrjlYYu4VofU?p=preview
using the default html5 validation
using Parsley
I'm working on a project that requires a login form for the user to access the page. When the login button is clicked, I call the following function:
$(document).ready(function() {
$("#login").click(function(){
$("#login").html('<form name="login" action="login" method="post" accept-charset="utf-8"><ul><li><label for="usermail">Email</label><input type="email" name="usermail" placeholder="yourname#email.com" required></li><li><label for="password">Password</label><input type="password" name="password" placeholder="password" required></li> <li> <input type="submit" value="Login"></li> </ul> </form> <form name="register" action="register" method="post" accept-charset="utf-8"> <ul> <li><label for="username">Username</label> <input type="username" name="username" placeholder="username" required></li> <li><label for="usermail">Email</label> <input type="email" name="usermail" placeholder="yourname#email.com" required></li> <li><label for="password">Password</label> <input type="password" name="password" placeholder="password" required></li> <li> <input type="submit" value="Register"></li> </ul> </form> ');
});});
The div for the login button looks like this:
<div class="row row1" id="login"><button>Login</br><p class="glyphicon glyphicon-user"></p></button>
</row>
The current issue I'm having is that when you click into one of the boxes of the form, it won't let you stay clicked into that box. It immediately unclicks the box, making it impossible to login. Does anyone have any idea why this is happening? Any help would be appreciated.
With this code
$("#login").click(function(){
$("#login").html('<form ... (very long string) ');
});});
You are effectively saying "when a user clicks on any part of the form, replace the contents of the form entirely". So the form gets overwritten with new contents every time you click on it. And the new contents are not "clicked" (you mean focused).
Another way i found out is to unbind click event: Use it for reference jsFiddle. It might give you better idea, so posting it too
$("#login").click(function(){
$("#login").unbind('click');
$("#login").html('<form..... >');
.....
});
I have an ASP.NET MVC web page which is essentially a form to fill in and select certain fields. I am using twitter bootstrap as well.
My.cshtml
#{
ViewBag.Title = "MyWork";
}
#section Scripts {
#Scripts.Render("~/scripts/mywork.js")
#Scripts.Render("~/scripts/typeahead.min.js")
}
<br />
<legend>Add items to enable work</legend>
<div class="row">
<div class="col-md-2">
Item name:
</div>
<div class="col-md-8">
<input id="ItemTextBox" name="Name" type="text" placeholder="Enter an item name ..." class="form-control" required="required" autofocus="autofocus" />
</div>
</div>
<legend>Generate file</legend>
<input id="GenerateFile" type="submit" class="btn btn-primary" value="Generate File" onclick="javascript:generateFile()" />
The javascript file mywork.js contains the generateFile() method and creates a file using the items entered.
How should I validate that the ItemTextBox is not empty? There can be a number of items added so I obviously don't want to check for each text element. I have set the required="required" for the inputs. How can I auto-validate the required fields?
Without any plug-in, for browser's default validation,
wrap your input elements with <form></form>. And add "required" attribute to all required input fields.
<form id="myform">
<p><span>Item 1</span> <input name="Item 1" type="text" placeholder="Enter an item name"required="required" autofocus="autofocus" /></p>
<p><span>Item 2</span> <input name="Item 2" type="text" placeholder="Enter an item name"required="required" autofocus="autofocus" /></p>
<p><span>Item 3</span> <input name="Item 3" type="text" placeholder="Enter an item name"required="required" autofocus="autofocus" /></p>
<p><input type="submit" value="Generate File"/></p>
</form>
Call generateFile function when form get submitted (your form won't get submitted until all required fields are filled) and prevent browser from submitting form to server.
document.getElementById('myform').onsubmit = function(e) {
generateFile();
e.preventDefault();
}
function generateFile(){
alert('Generating File');
}
DEMO
I think this link might help you:
Jquery Validation plugin
As you have added a "required" attribute, you can just validate a form and then call your javascript method using the above plugin:
$("#myform").validate({
submitHandler: function(form) {
// some other code
// maybe disabling submit button
// then:
$(form).submit();
}
});
did you tried jQuery validation engine, its a nice and best plugin to validate your form controls very easily. Just have a look at below link (its a demo)
http://www.position-relative.net/creation/formValidator/demos/demoValidators.html
To download and for documentation visit
https://github.com/posabsolute/jQuery-Validation-Engine
So I want to have one login, but I have 2 different forms to distinguish different functions. How do I pass the login forms between the other 2 functions.
I know javascript and vbs, not jquery.
Example:
I want the same user and pass to appy to both forms without having to make 2 seperate inputs
<%
username = Request.Form("username")
password = Request.Form("password")
%>
<input name="username" />
<input name="password" type="password" />
<form action="test.asp?f=test1" method="post">
text inputs with a submit button
</form>
<form action="test.asp?f=test2" method="post">
different inputs with another submit button
</form>
I haven't used ASP Classic for ages so I am not sure if this is a correct answer, but you can give it try. Since you have two buttons and you want to know which button is being clicked. Why don't you give value to each submit button and then give it the same name? For example.
<form action="test.asp" method="post">
<input name="username" />
<input name="password" type="password" />
<input name='action' type="button" value="Submit One" />
<input name='action' type="button" value="Submit Two" />
</form>
The ASP part
If Request.Form("action") = "Submit One" Then
'' First button is clicked
Else
'' Second button is clicked
End If
I think you're possibly over-thinking this.
I'd put the username and password inputs into a single form and have both submit buttons displayed as follows:
<form action="test.asp?f=test1" method="post">
<input name="username" />
<input name="password" type="password" />
<input id="submit-1" type="button" value="Submit One" />
<input id="submit-2" type="button" value="Submit Two" />
</form>
Then, using JavaScript I'd wire up click event handlers on each button such that when the user click either one, the form action URL querystring would be updated before submitting the form.
var button1 = document.getElementById("submit-1");
var button2 = document.getElementById("submit-2");
b1.onclick = function() {
document.form.action = "test.asp?f=test1";
document.form.submit();
}
b2.onclick = function() {
document.form.action = "test.asp?f=test2";
document.form.submit();
}