I have the following HTML.
When you choose an email to autocomplete, Chrome populates all of the input fields with the same address - overwriting any existing data. what am i missing?
<form autocomplete="off">
<div class="form-group">
<label> Email addresses: </label>
<div class="input-group mb-3">
<input class="form-control" type="email" name="recipient-0">
</div>
<div class="input-group mb-3">
<input class="form-control" type="email" name="recipient-1">
</div>
<div class="input-group mb-3">
<input class="form-control" type="email" name="recipient-2">
</div>
</div>
<button type="submit" class="btn btn-primary">
Request
</button>
</form>
Related
I have created a PHP page which have some form information and at the end of the form i have a submit button. I know how to take all the user inputs from the form using the PHP post method. My problem is the following, how can i create a mini pop up form which will pop up after the user clicks the submit button. The pop up form will ask from the user if the submission of the information is urgent or not, the user will just choose between urgent or not urgent and click a button in the mini pop up form("proceed") that will close the pop up and send all information of the user inputs along with the pop up in a different PHP page. Can someone please guide with this problem?
The source code of my form at the moment is the following
<?php include "includes/tasksheader.php"; ?>
<link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main1">
<div class="contact-section">
<div class="container">
<form>
<div class="col-md-6 form-line">
<div class="form-group">
<label for="exampleInputUsername">Social Ensuarance Number</label>
<input type="text" class="form-control" id="" placeholder="Ensuarance Number">
</div>
<div class="form-group">
<label for="exampleInputEmail">Land Regisrty Department</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Land Registry">
</div>
<div class="form-group">
<label for="telephone">Income Tax Office</label>
<input type="tel" class="form-control" id="telephone" placeholder="Tax Office">
</div>
<div class="form-group">
<label for="telephone">Court</label>
<input type="tel" class="form-control" id="telephone" placeholder="Court">
</div>
<div class="form-group">
<label for="telephone">Limassol District Administration</label>
<input type="tel" class="form-control" id="telephone" placeholder="District Administration">
</div>
<div class="form-group">
<label for="telephone">Municipality</label>
<input type="tel" class="form-control" id="telephone" placeholder="Municipality">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputUsername">VAT Department</label>
<input type="text" class="form-control" id="" placeholder="VAT">
</div>
<div class="form-group">
<label for="exampleInputEmail">RCB Bank</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="RCB Bank">
</div>
<div class="form-group">
<label for="telephone">Hellenic Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="Hellenic Bank">
</div>
<div class="form-group">
<label for="telephone">Bank of Cyprus</label>
<input type="tel" class="form-control" id="telephone" placeholder="Bank of Cyprus">
</div>
<div class="form-group">
<label for="telephone">CDB Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="CDB Bank">
</div>
<div class="form-group">
<label for="telephone">Other</label>
<input type="tel" class="form-control" id="telephone" placeholder="Other">
</div>
</div>
<div class="form-group">
<label for ="description"> Message</label>
<textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea>
<div>
<button type="button" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
Thanks in regards
I'm guessing you'll need to do the following:
first create the popup form(having two buttons...) then you'll need to write the following in your javascript file:
$('form').on("submit", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
or
$('button').on("click", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
then in your popup you'll again need to preventDefault and do whatever is on your intention.
I hope it helps:)
You could change the button to a submit button and set an onsubmit for the form:
<button type="submit">
<form method="post" onsubmit="openPopup();return false">
And then use javascript to open the popup with all the data you need.
I hope this helps.
Please check below js fiddle:
https://jsfiddle.net/Lfz567tw/
I have created a form in which when I enter, it selects next input and at last, submits the form.
But this function disables my validation function and on submitting the form, function validate() is not working.
Is there any way I can fire function validate() also when submitting the form?
There is simple example to show you how you can check or call your validate function before form submittion
e.preventDefault : Used for prevent default functionallity
$(function() {
$("#entertonext").submit(function(e) {
e.preventDefault();
// validate code (calling function)
validate();
});
});
function validate() {
alert('Validating');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="card-block" id="entertonext">
<form name="bank" action="#" method="post">
<div class="form-group row" >
<label for="default-input" class="col-sm-2 form-control-label">Account No.</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="acc_no" id="acc_no" placeholder="Account No." tabindex="1" onblur="validate(this,event)">
<span id="msg8"></span>
</div>
</div>
<div class="form-group row">
<label for="default-input-rounded" class="col-sm-2 form-control-label">Branch Name</label>
<div class="col-sm-10">
<div class="input-group icon icon-lg icon-color-primary">
<input type="text" class="form-control entertonext" name="b_name" id="b_name" placeholder="Branch Name" tabindex="2">
</div>
<span id="msg2"></span>
</div>
</div>
<div class="form-group row" id="drawn" >
<label for="default-input" class="col-sm-2 form-control-label">IFSC Code</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="ifsc_code" id="ifsc_code" placeholder="IFSC Code" tabindex="3">
<span id="msg5"></span>
</div>
</div>
<div class="form-group row" id="deposited">
<label for="default-input" class="col-sm-2 form-control-label">Address</label>
<div class="col-sm-10">
<textarea class="form-control entertonext" name="address" id="address" placeholder="Address" tabindex="4"></textarea>
<span id="msg6"></span>
</div>
</div>
<div class="form-group row" id="deposited">
<label for="default-input" class="col-sm-2 form-control-label">Bank Balance</label>
<div class="col-sm-10">
<input type="text" class="form-control entertonext" name="balance" id="balance" placeholder="Bank Balance" tabindex="5">
<span id="msg6"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary entertonext" tabindex="6">Submit</button>
</div>
</div>
</form>
</div>
I have a wierd issue.
The email input value is not logged, however the password value is logged.
Any idea guys?
<div class="container" ng-controller="loginCtrl">
<div class="row" style="height: 50px;"> </div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4" >
<div class="form-group">
<label for="emailinput">Email address</label>
<input type="email" class="form-control" id="emailinput"
ng-model="user.email"
placeholder="Enter Email Address">
</div>
<div class="form-group">
<label for="passwordinput">Password</label>
<input type="password" class="form-control" id="passwordinput"
ng-model="user.pass"
placeholder="Enter Password">
</div>
<div class="form-group">
<button class="btn btn-primary ladda-button"
ng-click="verifyCredentials()"
data-style="expand-left">
<span class="ladda-label">Login</span>
</button>
</div>
<div class="form-group">
<label for="passwordinput">
Forgot Password?
</label>
</div>
</div>
</div>
</div>
My angular code is as below.
var app = angular.module('bookie',[]);
app.controller('loginCtrl', function($scope, $http){
$scope.user = {};
$scope.verifyCredentials = function(){
console.log($scope.user);
}
});
The email will only show when it is a legal email address:
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app ng-init="user={}">
<div class="form-group">
<label for="emailinput">Email address</label>
<input type="email" class="form-control" id="emailinput"
ng-model="user.email"
placeholder="Enter Email Address">
</div>
<div class="form-group">
<label for="passwordinput">Password</label>
<input type="password" class="form-control" id="passwordinput"
ng-model="user.pass"
placeholder="Enter Password">
</div>
<div class="form-group">
<button class="btn btn-primary ladda-button"
ng-click="verifyCredentials()"
data-style="expand-left">
<span class="ladda-label">Login</span>
</button>
</div>
<div class="form-group">
<label for="passwordinput">
Forgot Password?
</label>
</div>
{{user | json}}
</div>
It will display email only when the user types the correct email address (i.e -something#xyz.com)
<label>EMAIL:</label>
<input type="email" ng-model="uemail" name="ueamil" placeholder="Enter EMAIL">
<h4> EMAIL: {{uemail}}</h4>
I am making a login form with a link if the user forgot password,
this form is inside div as below, but the problem is that when the user click Forgot the password, it opens this page in the whole page not on its div
<div>
<form class="form" method="POST" id="login-nav">
<div class="form-group">
<label for="emailaddress">Email address</label>
<input type="email" class="form-control" id="emailaddress" name="emailaddress"placeholder="Email address" required>
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password" required>
<div class="help-block text-right">Forgot the password ?</div>
</div>
<div class="form-group">
<button type="submit" id="login_button" name="login_button" class="btn btn-primary btn-block">Sign in</button>
</div>
</form>
forgotpassword.php
<form action="" method="post">
<div class="form-group">
<label for="emailaddress">Enter your email address</label>
<input type="email" class="form-control" id="recovery_email" name="recovery_email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<button type="submit" id="resetpassword" name="resetpassword" class="btn btn-primary btn-block">Reset Password</button>
</div>
_self is standard for the target-tag. It opens the link in the same browser window, just what you are describing.
DIVs are not iFrames. (And no one wants iFrames for something like this. Really.)
You have to build your div-structure again at your forgotpassword.php.
I have 2 forms log in and sign up written on same index.php and they toggle according to the users need.The log in form appears when you open index.php while the sign up form is hidden and appears only when you click on signup here link.
Now my issue is that while signing up if there is any error(validation,database error) then the page refreshes when submit button is clicked obviously and returns to my login form which appears when you open/refresh index.php.Again I have to click on signup here link to solve the errors.
I just want to stay on signup form when errors appear that means I dont want the page to be refreshed when clicked on submit but want the errors to appear and solve them then and there.
$.ajax({
type: "POST",
url: "phpindex.php",
data: $("#signUpForm").serialize(),
success:function(data)
{
if ("#error".val(data))
{
e.preventDefault();
}
}
});
});
My validation and database code is written in phpindex.php
***************signup form************************
<form method="post" id="signUpForm">
<div class="container" id="signupContainer">
<h1>Sign Up</h1>
<div id="error"><?php if ($error!="") {
echo '<div class="alert alert-danger" role="alert">'.$error.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Your name">
<span class="fa fa-user"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address1</label>
<div class="col-sm-10">
<input type="text" id="address1" class="form-control" name="address1" placeholder="Home address">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address2</label>
<div class="col-sm-10">
<input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode....">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="Email Address">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="Password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-5 col-sm-10">
<input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit">
</div>
</div>
<p><a class="toggleForms">Back to Log in</a></p>
</div>
</form>
***************login form*****************
<form method="post" id="logInForm">
<div class="container" id="logInContainer">
<h1>Log In</h1>
<div id="success"><?php if ($success!="") {
echo '<div class="alert alert-success" role="alert">'.$success.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Emai</label>
<div class="col-sm-8">
<input type="email" class="form-control" placeholder="Email" name="email">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" placeholder="Password" name="password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-4 col-sm-10">
<input type="hidden" name="signUp" value="0">
<input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit">
</div>
</div>
<p><a class="toggleForms">Sign Up Here</a></p>
</div>
</form>
Firstly, there are numerous errors in the code you have submitted. I believe they are mainly due to clumsy copy and pasting, but there is one that I think you just have in your code, and it is the missing jQuery reference for "#error".
"#error".val(data)
I think you wanted to write something like this
$("#error").val(data)
This error would stop "preventDefault" from happening.
Secondly, I wonder where is your submit handler for those forms and how it looks like. If you have none, then there is you answer. You just do not catch the submit event.
Lastly, I would consider calling, instead of preventDefault:
return false
Please see this thread as for the reasons why
event.preventDefault() vs. return false