Develop Reference

JavaScript A variable assigning itself to itself is causing problems in my code when I run it

I am working on an assignment for class, and the instructor has informed us, here is a book, here is a website, I want you to do this by this date and if you fail its not my fault. I have looked in the website, the book, and several places on stackOverflow but I don't think I've seen a problem like this come up that's been explained well enough for me to troubleshoot my way out of it in time for the turn in on Wednesday at noon (UTC -5).
I have a mockup of a registration form as an HTML page (not even HTML5, please don't ask) Here is the code for that.
function bucc_registration()
{
//THE FOLLOWING ALERT IS FOR TROUBLESHOOTING PURPOSES ONLY
//alert("inside BucC_Registration()");
//GET THE VALUES FROM THE FORM AND STORE IN THE VARIABLES FOR VALIDATION
var fullName = document.getElementById("buccFName").value;
var eMail = document.getElementById("buccEMail").value;
var phone = document.getElementById("buccPhone").value;
var pass = document.getElementById("buccPass").value;
var passConf = document.getElementById("buccPassConf").value;
//CLEAR OUT ALL OLD MESSAGES AND ERRORS
document.getElementById("error1").innerHTML = "";
document.getElementById("error2").innerHTML = "";
document.getElementById("error3").innerHTML = "";
document.getElementById("error4").innerHTML = "";
document.getElementById("error5").innerHTML = "";
document.getElementById("feedback").innerHTML = "";
//CHECK ALL VALUES FOR NON-BLANK ENTRIES
if (fullName == "" || fullName == null || fullName == fullName)
{
document.getElementById("error1").innerHTML = "Please insert your full name.";
return false;
}
//ONCE THEY BYPASS THE INPUT TEST, THEN THE VALIDATION TESTS CAN BEGIN
//fullName NEEDS NO FURTHER VALIDATION
//eMail NEEDS NO FURTHER VALIDATION
//VALIDATION FOR PHONE NUMBER TO MAKE SURE IT WAS ENTERED IN THE XXX-XXX-XXXX FORMAT AND AS NUMBERS
return false;
}
<section>
<form id="frm1" onsubmit="return bucc_registration()" action="">
<input type="text" name="buccFName" id="buccFName" /> Full Name <font color="red"><b id="error1"> </b></font><br />
<input type="text" name="buccEMail" id="buccEMail" /> Email <font color="red"><b id="error2"> </b></font><br />
<input type="text" name="buccPhone" id="buccPhone" placeholder="XXX-XXX-XXXX" /> Phone <font color="red"><b id="error3"> </b></font><br />
<input type="text" name="buccPass" id="buccPass" /> Password <font color="red"><b id="error4"> </b></font><br />
<input type="text" name="buccPassConf" id="buccPassConf" /> Password Confirmation <font color="red"><b id="error5"> </b></font><br />
<input type="submit" name="reset" value="Submit"> <input type="reset" name="reset">
</form>
<script src="scripts/BucC_Registration.js" type="text/javascript"></script>
My problem is that when I run the full code in any browser the JavaScript will fill the variables with blank or user data as it is supposed to. I tried to leave the user name blank to make sure that the error message would show up properly and that's when trouble started. It would error out and when I looked into why it wasn't displaying an error it would tell me it was because the variable was holding a value. Essentially var fullName === fullName; (Yes I did check that, it did work)
I don't know why or how. But I'm fairly certain that once I get this sorted out the other 4 variables that are doing this to me (eMail, pass, and passConf) will stop being a problem.
The current problem is this. How do I stop a variable from becoming its own... content? Its almost as if its shadowing and I'm unable to get it to stop on 4 different variables and I didn't do it intentionally.

Show welcome page when correct credentials are entered?

I have this code that logs a user in:
function logUserIn(){
var email = document.getElementById('username').value;
var password = document.getElementById('password').value;
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage)
console.log('didnt log in')
});
};
this is the html:
username:<br>
<input id="username" type="text" name="username" ><br>
password:<br>
<input id="password" type="text" name="password" ><br><br>
<input type="submit" onclick=logUserIn() value="Log in">
<input type="submit" onclick=submitToDatabase() value="Sign Up">
<input type="submit" onclick=getUsers() value="Get Users">
how can I then submit this data using only javascript so if they enter the right credentials it takes them to page such as welcome.html?
I understand I may need to use a form and submitting, but I wasn't sure how this is done in JS alone and not using PHP.
I want it to say Welcome User (user being the email they signed in with)

