[edited] I'm trying to include an email signup box on my website with Parse on the backend.
Problem: The email ids entered aren't getting saved into the Parse database.
here's the HTML with corresponding JS. I'm still learning JS so I might have picked up some code from here and there.
<form id="signup-form" class="align-center">
<div class="form-group align-center" style="width: 90%;">
<input type="text" class="form-control" name="email" id="email" placeholder="get informed when it's online!" style="font-size: 1em; width: 100%; float: left;"/>
<button id="signup-button" class="btn btn-default" style="margin-top: 10px;" >count me in!</button>
</div>
</form>
Javascript:
$(document).ready(function() {
$("#signup-button").click(function() {
Parse.$ = jQuery;
Parse.initialize("n7cfi9v9FErlM13bSC4qb6obHr0c9lSNmEgyBGTB", "NHA6CciUx6xXCvrQwHGTG48D7ggItvUlrYE36mTT");
var SignupList = Parse.Object.extend("signup_list");
var signup = new SignupList();
signup.save({email: $('#email').val()}).then(function(object) {
alert($('#email' + " enrolled in list!").val());
});
});
});
Don't know what I'm doing wrong. Help.
Related
I am storing the username and password in an array(datas),,then after registering and logging in, I am only able to have the username appear in the login page.. How can i make the username appear in all of my html pages?Like storing it in a session variable so i could have the username in all of my other pages. Thank you!
<script>
let datas = [];
const addData = (ev) => {
ev.preventDefault();
let data = {
username: document.getElementById('rusername').value,
password: document.getElementById('rpassword').value
}
datas.push(data);
document.forms[0].reset();
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('register_button').addEventListener('click', addData);
});
function isUserValid(e) {
e.preventDefault();
var username = document.getElementById('lusername').value;
var password = document.getElementById('lpassword').value;
var found_user = datas.find(d => d.username === username && d.password === password);
if (found_user) {
document.getElementsByClassName('loguser')[0].innerHTML = found_user.username;
}
}
document.getElementById("login_button").addEventListener("click", isUserValid);
</script>
<body>
<div class="loguser">
User
</div>
<div class="wrapper">
<div class="login_box">
<div class="login_header">
<img src="images/alimama.png" alt=""> <br> Login or Register!
</div>
<div id="login">
<form action="" method="POST">
<input id="lusername" type="text" name="lusername" placeholder="Username" required>
<br>
<input id="lpassword" type="password" name="lpassword" placeholder="Password">
<br>
<input type="submit" id="login_button" name="login_button" value="Login">
<br>
Need an account? Register here!
</form>
</div>
<div id="register">
<form action="" method="POST">
<input id="rusername" type="text" name="rusername" placeholder="Username" required>
<br>
<input id="rpassword" type="password" name="rpassword" placeholder="Password" required>
<br>
<input id="register_button" type="submit" name="register_button" value="Register">
<br>
Already have an account? Sign in here!
</form>
</div>
</div>
</body>
You can use your browser's localstorage to store the values and retrieve them on other pages. Another option would be to use cookies, but I believe this would be a little more complicated.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Here's the documentation that talks a little more about. I think this will help you =)
An important point is that this will be saved in the user's browser, if you need this data, I recommend using a database
Use localStorage, is really simple. To set the value use this:
window.localStorage.setItem('actualUserName', document.getElementById('lusername').value);
And to retrieve the value use this:
window.localStorage.getItem('actualUserName');
More info: https://developer.mozilla.org/es/docs/Web/API/Window/localStorage
I have the following problem with a page that worked reCAPTCHA v2 and no longer works
For some reason, the $ _POST ['g-recaptcha-response'] arrives empty to the file that validates the data after doing submit in the form
In the user panel of www.google.com/recaptcha/ the web is correctly added, and the keys are verified to be correct.
The point is that when you check the I am not a robot check, the text area g-recaptcha-response should be updated with the code that comes from google, but this code remains blank.
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response"
style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px;
resize: none; display: none;"></textarea>
And this I think is the reason why it arrives empty
the code of my form is
<form action="votaciones.php" method="post" class="form" role="form" id="login">
<div class="form-group">
<label for="user" class="form-label"><?= _("Usuario") ?> : </label>
<input type="text" id="user" name="user" class="form-control" placeholder="<?= _("Usuario") ?> " required autofocus/>
</div>
<div class="form-group">
<label for="user" class="form-label"><?= _("Password") ?> : </label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="<?= _("Password") ?> " required />
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="<?php echo "$reCAPTCHA_site_key"; ?>"></div>
</div>
<div class="form-group">
<div class="text-center">
<button class="btn btn-start-order" type="submit"><?= _("Acceder") ?> </button>
</div>
</div>
</form>
<script src='https://www.google.com/recaptcha/api.js' ></script>
and one of the PHP to which the data arrives is
if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) {
// Google reCAPTCHA API secret key
$secretKey = $reCAPTCHA_secret_key;
// Verify the reCAPTCHA response
$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
// Decode json data
$responseKeys = json_decode($verifyResponse, true);
// should return JSON with success as true
if ($responseKeys["success"]) {
//Captcha correcto
$validoCaptcha = true;
} else {
// eres un robot, asi que terminamos
$validoCaptcha = false;
Header("Location: $url_vot/index.php?error_login=10");
exit;
}
}else{
echo "no llego" .$_POST['g-recaptcha-response'];
}
}
Obviously, it prints"no llego" and it does not show the post because it is empty
I have looked at other similar questions and tried the solutions but they do not solve the problem for me
For layout, I am using bootstrap, although I don't think it influences
Can anybody help me? please
I'm stuck for days and I don't understand why it doesn't update that textarea
I have coded a pretty basic page to collect student information (first name, last name, semester, and course name). The first and last name are input type="text"s and the semester and course name are drop down lists.
I now need to use an external JS file to take the text stored in the inputs and display them under registered course as
"First Name Last Name is registered for the following course:
Semester:
Course:"
This is the html code I wrote
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>University Registration</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div class="headerContainer">
<h1>University Registration System</h1>
</div>
</header>
<form action="" method="get" class="scInfo">
<h3>Student and Course Info:</h3>
<div class="fn">
<p>First Name: </p>
<input type="text" name="fn" id="fn" required>
</div>
<div class="ln">
<p>Last Name: </p>
<input type="text" name="ln" id="ln" required>
</div>
<div></div>
<div class="semester">
<p>Semester: </p>
<select>
<option value="fall">Fall 2019</option>
<option value="spring">Spring 2020</option>
</select>
</div>
<div class="course">
<p>Course Name: </p>
<select>
<option value="365">CIS 365 - Business Database Systems</option>
<option value="425">CIS 425 - Enterprise Web Technologies</option>
</select>
</div>
<div class="button">
<button id="register">Register</button>
</div>
</form>
<h3>Registered Course:</h3>
<div class="nameOutput">
</div>
<div class="semesterOutput">
</div>
<div class="classOutput">
</div>
<script src="script.js"></script>
</body>
</html>
this is the css code I wrote
header h1
{
text-align: center;
padding: 10px;
border-bottom: 1px solid black;
}
form .fn
{
display: inline-block;
padding: 5px;
}
form .ln
{
display: inline-block;
padding: 5px;
}
form .semester
{
display: inline-block;
padding: 5px;
}
form .course
{
display: inline-block;
padding: 5px;
}
form .button
{
padding: 5px
}
No need to show the CSS file, as it's not relevant here. This entirely depends on what backend you are using, because you need to get the user to register successfully first, before you output anything onto the screen.
One way to do this, is if you're using a backend API (also you need a POST method, not GET):
<form id="registerForm">
...
<input type="submit" value="registerBtn" name="Register" role="button" id="registerBtn">Register Now</button>
In your javascript file, you can use an event handler to get the data, send it to your backend API to register the user, and if you get a 200 status code or any equivalent success code, you can display the info back to the user
In your javascript file:
const registerForm = document.querySelector("#registerForm")
registerForm.addEventListener("submit", (e) => {
e.preventDefault(); //prevent form from resetting the page
// grab the input values, and use a request package like axios or javascript's native xmlhttprequest to send the data
});
If you want to extract the value from the form itself, then follow the code below.
I have made some changes to your div and select as well.
const form = document.getElementById('registerForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
let full_name = document.getElementById('fn').value + ' ' + document.getElementById('ln').value;
let name = document.getElementsByClassName('nameOutput')[0];
name.innerHTML = full_name + 'is registered for the following course';
let sem = document.getElementById('semester');
val_sem = sem.options[sem.selectedIndex].text;
let semester = document.getElementsByClassName('semesterOutput')[0];
semester.innerHTML = val_sem;
let cls = document.getElementById('course');
val_cls = cls.options[cls.selectedIndex].text;
let classOutput = document.getElementsByClassName('classOutput')[0];
classOutput.innerHTML = val_cls;
});
<header>
<div class="headerContainer">
<h1>University Registration System</h1>
</div>
</header>
<form action="" method="get" class="scInfo" id="registerForm">
<h3>Student and Course Info:</h3>
<div class="fn">
<p>First Name: </p>
<input type="text" name="fn" id="fn" required>
</div>
<div class="ln">
<p>Last Name: </p>
<input type="text" name="ln" id="ln" required>
</div>
<div></div>
<div class="semester">
<p>Semester: </p>
<select id="semester">
<option value="fall">Fall 2019</option>
<option value="spring">Spring 2020</option>
</select>
</div>
<div class="course">
<p>Course Name: </p>
<select id="course">
<option value="365">CIS 365 - Business Database Systems</option>
<option value="425">CIS 425 - Enterprise Web Technologies</option>
</select>
</div>
<div class="button">
<button id="register">Register</button>
</div>
</form>
<h3>Registered Course:</h3>
<div class="nameOutput">
</div>
<div class="semesterOutput">
</div>
<div class="classOutput">
</div>
I could not insert a external js into the code snippet.But you can just copy the below js into a file and call the file below the same way you have done in your code above.
The output will be displayed when the form will be submitted.There are even better ways to do this, but this is the basic way to achieve it, and also if you are new this will give you some understanding of selectors as well.
Make sure you go through the js code.
Hope this helps
Thanks
Imagine a webscraper, scraping websites looking for emails and contact information. Below I have included how I present my email to visitors, please give me your thoughts on why or why not this would work?
<button id="reqBtn" type = "button" class = "btn btn-success btn-lg" onclick="showEmail()">
Request
</button>
<script type="text/javascript">
function showEmail(){
var array = ['t#','m.com'];
document.getElementById('reqBtn').innerHTML = 'suppor'+array[0]+'mydomai'+array[1];
}
</script>
This presents a button on my webpage, after the 'Request' button is clicked, it will display the email. My logic behind this is that since I am storing the '.com' and '#' part of the email in an array, that the HTML scraper would not be able to put the pieces together to find the email along with the user action of pressing the button first. Is this effective?
<button id="reqBtn" type="button" class="btn btn-success btn-lg" onclick="showEmail()">Request</button>
<script type="text/javascript">
function showEmail(){
var email = window.atob('dEBtLmNvbQ==');
document.getElementById('reqBtn').innerHTML=email;
}
</script>
You can use the window.atob() method.
According to MDN:
The WindowOrWorkerGlobalScope.atob() function decodes a string of data which has been encoded using base-64 encoding. You can use the btoa() method to encode and transmit data which may otherwise cause communication problems, then transmit it and use the atob() method to decode the data again.
So if your email is t#m.com, you can encode it firsthand using .btoa() and then grab the output:
window.btoa('t#m.com')
// result: "dEBtLmNvbQ=="`
and in your code you can use the .atob() method:
<button id="reqBtn" type="button" class="btn btn-success btn-lg" onclick="showEmail()">
Request
</button>
<script type="text/javascript">
function showEmail(){
var email = window.atob('dEBtLmNvbQ==');
document.getElementById('reqBtn').innerHTML=email;
}
</script>
I think using an inquiry form is much easier. You have to use HTML code though. Below is the standard code for a Inquiry box on a site. For more information, I recommend looking into link. It has more detail into the process. There are many ways to hide your email, do not assume that javascripting with arrays!!! is the only way to do so.
<form id="contact_form" action="#" method="POST" enctype="multipart/form-
data">
<div class="row">
<label for="name">Your name:</label><br />
<input id="name" class="input" name="name" type="text" value=""
size="30" /><br />
</div>
<div class="row">
<label for="email">Your email:</label><br />
<input id="email" class="input" name="email" type="text" value=""
size="30" /><br />
</div>
<div class="row">
<label for="message">Your message:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30">
</textarea><br />
</div>
<input id="submit_button" type="submit" value="Send email" />
</form>
I am having a problem with using 'enter button' on the keyboard with an angular js login form. I know this question is asked before but I believe that my problem is a bit different because I tried almost everything written on the stackoverflow questions.
So, I just want to be able to hit enter and submit the form with only using the enter key on keyboard.
Here is login html:
<!-- BEGIN LOGIN FORM -->
<form ng-submit="loginCtrl.login()" class="login-form">
<h3 class="form-title">Sign In</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Username</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Company/username"
ng-model="loginCtrl.username" name="username"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password"
ng-model="loginCtrl.password" name="password"/>
</div>
<div class="form-actions">
<input type="submit" class="btn btn-success uppercase" value="Login">
</div>
</form>
<!-- END LOGIN FORM -->
and here is my login:
self.login = function() {
var result = self.username.split("/");
var account = result[0];
var userId = result[1];
UserService.login(userId, self.password,account).then(function(user) {
self.userAccount = user;
$state.go('home');
}, function(err) {
alert("Authentication failure: Please check your credentials. ")
});
I get user name as "companyName/Username" so it is like:
amazon/bigboby
I'm pretty sure your problem is caused by this <button> tag:
<button class="close" data-close="alert"></button>
The answer is found in the documentation:
You can use one of the following two ways to specify what javascript method should be called when a form is submitted:
ngSubmit directive on the form element
ngClick directive on the first button or input field of type submit (input[type=submit])
Note the comment about how it looks for an ng-click handler on the first button. When you are pressing ENTER to submit the form, Angular looks at the form and sees that button. It would execute the ng-click handler on that button (if it had one).
If you include the type attribute on the button, you can prevent that and let it find the actual submit button:
<button type="button" class="close" data-close="alert"></button>