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..... >');
.....
});
Related
I am not web developer, but I have a task to add autocomplete function for an input box. Please treat me as a very beginner.
<div>
<label id="email_label" for="send_email" style="padding-right:5px">
Send Email:
</label>
<input id="send_email" type="text" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">
Request
</button>
</div>
requestAck() is a javascript function sending a email to address given by user (i.e. address in <input >). I am trying to add a flag in <input autocomplete="on" ...>, but it doesn't work. Perhaps because it's not in a <form></form> environment.
Could you help me to modify this code adding autocomplete (from cache) without changing other functions. Many thanks!
Try setting the property name="email" on the input tag, without that set the browser doesn't know what's supposed to autocomplete the field with :)
protip: I warmly suggest you to set the type of the input to email with type="email" instead of text, it's not required but it will help validating the input!
check this code:
<div>
<label id="email_label" for="send_email" style="paddingright:5px">Send Email:</label>
<input id="send_email" type="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">Request</button>
</div>
EDIT: Final solution discussed in comments
<form onsubmit="submitForm(event)">
<label id="email_label" for="send_email" style="padding-right:5px">Send Email:</label>
<input id="send_email" type="email" autocomplete="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" type="submit">Request</button>
</form>
<script>
function submitForm(e) {
e.preventDefault(); // this prevents the page from reloading
requestAck();
}
//dummy function so the javascript won't crash:
function requestAck() {}
</script>
Working example: https://codesandbox.io/s/focused-cray-ubkw4
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 want to implement a login window. Therefore I got my start-page where i am including the template for the login window:
<div id="footer_wrapper" ng-include="template.url"></div>
inside this template there is a form calling submitLogin() on submit:
<form ng-submit="submitLogin()">
<label for="email">E-Mail-Adresse</label><br>
<input type="email" name="email" ng-model="loginEmail">
<label for="password">Passwort</label><br>
<input type="password" name="password" ng-model="loginPassword">
<p>Passwort vergessen?</p>
<input type="submit" value="Anmelden">
</form>
But the submitLogin() function is not called when I submit the form.
$scope.submitLogin = function(){
console.log("function login");
// logUserIn($scope.loginEmail, $scope.loginPassword);
};
I think the ng-include is creating another scope. But how can I access this scope to bind a function to?
<form ng-submit="submitLogin()">
<label for="email">E-Mail-Adresse</label><br>
<input type="email" name="email" ng-model="loginEmail">
<label for="password">Passwort</label><br>
<input type="password" name="password" ng-model="loginPassword">
<p>Passwort vergessen?</p>
<input type="submit" value="Anmelden">
</form>
this code working here, i think you have done other mistake.
I have a form with ,
In the form after user clicks on Submit , he will be taken to another page which would show all the data entered, Which would allow the user to verify the content.(User will have a look at the content , to see what he entered is correct).
Once user verifies he would submit the data and Insert to DB should be done.
I want to know a method in which i could carry on the approach, to do this.
How can i implement this
EDIT MORE EXPLAIN
addemp.php
The Main Div With Form
<div class="panel-body">
<form>
Employee : <input Type="text" id="name">
<input type="submit" value="check">
</div>
The Second Div in the same form should show once submit is clicked
<div class="submit panel-body">
<form>
Employee : <Employee Name asin main div>
<input type="submit" > <--! this submit would post data
</form>
</div>
how to pass the value from 1st div to the second , and from the second INSERT to db.how can i do without page refresh ?
Use following script on location file
$action='';
if(isset($_POST['submit'])){
//create form here
//Change the action of form
$action = 'save.php';
}
echo '<form method="POST" action="'.$action.'">
<input type="text" name="nric" value="'.isset($_POST['nric'])?$_POST['nric'].'" />
<input type="text" name="empName" value="'.isset($_POST['empName'])?$_POST['empName'].'" />
<input type="text" name="location" value="'.isset($_POST['location'])?$_POST['location'].'" />
<input type="submit" value="Submit"/>
</form>';
EDIT: You don't need to use a form in this case. You can simply use JQuery to show the data from text boxes in a DIV and a button that will POST the data for you on the server.
<input type="text" name="nric" id="nric" />
<input type="text" name="empName" id="empName" />
<input type="text" name="location" id="location" />
<input id="sndData" type="button" value="Submit" />
<div id="showData"></div>
JQuery:
$('#sndData').click(function(){
var makeData = "<p>NRIC: "+$('#nric').val()+"</p><p>Employee Name: "+$('#empName').val()+"</p><p>Location: "+$('#location').val()+"</p>";
$('#showData').html(makeData);
});
When you've done that, just create/show a HTML button that will POST the data for you.
If this answers your question, please mark it as an answer.
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,