Retrieving the value of button while submitting form with javascript - javascript

I have a file index.php with a log in form comprising a field for the email address, a field for the password, a box to check, and two submit buttons:
the first button ("log_in") is for trying to log in with the current combination email/password. This button triggers a script ("check_box()") which verifies that the box has been checked.
the second button is for generating a new password for the current email address. It also triggers a script ("confirmation()") which asks the user to confirm before executing the action.
I am trying to submit the form with javascript, and to keep track of which button has been submitted in order to execute the correct action. Please see the code below.
<form id="form" name="form" method="post" action="index.php">
<input type="text" name="email" id="email" placeholder="Email address" />
<input type="password" name="password" id="password" placeholder="Password" />
<input type="radio" id="box" name="box"><label for="box">Please check this box if you want to log in.</label>
<input type="button" id="log_in" name="log_in" value="Log in" onclick="return check_box();"/>
<input type="button" id="change_password" name="change_password" value="Password forgotten?" onclick="return confirmation();"/>
</form>
function confirmation(){
if (!confirm("A new password will be generated and sent to your email address. Please make sure that your email address is written correctly, and click on Confirm to proceed.")) {
return FALSE;
}
else{
var form = document.getElementById('form');
form.submit();
}
}
function check_box(){
var success = document.querySelector("input[name=box]:checked");
if(!success){
alert("Please check the box.");
}
else{
var form = document.getElementById('form');
form.submit();
}
}
My problem is to retrieve the values of the buttons when the form is submitted. I tried
if(isset($_POST['log_in']))
to detect whether the user has been trying to log in, and
if(isset($_POST['change_password']))
to detect whether the user wants to change password. But these tests always return FALSE. Where is the mistake?
Thank you in advance.

Related

Execute Javascript Fetch() Request After PHP Code Executes Successfully

I have a form for resetting a user email which currently consists of a password input element, and a 'Change email address' email input.
<form method="post">
<div id="form-row-password" class="form-row">
<label for="password">Enter Password</label>
<input class="input-gateway" type="password" name="password" id="password">
</div>
<div id="form-row-email" class="form-row">
<label for="email">Change Email Address</label>
<input type="email" name="email" id="email">
</div>
<div class="form-row form-row-submit">
<input type="submit" name="update-email" id="button" value="SEND ACTIVATION LINK">
</div>
</form>
With this current form you enter your password and the email address, and then you get emailed a link to confirm your new/change of email address and it all works as desired.
The current PHP process is as follows:
Santisation and validations of inputs
PDO Prepared Statments that update the mysql database
What I Wish To Achieve
What I want to do is have it so this process is split over two stages using AJAX/fetch() in javascript.
The first step would be the user entering their password, and when verified with the database this input disappears and is replaced with the 'new email address' input element.
I've set up some test javascript that fetches this second input element using a 'test' button.
What I want to do is have this fetch() javascript code trigger when then first stage is successful in the PHP code. But I cannot work out how to do this?
The PHP that processes the inputs I will included in the HTML partials that get added and removed by the fetch() javascript so I'm not concerned about that side of things.
Will I use a 'submit' event listener or an 'onchange' event listener and how will the javascript know that the password submission has been successful when this is done in PHP?
// PSEUDO JAVASCRIPT
let button = document.getElementById('button'),
formRowPassword = document.getElementById('form-row-password'),
formRowEmail = document.getElementById('form-row-email');
var filePath = "modals/email-reset-modal.php";
// what type of event listener is best to use ??
button.addEventListener('click', function(){
fetch(filePath)
.then((response) => {
return response.text();
})
.then((data)=>{
formRowPassword = '';
formRowEmail.textContent = data;
})
.catch((error => {console.log(error)}))
})
Is there a built-in PHP function that can effectively talk to javascript so it executes once the password input (1st stage) has been successful?
Any help would be amazing.
Anna

Autofill password and email javascript