In order to do this, you need to check for errors, and then proceed to a redirection.
Here is the sample code from Firebase documentation:
// Sign in with email and pass.
// [START authwithemail]
firebase.auth().signInWithEmailAndPassword(email, password)
.then(function(user) {
console.log(user);
// DO YOUR REDIRECTION HERE
}).catch(function(error) {
if(error) throw error;
});
For more informations. The signInWithEmailAndPassword method returns a firebase.Promise.
signInWithEmailAndPassword(email, password) returns firebase.Promise containing non-null firebase.User
You can read more here : https://firebase.google.com/docs/reference/js/firebase.Promise#then
For the redirection you can use Location.replace(). Here is a doc. link : https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
Hope this helps !

Always use onAuthStateChanged() to keep track of the user's login or logout status.
//Handle Account Status
firebase.auth().onAuthStateChanged(user => {
if(user) {
window.location = 'welcome.html'; //If User is logged in, redirect to welcome page
}
});
The above code will make sure that if a user successfully signs in, they are redirected to welcome page.

PHP form submission doesn't work. The $_POST[] variables are undefined

I know I must be doing some small mistake somewhere but its been last 4 hours and I'm still scratching my head as to where is the mistake hence help would be greatly appreciated.
So I've a form in php and I try submitting it to itself. Basically my form is in register.php and it includes register.inc.php file through
include_once 'register.inc.php';
There is another page namely home.php which also includes register.inc.php and does its form processing from there. Though I've different criteria to differentiate from which page is the page register.inc.php called but for clarifications, I'll add codes from both.
Here is my home.php.
<form action = "<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method = "post" name = "key">
Enter the Unique (10 letter) you received to proceed : <input type = "text" name = "key" id = "key"></br>
<input type="submit" value="Submit" /> <?php echo $err; ?>
esc_url() is custom built function and works fine.
Here is my register.php file.
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>"
method="post"
name="registration_form">
Full Name: <input type='text'
name='fullname'
id='fullname' value = "<?php echo $fullname; ?>" disabled/><br>
Email: <input type="text" name="email" id="email" value = "<?php echo $email; ?>" disabled/><br>
Username: <input type='text'
name='username'
id='username' /><br>
Password: <input type="password"
name="password"
id="password"/><br>
Confirm password: <input type="password"
name="confirmpwd"
id="confirmpwd" /><br>
Project Name: <input type="text"
name="project"
id="project" value = "<?php echo $project; ?>" disabled/><br>
Phone Number: <input type="text"
name="phone"
id="phone" value = "<?php echo $phone; ?>" disabled/><br>
<input type="button"
value="Register"
onclick="return regformhash(this.form,
this.form.fullname,
this.form.project,
this.form.phone,
this.form.username,
this.form.email,
this.form.password,
this.form.confirmpwd);" />
</form>
I've a js file named forms.js which does encryption of password in client side before sending it to server. So here is my js file just in case required. (Though it works fine. There is no problem due to it. I've verified it.)
function regformhash(form, uid, , fullname, email, phone, project, password, conf) {
var p = document.createElement("input");
// Add the new element to our form.
form.appendChild(p);
p.name = "p";
p.type = "hidden";
p.value = hex_sha512(password.value);
// Make sure the plaintext password doesn't get sent.
password.value = "";
conf.value = "";
// Finally submit the form.
form.submit();
return true;
}
And finally, here is the code snipet from my register.inc.php file. I think there is some error in this file. I'm posting it in two parts.
The following part is condition used to check if the register.inc.php is called from home.php
if(isset($_POST['key'])) {
//Something....
}
And the following to check if its called from register.php
echo $_POST['username']. $_POST['project']. $_POST['p'];
if (isset($_POST['fullname'], $_POST['project'], $_POST['phone'],$_POST['username'],$_POST['email'], $_POST['p'])) {
// Sanitize and validate the data passed in
echo "12";
//something...
}
I start at home.php. Enter the key. Check weather it exists in database or not. If true, I redirect my user to register.php. There he gets to fill out the form. Some of details like full name, phone, email etc are filled out earlier. Hence those text fields are locked. The user needs to fill out only username and password. After he presses submit, I verify all credentials and if everything checks out I save it in DB. DB work is done in register.inc.php.
But my error is that, though my key verifies out and I get redirected to register.php, but after that when I enter my username & password, is always says :
Undefined index: username
Undefined index: project
Undefined index: p
And the array $_POST[] in register.inc.php(before isset(......)) remains undefined.
I also tried GET method but the same error.
I dont know what I am doing wrong hence help will be greatly appreciated.
Thanks in advance.

