I have the following login form:
<!-- login box -->
<form action="php/login.php" method="POST" id="signin">
<span id="oldLoginProblem" style="display: inline-block;" ><h3>Login</h3></span>
//appears when error
<span id="newLoginProblem" style="display: inline-block; color: red; font-weight: bold;"><h3>Invalid Login ยท <a href='recover'>Forgot Password?</a></h3></span>
<table id="loginTable">
<tr><td>Email</td><td><input type="text" id="email" name="email" title="Enter your email"/></td></tr>
<tr><td>Pass</td><td><input type="password" id="password" name="password" title="Enter your password"/>
<?php
if(isset($_SERVER['HTTP_USER_AGENT']))
{
$agent = $_SERVER['HTTP_USER_AGENT'];
}
if(!(preg_match("/firefox/si", $agent)))
{
//workaround for a jQuery plugin I'm using
echo "<input type='text'/>";
}
?>
</td></tr>
</table>
<input type="button" value="Login" id="loginSub"/>
<input type="button" value="Sign Up" onClick="document.location.href='register'"/>
</form>
I can move the "Sign Up" button outside of the form, obviously, if needed. I'm just trying to make the form submit when Enter is pressed. Right now, it does no such thing. The button isn't a type=submit either, so that may be the case.
Any help? I'm using type=button because I'm utilizing jQuery UI buttons.
Edit:
Here's the code that handles my login submission. Perhaps I can make Enter run this code?
$('#loginSub').live('click', function() {
$.post("php/login.php", $("#signin").serialize(), function(data) {
if (data == "Invalid") {
$('#oldLoginProblem').fadeOut('fast', function() {
$('#newLoginProblem').fadeOut('fast', function() {
$('#newLoginProblem').fadeIn('fast');
});
});
}
else {
window.location.replace("home");
}
});
});
$('#input_text').keyup(function(e) {
if(e.keyCode == 13) {
$("#signin").submit();
}
});
$('#input_text').keyup(function(e) {
if(e.keyCode == 13) {
document.singin.submit();
}
});
Related
I have been working on a website, but for some reason when I click enter it stays on the same page. But when I click the button I added on the page itself it works. What I'm trying to do is go from my login page, index.html, to my home page after the password is verified, home.html. Any Ideas?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/popup.css?Version=1.1">
</head>
<body>
<div id="box">
<form id="myform-search" method="post" autocomplete="off">
<h1>Enter Password</h1>
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<button class="unmask" type="button" onclick="toggle()"></button>
<button class="enter" type="button" onclick="done()">Enter</button>
</p>
</form>
</div>
<div id="wrong">
<p>Sorry, but the password you entered is incorrect!</p>
</div>
<!--Javascript to show password Box-->
<script>
//Verifies password
function done() {
document.getElementById("box").style.display = "none";
var password = document.getElementById("p").value;
if (password == "12345") {
location.replace("http://apr.great-site.net/Home/home.html");
} else {
document.getElementById("wrong").style.display = "block";
}
};
function toggle() {
var x = document.getElementById("p");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
</html>
```````````````````````````````````````````
// Verifies password
function done() {
document.getElementById("box").style.display = "none";
var password = document.getElementById("p").value;
if (password == "12345") {
// returning true will submit the form
return true;
} else {
document.getElementById("wrong").style.display = "block";
// returning false will prevent submiting the form
return false;
}
};
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/popup.css?Version=1.1">
</head>
<body>
<div id="box">
<form id="myform-search" method="post" action="validationUrlHere" autocomplete="off" onsubmit="return done();">
<h1>Enter Password</h1>
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<!-- Commented this button as it is not needed in the context of the solution -->
<!--<button class="unmask" type="button" onclick="toggle()">something</button>-->
<!-- HERE is the interesting part : -->
<!-- Clicking the "Enter" button has same effect as -->
<!-- hitting the default submit button or pressing the Enter button on your -->
<!-- keyboard. Your cursor focus must be inside one of the form's elements, -->
<!-- preferably in the password input field -->
<button class="enter" type="button" onclick="done()">Enter</button>
<input type="submit" value="Real Submit" />
</p>
</form>
</div>
<div id="wrong" style="display: none;">
<p>Sorry, but the password you entered is incorrect!</p>
</div>
</body>
</html>
Take a look at this snippet, take what you need from it. To be honest, it's not clear what you are seeking... hope it will help you understand some basics :-)
Try this :
<form onSubmit="done()">
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<button class="unmask" type="button" onclick="toggle()"></button>
<button type="submit" class="enter">Enter</button>
</p>
</form>
If you want the function done() to be called when you hit enter you should add an event listener for Enter on your form. (Have in mind that you opened 2 form tags)
document.getElementById('myform-search').addEventListener('keyup', function(e) {
if(e.key=='Enter') {
done()
}
}
Good day everyone!
Please, I don't know what wrong with this ajax code...
Here is the HTML
$(document).ready(function() {
$("#react").submit(function(e) {
$('#like').html('Processing..');
e.preventDefault();
var name = 'name';
$.ajax({
type: "POST",
url: '',
data: $("#react").serialize(),
success: function(data) {
$("#liked").show();
$("#liked").html(name + " has been added to your favorites");
$("#liked").fadeOut(1000);
$('#like').html("<i class='fa fa-heart'></i>");
},
error: function() {
$("#liked").show();
//$("#liked").attr('class', 'alert alert-danger').html(name+" could not be added to your favorites");
$("#liked").fadeOut(1000);
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="react" method="post" action="javascript:void(0)" style="width: 40px; border: 0px solid black; color: white; float: left;">
<input type="hidden" name="aid" value="1" id="aid" style="width: 100%;" />
<input type="hidden" name="session" value="1" id="session" style="width: 100%;" />
<button type="submit" class="text-default btn btn-primary pull-left" id="like"><i class="fa fa-thumbs-up"></i></button>
</form>
The problem is that nothing happens once I click on the above button
Why form with only one text input (without any buttons) will submit, but with two text inputs won't?
Example: https://codesandbox.io/s/form-submitting-ztqpz?fontsize=14
Add a submit button on each form (few inputs too) and it will work both with button and pressing enter
<div class="panel">
<div class="panel-title">Few inputs</div>
<form action=".">
<input type="text" />
<input type="text" />
<button type="submit">Click</button>
<output name="result" />
</form>
</div>
</div>
you can do it in many ways,
best one is with tabindex to prevent tab reach this button -
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />
Also you can hide your button link this. or you can go with java script function like this -
<script type="text/javascript">
// Using jQuery.
$(function() {
$('form').each(function() {
$(this).find('input').keypress(function(e) {
// Enter pressed?
if(e.which == 10 || e.which == 13) {
this.form.submit();
}
});
$(this).find('input[type=submit]').hide();
});
});
</script>
I have a form to create an employee.
When I click the submit button I need to confirm with the confirm dialog box as 'do you want to submit' form?
In angularjs and bootstrap design, if it's possible.
<form ng-submit="create()">
<input type="text" ng-model="fstname">
<input type="text" ng-model="lstname">
<input type="submit" value="submit">
</form>
When I click the submit button, if the form is valid then I want to confirm with confirm box. If I click ok, that means I want to submit the form else it should not submit.
finally i found my answer for this question.my view page code look like below
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl" class="modal-demo">
<br>
<form name="form" novalidate>
<input type="text" style="width:200px" class="form-control" name="name" ng-model="text.name" required>
<span ng-show="form.$submitted && form.name.$error.required">name is required</span><br>
<input type="text" style="width:200px" class="form-control" name="name1" ng-model="text.name1" required>
<span ng-show="form.$submitted && form.name1.$error.required">name1 is required</span><br>
<input type="submit" ng-click="open(form)">
</form><br>
<p ng-hide="!msg" class="alert" ng-class="{'alert-success':suc, 'alert-danger':!suc}">{{msg}}</p>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Your Details</h3>
</div>
<div class="modal-body" id="modal-body">
<p>Are you sure, your name <b>{{name }}</b> is going to submit?
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">Submit</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<script>
and my controller code looks below
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope,$uibModal, $log, $document) {
var $ctrl = this;
$scope.animationsEnabled = true;
$scope.text = {};
$scope.open = function (form) {
if(form.$valid)
{
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
values: function () {
return $scope.text;
}
}
});
modalInstance.result.then(function () {
console.log($scope.text);
$scope.msg = "Submitted";
$scope.suc = true;
}, function(error) {
$scope.msg = 'Cancelled';
$scope.suc = false;
});
}else{
alert('');
}
};
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope,$uibModalInstance, values) {
var $ctrl = this;
$scope.name= values;
$scope.ok = function () {
$uibModalInstance.close('ok');
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
my updated plunkr here demo
I used toggle to make a search form from a button. But I want click outside any position to close search form, not only using button.
HTML
Search
<div class="search_field" style="display:none;">
<form>
<input name="search" class="search" value="" placeholder="Search Item...." type="text" data-theme="e" />
<input type="submit" value="Search" data-mini="false" data-icon="search" data-iconpos="notext" data-theme="c" />
</form>
</div>
Jquery :
$(function() {
$(".opensearch").on('click', tapHandler);
function tapHandler(event) {
$('.search_field').toggle();
$('.search').focus();
}
});
Demo of JsFiddle
Many thanks for your help.
Use the blur event:
$(".search").on("blur",function(){
$('.search_field').toggle();
});
Updated fiddle: JsFiddle demo
[Edit] You might want to check if the new focus is not on the search icon before hiding the field:
$(".search").on("blur",function(){
setTimeout(function(){
var target = document.activeElement;
target = target ? target.id||target.tagName||target : '';
if(target!="INPUT"){
$('.search_field').toggle();
}
}, 1);
});
Better with the id of the button though....
Example: JsFiddle demo
You can do something like
$(function() {
$(".opensearch").on('click', tapHandler);
//add a click handler to the document object
$(document).on('click', function(e) {
//if the click is happening inside the search_field or opensearch elements then don't do anything
if ($(e.target).closest('.search_field, .opensearch').length == 0) {
$('.search_field').hide();
}
});
function tapHandler(event) {
$('.search_field').toggle();
$('.search').focus();
}
});
.search_field {
padding: 10px 10px 0;
position: relative;
}
.search_field .ui-submit {
bottom: -2px;
position: absolute;
right: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Search
<div class="search_field" style="display:none;">
<form>
<input name="search" class="search" value="" placeholder="Search Item...." type="text" data-theme="e" />
<input type="submit" value="Search" data-mini="false" data-icon="search" data-iconpos="notext" data-theme="c" />
</form>
</div>