Appreciate your help on what I'm sure is a real basic head-slapper. I'm setting up a simple web front-end so that I can check if an email address is already a subscriber to an existing MailChimp list. For now I'd like to just use basic HTML & JavaScript.
My MailChimp API Key checks out, and I can run queries that only require string data, but the relevant API call requires a struct for email address(es), and I keep getting an error in any variation of the code below. I've gone as far as installing node.js and just running that from the command line and the query does work with the same data, so I'm sure I'm just this close, but need your help to get over the hump.
Here is the relevant snippet of the script and form. As written, I receive the following error message in reply: Validation error: {\"email\":\"Please enter a struct\/associative array\"}"}
<script type="text/javascript">
function collectAndSubmit() {
var emailAddy = document.getElementById("emailAddy").value;
var JSONemail = {"email":
{
"email": emailAddy
}
};
document.getElementById("email").value = JSONemail;
document.getElementById("apikey").value ="M*Y*A*P*I*K*E*Y"
document.testform.submit();
}
</script>
</head>
<body>
<form action="https://us2.api.mailchimp.com/2.0/helper/lists-for-email" method="post" name="testform">
Email Address: <input type="text" id="emailAddy" name="emailAddy" />
<input type="hidden" id="apikey" name="apikey" />
<input type="hidden" id="email" name="email" />
<br>
<input type="button" value="Check Email" onclick="collectAndSubmit()" />
</form>
</body>
</html>
Thanks in advance for your help.
Your form is incorrect. You can take a look at their documentation. You have to setup what they call an email struct which is really an array. Your email input attribute should look like <input type="text" id="email" name="email[email]">.
Notice the email[email] it will make the data look like "email": {"email": "input value"}
Also if your api key is supposed to be a secret then placing it hidden in the html form is not a good idea.
Related
I just want the most effecient way to have a member page with a reset password function.
I can't use PHP or plugins like forminator because I am using wordpress for free. I can only use HTML, Javascript, and CSS.
HTML
<html>
<head>
<style>
</style>
</head>
<body id="body">
<h1> </h1>
<div>
<form>
<div>
<label for="Uname" class="signInLabel">Username</label>
<br>
<br>
<input type="text" name="Uname" placeholder="Enter Username" id="username" class="signInInput" required/>
</div>
<br>
<br>
<br>
<div>
<label for="Pword" class="signInLabel">Password</label>
<br>
<br>
<input type="password" name="Pword" placeholder="Enter Password" id="password" class="singInInput" required/>
</div>
<br>
<button id="signInSubmit" onclick="verify()">Sign-In</button>
</form>
<p id="incorrect Password"></p>
</div>
<script type="text/javascript">
//Sign In Verifacation
function verify () {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var Admin {
FirstName: "Admin",
LastName: "1010",
Fullname: this.FirstName + this.LastName,
Greeting: "Welcome Back" + this.Fullname,
id: 00001,
Username: "Admin",
Password: "1010",
}
//Put the members here
if (username == Admin.Username && password == Admin.Password) {
} else {
document.getElementById('incorrect Password').innerHTML = "Incorrect Password";
}
}
</script>
</body>
Alright then, as you have asked how to "hide the form": wpmudev.com/blog/customize-login-page
And to show logged in user you would still need PHP because that data has to come from the SQLi/Wordpress Database:
If you're using a custom Wordpress Theme (made by yourself): be sure to include:
require_once 'wp-load.php';
And if it's a normal Wordpress installation then you won't need to also include this on top of your page
require_once 'wp-includes/pluggable.php';
I reccomend you to read out the function to see what more this Object has to give you:
var_dump( wp_get_current_user());
but to actually summon a username:
echo wp_get_current_user()->user_login;
But, that would open up a possible security breach since you're exposing their actual username. Once a malicious person find that out, he's once step closer. So instead show the user's 'nice name', which the client themselves can edit to show as a public name, that's why I sugested you check out the var_dump(), in any case:
echo wp_get_current_user()->user_nicename;
To reset the password check out Wordpress's dev guide:
https://developer.wordpress.org/reference/functions/reset_password/
And if you don't succeed after reading the dev website, then please share what you have tried.
To communicate to Wordpress you will need to make use of either the wordpress hooks within the functions.php or make use of the wp_signon()
I can help you out but you need to be willing to make a PHP file, since that is the only way to make it happen.
If you do userlogin by front-end (unless you are using NodeJS or REACT which make use of json files), you will be in for a lot of trouble.
Please make it a habbit to never directly accept user input from the client side (the person browsing your website).
What you can do is have a form within index.php and then redirect to your login.php file on submit (send form) and sanitize all user input before you pass that data to the WordPress function's -> wp_signon().
By using Xamp or Mamp, a quick dive into PHP: https://www.youtube.com/watch?v=ZdP0KM49IVk
This website is very good to start using PHP and then move on to more: https://www.codecademy.com/learn/learn-php
Please do share what your next move will be.
Literally, I want to turn off password saving popup in the browser.
Many answers said that use autoComplete. But I think autoComplete doesnt' work anymore.
I want to know the recent technic for this problem.
Could you recommend some advice for this?
Thank you so much for reading it.
Here's how I do it
On submit:
Save the password from the input field
Clear the password input field
Set the input field to type="text"
handle the form submission using AJAX
This works 100% - but is a little fiddly - though, easy enough
here's how you could handle a bit easier than I described - given you aren't doing any AJAX in your login
<form action="/login" method="post" name="loginform">
<input type="text" name="username" />
<input type="password" name="input_password" />
<input type="hidden" name="password" />
<input type="submit" value="login" />
</form>
document.forms.loginform.addEventListener('submit', function() {
const {
input_password,
password
} = this.elements;
password.value = input_password.value;
input_password.value = '';
input_password.type = 'text';
});
If your login already does some AJAX, then the principal is the same, but you won't need a hidden field
it's not something you can do in your own code, it's a browser behavior, You can only achieve this by changing your browser settings. disable browser password manager
If you want to do it in your code, I think you can try something like, do not give your input element attributes name, id, type common value - do not name them as password, email, etc, to cheat the browser build-in password saving feature.
I have a form that sends the store the First Name of the user in a database. I was checking the information send by the user using regex in php.
To make my project more interactive, I decided to validate the information jQuery before sending it to PHP.
My Project looks like this:
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<body>
<form >
<div>
<label>First Name</label>
<input name="firstname" type="text">
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
<script>
$(document).ready(function() {
$("form").submit(function (e) {
var firstname = $(this).find('input[name="firstname"]').val();
var regex = /^[A-Za-z0-9 \-']+$/;//Only numbers, Letters, dashes, apostrophes and spaces are accepted
if(regex.test(firstname)){
alert('Valid Name.');
}else{
alert('Invalid Name.');
e.PreventDefault();
}
});
});
</script>
Now I have 2 questions:
Is it really need to check the First Name in PHP again before storing the data in the database ? (To improve security)
How can I submit the form right after the alert('Valid Name.'); ?
Thanks for providing your help.
First of all have in mind that the validation of users input is implementing at the server side of an application only!!! You can not validate input data at client side with JS because it can be passed very easy(either by disabling javascript or by using tools like Curl).
However you can increase user experience like validate an input before submitting the form or inform the user that forgot to fill in an input.
To inform the user about a not fill in input you can just use the new html 5 attribute required like above
Username: <input type="text" name="usrname" required>
the required attribute will not let the user submit the form unless he had filled the associated input.
Also you can use the maxlength attribute to address a use case like "A password must have X max letters.
Password: <input type="password" name="pass" maxlength="8" size="8"><br>
How to validate input at server side
There are many techniques for this and you can find all of them here at Stackoverflow. Ι will refer the top voted post How can I prevent SQL injection in PHP? which answer exactly your question.
Just two bullets that compact the above post that i suggest you read otherwise
Always escape your data
Use mysqli instead of mysql
How can I submit the form right after the alert('Valid Name.'); ?
this is very easy just use this code
<form action="action_page.php" method="post">
<div>
<label>First Name</label>
<input name="firstname" type="text">
</div>
<div>
<input type="submit">
</div>
</form>
the above code will "send" user's input for process at action_page.php using POST method, where you can read using $_POST supergloba table like $firstname = $_POST['fistsname'] etc.
TRY This
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js" ></script>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
<body>
<form >
<div>
<label>First Name</label>
<input name="firstname" id="first_name" type="text">
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
<script>
jQuery.validator.addMethod("firstName",function(value,element,param)
{
if(this.optional(element))
{//This is not a 'required' element and the input is empty
return true;
}
if(/^[A-Za-z0-9 \-']+$/.test(value))
{
return true;
}
return false;
},"Please enter a valid First Name");
$(function()
{
$('#myform').validate(
{
rules:
{
first_name:{ required:true, firstName:true }
}
});
});
</script>
Firstly you should ALWAYS validate server side for form submission, especially if you are passing those value along to a DB - SQL injection, the struggle is real.
As for the form submission flow you can...
return true
... after the valid name alert and the form to submit as it normally would.
Since you already have bound to that submit event, It would be even better for the user if you submitted the form via ajax, and providing feedback if the server validation fails. Thus the user never leaves the page and you are able to handle both client and server validation.
Take a look at ParsleyJS - http://parsleyjs.org/ - w00t!
Hi I'm trying to login a user to Box.com from a webpage. I accomplished the first part with a simple HTML form submit:
<form action="https://www.box.com/api/oauth2/authorize" type="POST" enctype="application/x-www-form-urlencoded">
<input type="text" name="response_type" value="code">
<input type="text" name="client_id" value="[REMOVED]">
<input type="text" name="state" value="vexhax97td8xf_SomeTemporaryValueForTesting">
<input type="submit">
</form>
This works fine, and I get the authorization code from the query parameters using javascript. I then try the same thing to get the access code (the auth-code is set by javascript on page load):
<form action="https://app.box.com/api/oauth2/token" type="POST" enctype="application/x-www-form-urlencoded">
<input type="text" name="grant_type" value="authorization_code">
<input id="auth-code" type="text" name="code" value="">
<input type="text" name="client_id" value="[REMOVED]">
<input type="text" name="client_secret" value="[REMOVED]">
<input type="submit">
</form>
But I get an "Invalid grant_type parameter or parameter missing" error. Plus this wouldn't be a good user experience to show the response json anyway. I've tried it without the enctype="application/x-www-form-urlencoded" and get the same error.
The Box tutorial does it with curl which obviously isn't an option on a webpage. How do I get the access token without hitting the "Invalid..." error and is there a way to do this via javascript behind the scenes?
For the authorization-code to access-token exchange, "redirect_uri" parameter is missing. But this is not the real problem.
The exchange is supposed to take place on the server-side and you are doing it on the client-side (browser). Maybe you could do the exchange by AJAX call to correctly handle JSON reply but only if box.com allows CORS (which I doubt).
This way you would also expose your client_id and client_secret on your web page (so why do you hesitate posting it on the stackoverflow?).
So, i'm really new to HTML and javascript, and I want to take values from a form and process them with a script. I have a couple of fields including username, password, and two confirm password fields in HTML. With javascript I want to collect the username, and check if the password field is filled out. If it is, I want to make var ispass equal to 'yespass' or 'nopass'. When I submit the form, I want to go the url http://www.example.com?un=username&pass=yespass (or nopass).
Javascript:
<script language="javascript" type="text/javascript">
function processFormData(){
var user = document.getElementById('username').value;
var pass = document.getElementById('password').value;
var ispass;
if (pass.length > 0){
ispass = "yespass";
}else{
ispass = "nopass";
}
return "http://www.example.com?un=" + user + "&pw=" + ispass;
</script>
HTML:
<form onsubmit="window.location.href=processFormData();">
Please enter your current e-mail address and password below.<br><br>
<input type="text" id="username" placeholder="E-mail Address"><br><br>
<input type="password" id="oldpassword" placeholder="Old Password"><br><br><br>
Please type your new password below:<br><br>
<input type="password" id="newpassword1" placeholder="New Password"><br><br>
<input type="password" id="newpassword2" placeholder="Confirm New Password"><br><br>
<input type="submit" id="gobutton" value="Reset Password"/>
</form>
I cannot figure out a proper way to do this, because this does not seem to be working at all. Any suggestions or recommendations?
You could pull this off with a hidden form field and an onchange event:
<input type="hidden" id="ispass" value="no" onchange="checkPass(this);" />
This input would go in your form. Then on your password field, add an onchange handler:
function checkPass(input) {
document.getElementById("ispass").value = "yes"
};
Also, if you set the method on your form, submitting the form can generate the url based on the form inputs:
<form method='get' action='...' />
Here's a jsfiddle that demonstrates the result.
Also, if you're new to javascript, you may want to look into a library like jQuery to simplify some of your interaction with the page. It's really easy to learn, and there's a great community around it to help with any problems you might run into.
HTH,
Aaron