woocommerce POSTing data before javascript (jQuery) finishes

i have a custom gateway (which works perfectly), the problem is when a customer buys something for the first time, there is some token than needs to be generated with the card info, the thing is that just before that token is generated, the form tries to submit, but an error is displayed saying that "the object could not be found", so, no refresh and nothing, if i press again the submit button (or "place order" button) everything works!.
i believe that by that second time, the token is generated and in the corresponding hidden field:
here is my code, hope somebody could help me :S
HTML (from the chrome inspector):
<input type="hidden" name="card-name" data-conekta="card[name]">
<input type="hidden" name="exp-month" data-conekta="card[exp_month]">
<input type="hidden" name="exp-year" data-conekta="card[exp_year]">
<input type="hidden" name="conektaTokenId" value="">
<input type="hidden" name="conektaCustId" value="false">
Javascript
jQuery(window).load(function() {
var form;
var first_name;
var last_name;
var cvc;
jQuery('form[name="checkout"]').submit(function(event) {
jQueryform = jQuery(this);
Conekta.setPublishableKey(jQuery('input[name="pbkey"]').val());
console.log('entro');
if( jQuery('input[name="conektaCustId"]').val()=="true" && jQuery('input[name="conektaTokenId"]').val().substr(0,4)!="tok_"){
console.log('entro');
first_name = jQuery('#billing_first_name').val();
last_name = ' ' + jQuery('#billing_last_name').val();
expiry = jQuery('#conekta_card-card-expiry').val().replace(/ /g, '').split("/");
jQuery('input[name="card-name"]').val( first_name + last_name );
jQuery('input[name="exp-month"]').val( Number(expiry[0]));
jQuery('input[name="exp-year"]').val( Number(expiry[1]));
jQueryform.prepend('<span class="card-errors"></span>');
Conekta.token.create(jQueryform, conektaSuccessResponseHandler, conektaErrorResponseHandler);
woocommerce_order_button_html
return false;
}
else{
return;
}
});
var conektaSuccessResponseHandler= function(response){
var token_id = response.id;
jQuery('input[name="conektaTokenId"]').val(token_id);
}
var conektaErrorResponseHandler= function(response){
jQueryform.find('.card-errors').text(response.message);
}
});

i have found the solution, you have to add the class processing to the checkout form and just when you finished procesing your data to be send to wherever you need to (usually wordpress/woocommerce), remove that class so the form can submit the new data.

HTML Form button press twice to open new page

I want to make a simple login using form, i create a form that has input field for user to key in password and then the user press submit button
the password will be retrieved using javascrip, if the password is correct it will open a new page
<script language="javascript">
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.password.value == "nopassword")
{
self.location='main.html'
}
else
{
alert("Wrong Password\nTry again Bak Choy Friend! :)")/*displays error message*/
}
}
</script>
.
.
.
<form>
<input type="text" placeholder="Password" name="password">
<input type="button" class="button" value="Login" onclick="check(this.form)"/>
</form>
But the problem is it requires the user to press twice instead of one before it can open a new page?
the first time, i press the button with the password, the address bar displays
...net/?password=nopassword
then, the 2nd time i press the button with the password, it will redirect me to the new page
may i know how can i solve this problem?

Try this :
<script language="javascript">
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.password.value === "nopassword")
{
self.location = 'main.html';
return true;
}
else
{
alert("Wrong Password\nTry again Bak Choy Friend! :)")/*displays error message*/
return false;
}
}
</script>
<input type="button" class="button" value="Login" onclick="return check(this.form);"/>