I've a form but it doesn't pass the parameters 'url' and 'USERNAME' to the next page. Is there something wrong?
I must use <button> instead of <input> for styling issues.
Here is the form:
<form action="/confirmation/index.php" method="post" class="form-wrap">
<div class="loader-wrap">
<div class="loader-txt">
</div>
</div>
<div class="field-set url-field">
<input type="text" name="url" data-placeholder="Your Website URL" maxlength="50" class="validate">.
<button name="url_btn" type="button" class="btn url-btn">Scan My Site!</button>
</div>
<div class="field-set email-field">
<input type="text" name="USERNAME" data-placeholder="Your E-mail" maxlength="50" class="validate">
<button name="email_btn" type="button" class="btn email-btn" style="width:174px;font-size:15px;">Send me Results!</button>
</div>
</form>
email_btn should be of type="submit" instead of type="button", so rather:
<button type="submit">Send me the results</button>
see here:
http://www.w3schools.com/tags/tag_button.asp
This should work with a submit Button!
(The extra php is to show that it works!)
<?php
if (isset($_POST['submitted'])) {
echo "form submitted";
}
?>
<form action="index.php" method="post" class="form-wrap">
<div class="loader-wrap">
<div class="loader-txt">
</div>
</div>
<div class="field-set url-field">
<input type="text" name="url" data-placeholder="Your Website URL" maxlength="50" class="validate">.
<button name="url_btn" type="button" class="btn url-btn">Scan My Site!</button>
</div>
<div class="field-set email-field">
<input type="text" name="USERNAME" data-placeholder="Your E-mail" maxlength="50" class="validate">
<button name="email_btn" type="button" class="btn email-btn" style="width:174px;font-size:15px;">Send me Results!</button>
<button name="submitted" type="submit">Send me the results</button> //Submit Button
</div>
</form>
Related
The session is not working properly in PHP. The login page is working fine. But after redirecting to my home page I couldn't able to see my login details it throws this errorNotice : Undefined index: username in C:\xampp\htdocs\final\header.php on line
and if I use the if-else state to hide my login/signup button it's not working. So please someone help me with this issue
My Login page
<link rel="stylesheet" href="css/auth.css">
<body>
<div class="login-box"> <h2>Login</h2> <form action="handleLogin.php" method="post">
<div class="user-box">
<input type="text" name="loginEmail" required="">
<label>Email</label>
</div>
<div class="user-box">
<input type="password" name="loginPass" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="submit" value="LogIn" name="submit">
</a><br>
<a class="nav_btn" href="signup.php"><i class="icon_profile"></i>Create New Account</a> </form> </div>
</body> </html>
LoginHandle page
<div class="login-box"> <h2>Login</h2> <form action="handleLogin.php" method="post">
<div class="user-box">
<input type="text" name="loginEmail" required="">
<label>Email</label>
</div>
<div class="user-box">
<input type="password" name="loginPass" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="submit" value="LogIn" name="submit">
</a><br>
<a class="nav_btn" href="signup.php"><i class="icon_profile"></i>Create New Account</a> </form> </div>
</body> </html>
My header session
echo ' <form class="form-inline my-2 my-lg-0" >
<p class="text-light my-0 mx-2">Welcome'.$_SESSION["username"].' </p>
</form>';
I think you should use the post method for the form and then store the values in the sessions but remember to start session first
Here you logged in
<php?
// Check to see if we have some POST data, if we do process it
if ( isset($_POST['name']) && isset($_POST['pass']) ) {
$_SESSION["name"] = htmlentities($_POST["email"]);
header( 'Location: view.php' ) ;
return;
}
?>
<form action="handleLogin.php" method="post">
<div class="user-box">
<input type="text" name="loginEmail" required="">
<label>Email</label>
</div>
<div class="user-box">
<input type="password" pass="loginPass" required="">
<label>Password</label>
</div>
<input type="submit" value="LogIn" name="submit">
</form>
First of all, is this possible?
I have a reset button in my form and I want to get the text in the input before clicking on the reset button.
<form action="Pros.php" method="post">
<div class="form-group">
<label for="ordID">Email address:</label>
<input type="text" class="form-control" id="ordID">
</div>
<button type="reset" class="btn btn-default">Submit</button>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
If this is possible, how can I do it?
Thank you.
You can use onreset event handler
function myFunction() {
var m = document.getElementById('ordID').value;
console.log(m)
}
<form action="Pros.php" method="post" onreset="myFunction()">
<div class="form-group">
<label for="ordID">Email address:</label>
<input type="text" id="ordID">
</div>
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Yes, use javascript/jQuery to grab the contents of the input field(s) before you clear them. Here's a basic example:
$('#btnReset').click(function(){
var ordID = $('#ordID').val();
alert(ordID);
$('#ordID').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="Pros.php" method="post">
<div class="form-group">
<label for="ordID">Email address:</label>
<input id="ordID" type="text" class="form-control" />
</div>
<button id="btnReset" type="reset" class="btn btn-default">Reset</button>
<button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>
</form>
How can I access the HTML elements of this form using plain JS or preferably jQuery? I want to access input fields (username, password) and button (login). I'm clueless since these elements don't have "ID" and class is also the same for some.
I'm working on a Chrome extension.
<form data-bind="submit: login">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" data-bind="value: loginEmail">
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" data-bind="value: loginPassword">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log In</button>
<button data-bind="click: logout" class="btn btn-default">Log Out</button>
</div>
</form>
Use the attribute selector
console.log('email',$('[data-bind="value: loginEmail"]'));
console.log('password',$('[data-bind="value: loginPassword"]'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form data-bind="submit: login">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" data-bind="value: loginEmail">
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" data-bind="value: loginPassword">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log In</button>
<button data-bind="click: logout" class="btn btn-default">Log Out</button>
</div>
</form>
You can use querySelecor(https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), for example like this:
document.querySelector('input[data-bind="value: loginEmail"]');
document.querySelector('input[data-bind="value: loginPassword"]');
You could use the input[type='password'] selector like this:
$('body').find("input[type='password']");
I have two includes in the HTML view listed below. I wait for the view to load before manipulating some elements but it fails because the includes have not yet finished loading. I check the existence of the elements using the console while debugging. In my controller:
wtApp.controller('createAccountController', function ($scope) {
resetNavbar();
$("a[href$='create-account']").css({ color: navbarSelectedColor });
$scope.$on('$viewContentLoaded', function () {
getCountries();
setupAccountsForm();
var form = $("#form-accounts");
if (form.length) {
form.get(0).reset();
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Writer's Tryst</title>
<link href='css/accounts.css' rel='stylesheet' type='text/css' />
</head>
<body data-ng-app="">
<div>
<form id="form-accounts" class="form-horizontal well center-form-small">
<h1>Create Account</h1>
<div class="capatcha">
<div id="recaptcha-elements" style="display: inline-block" data-sitekey=""></div>
</div>
<div id="oauth-login" class="form-group row text-center">
<p>
<button id="facebook-login" class="btn btn-custom-primary" formnovalidate>Login with Facebook</button>
<button id="google-login" class="btn btn-custom-primary" formnovalidate>Login with Google</button><br/>
</p>
<p class="text-center">
<button class="btn btn-custom-success" formnovalidate>- OR ENTER -</button>
</p>
</div>
<div id="passwords">
<div class="form-group row">
<label for="pwd" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" required id="pwd" name="pwd" placeholder="Password - 6 characters minimum (will be encrypted)" />
<button id="show-pwd" class="btn btn-custom-primary" formnovalidate tabindex="-1">show</button>
</div>
</div>
<div class="form-group row">
<label for="confirm-pwd" class="col-sm-2 form-control-label">Confirm Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" required id="confirm-pwd" placeholder="Confirm password" />
<button id="show-confirm-pwd" class="btn btn-custom-primary" tabindex="-1">show</button>
</div>
</div>
</div>
<div data-ng-include="'pages/snippets/work-type.html'"></div>
<div data-ng-include="'pages/snippets/account-info.html'"></div>
<button type="submit" id="submit" class="btn btn-custom-warrning btn-block">Send Verification Email</button>
<input type="hidden" id="subject" name="subject" />
<input type="hidden" id="msg" name="msg" />
<input type="hidden" id="userid" name="userid"/>
</form>
<form id="form-verify" class="form-horizontal well center-form-small">
<div id="verify">
<div class="form-group">
<input id="ver-email-msg" name="ver-email-msg" readonly="true" />
</div>
<div class="form-group center-div">
<label for="ver-code">Verification Code</label>
<input id="ver-code" name="ver-code" required autofocus="true" placeholder="Paste verification code" />
</div>
<div class="form-group">
<input id="code" name="code" type="hidden" />
<button id="but-register" name="but-register" class="btn btn-custom-success btn-block">Create Account</button>
</div>
</div>
<input id="account-id" name="account-id" type="hidden" />
</form>
</div>
<script src="js/recaptcha.js"></script>
<script src="js/accounts.js"></script>
</body>
</html>
Try using,
$rootScope.$on('$includeContentLoaded',function(event,url){
if (url == 'YourDesiredPath') {
// do something
}
});
From angular docs:
Emitted every time the ngInclude content is requested.
I thought Data-Parsley is supposed to stop form submit when errors are found. When I submit the following form, I briefly see the errors caught by data-parsley, but then the form action goes through. What am I missing here?
<div id="registerreg" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Register...</h4>
</div>
<div class="modal-body">
<form action="<?php echo 'register_success.php'; ?>" method="POST" name="registration_form" id="registration_form" class="margin-bottom-0">
<div class="form-group">
<label>First Name:</label>
<input type="text" id="first" name="first" class="form-control input-lg" placeholder="First Name" required />
</div>
<div class="form-group">
<label>Last Name:</label>
<input type="text" id="last" name="last" class="form-control input-lg" placeholder="Last Name" required />
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" class="form-control input-lg" placeholder="Email Address" id="emailreg" name="emailreg" onkeyup="checkvalid()" data-parsley-trigger="change" required />
<div id="emailwarning" style="color:red;"></div>
</div>
<div class="form-group">
<label>Password: (At least 6 charactors with 1 number)</label>
<input type="password" id="passwordreg" name="passwordreg" class="form-control input-lg" placeholder="Password" data-parsley-minlength="6" data-parsley-pattern="/^[a-zA-Z0-9., ]*[0-9]+[a-zA-Z0-9., ]*$/" title="Passwords must be at least 6 characters long, contain at least one uppercase letter (A..Z), at least one lower case letter (a..z), and at least one number (0..9)"/>
</div>
<div class="form-group">
<label>Repeat Password:</label>
<input type="password" name="confirmpwd" id="confirmpwd" class="form-control input-lg" placeholder="Repeat Password" data-parsley-equalto="#passwordreg" data-parsley-error-message="The entered text does not match the password field."/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" id="registerbutton" class="btn btn-primary" onclick="return regformhash(this.form, this.form.passwordreg);" value="Register" >
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('#registration_form').parsley();
</script>
The onclick event in the submit button is overriding data parsley functions. Removing the onclick event from the submit button and letting data parsley fire the events solved the problem.
changed ...
<input type="submit" id="registerbutton" class="btn btn-primary" onclick="return regformhash(this.form, this.form.passwordreg);" value="Register" >
to...
<input type="submit" id="registerbutton" class="btn btn-primary" value="Register" >
and ...
$('#registration_form').parsley();
to....
$('#registration_form').parsley().on('form:success', function() {
var form = document.getElementById('registration_form');
var passwordreg = form.passwordreg;
return regformhash(form, passwordreg);
});