I have a problem with autofill feauture of my browser. Once a user logins with her email and password, browser holds these two information for future reference. When she opens login page, email and password fields are populated by browser. Event which I binded using jquery for email triggered. On the other hand event for password isn't triggered.
Login form contains following lines:
<form method="post" action="/login" id="login-form">
<input type="email" placeholder="Email" id="email" name="email"/>
<input type="password" placeholder="Password" id="password" name="password"/>
<button type="submit" />
</form>
My script file:
<script type="text/javascript">
$(document).ready(function () {
$("#email").on('change keyup paste mouseup',function () {
alert("email");
});
$("#password").on('change keyup paste mouseup',function () {
alert("password");
});
});
</script>
These two fields are populated by browser successfully. But only "email" messages is shown. Event which is for password isn't triggered.
Any suggestions ?
Thanks.

Prevent browser from asking to save login info when the form is invalid

I've got a simple login form with the absolute basics in place for front-end validation. It just checks that the fields aren't blank and that the email is in the most basic correct format. When the form is invalid I prevent the submit behavior.
When I enter something into both fields so they aren't blank, but the email is still invalid, the form is not submitted, yet I am still prompted by browsers to save my credentials.
How can I prevent this from happening when the form is invalid and hasn't yet been submitted? I still want this feature to be offered to users, but only when the form is actually submitted.
Here's the basics of how I've set this up:
HTML:
<form method="post" action="" onsubmit="return validateForm()" novalidate>
<input type="text" id="email" required autofocus>
<input type="password" id="password" required>
</form>
JS:
function validateForm() {
var isValid = true;
//validation logic goes here...
return isValid;
}
Here's a working demo: https://codepen.io/chrismbarr/pen/awmVyq
Enter an invalid email and something in the password field to trigger this.

Validate form on submit only using parsley.js

I have a simple form
<form action="#" method="GET" class="parsleyVal">
<div class="input-group input-group-lg">
<input type="email" name="email" class="form-control input-email"
placeholder="Enter your email"
data-parsley-required-message="Please enter your email address"
data-parsley-required title="Please enter your email address"
auto-complete="off" data-parsley-trigger="submit" />
<span class="input-group-btn">
<button class="btn btn-orange" type="submit" data-parsley-trigger="click touch">
Sign up
</button>
</span>
</div>
</form>
Validation starts when the sign-up button is clicked.
However, if there is no email specified, an error is shown:
enter your email.
When users start typing their email address, parsley.js does the automatic validation and shows that email must be valid.
I'd like parsley.js to re-validate the email field when submit button is clicked again but not on the fly.
I have tried xCodexInlinexPlacexHolderx on the input field - does not help.
Looks like I finally figured out what I wanted.
Might be not ideal way to do it, if anyone could recommend something else.
$('.parsleyVal input[type=email]').on('keyup keydown', function () {
$('.filled').removeClass('filled');
$('.parsleyVal').parsley().destroy();
})
Script removes class to hide error message and destroy parsley validation, which will be triggered again on sign-up button click.
You can control what triggers the validation with two different settings:
data-parsley-trigger
Setting for what triggers the validation the first time. The default is null which basly means on submit
data-parsley-trigger-after-failure
Setting for what triggers a revalidation after the first failure. The default is input which means that the field will be revalidated after each change on the field.
The setting you need is: data-parsley-trigger-after-failure
Example:
<input type="email" id="profile-email"
data-parsley-required="true"
data-parsley-trigger-after-failure="submit"/>

How to track the change when the browser autofills a password in a form after you type the username

How to track an Autofill event in a form?
e.g. I Have a simple form with username, password and submit button.
<form method="post" action="index.php">
user: <input type="text" name="user" id="user" />
pass: <input type="password" name="pass" id="pass" />
<input type="submit" value="Login" />
</form>
now in JS (jQuery)
<script>
$("#pass").change(function(){
alert(1);
});
$("#pass").blur(function(){
alert(1);
});
$("#pass").keyup(function(){
alert(1);
});
$("#pass").paste(function(){
alert(1);
});
$("#pass").focus(function(){
alert(1);
});
</script>
All the events above are never triggered when the browsers remembers the form data (user and pass) and you type the user name and the browser auto-fills the password,
I want to trigger this change how do I without using timers or on blur/change event on the "User" input?
I suppose you could do it with a workaround: After every onkeypress event of the username field store the value of the password field. Then onblur of the username field, check if the value of the password field has changed.
set timer to check if the field filled or not
edit: was not very attentive, have not noticed the last sentence, but only timer can be used

Categories

Resources