Is this is the right way of storing cookie in javascript - javascript

login form code snippet from html file
<form action="/phpScripts/login.php" method="post" onsubmit="getCookie()">
User/E-mail <input id="loginname" type="text" name="uid" class="inpun"><br>
Password <input id="loginpass" type="text" name="pass" class="inppass"><br>
<input type="submit" name="login" value="login" ><br>
</form>
getCookie function code from js file
function getCookie()
{
var user=document.getElementById('loginname').value;
var expires=new Date();
expires.setFullYear(expires.getFullYear()+1);
document.cookie=encodeURIComponent("name")+ "="+encodeURIComponent(user)+ "; expires=" + expires.toTimeString()+ "; domain=.xyz.com";
alert(document.cookie);
}
login.php (form action) do the database query stuff and checks for authentication and if all is well it stores session variables(username in the login form) and redirect to the home page. I want to store username in javascript cookies also so that i can load user specific data like users profile pic from the folders created in the root document directory at the time of registering (signup) for example:-
$(document).ready(function(){
var usr=document.cookie;
/*location=url(data/abc/abc.jpg)*/
location="url(data/" + usr + "/" + usr +".jpg" + ")";
$(div#profilepic).css({'background-image':location, 'width':'180px', 'height': '180px'});
});
please correct me if I am wrong in the jquery code above. Also is there any way to store php $_SESSION data in javascript variable?

Related

How to concatenate url with a variable everytime a login is made

The Wordpress site I'm working on:
http://www.careersroadmap.com/
After submission of a registration form, I have to redirect to this URL:
http://careertest.edumilestones.com/access-login-api.php?
However, during the redirect, I have to pass this variable to the URL:
category=2123&channel_id=371&cd=89&age=371&access_code=accesscodehere
So the final destination URL will be:
http://careertest.edumilestones.com/access-login-api.php?category=2123&channel_id=371&cd=89&age=371&access_code=accesscodehere
The access_code variable will change for each user that logs in.
I tried an AJAX call using the code below:
<script>
var startButton = document.getElementById("startButton");
startButton.addEventListener("click", getApiFunction());
function getApiFunction(){
var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'http://careertest.edumilestones.com/access-login-api.php?category=2123&channel_id=371&cd=89&age=371&access_code=accesscodehere');
myRequest.onload= function(){
var myData = JSON.parse(this.response);
};
myRequest.send();
};
</script>
After trying the above code, I got the CORS policy error.
How do I accomplish this with Javascript or PHP??
I suppose you could add hidden inputs to the registration form.
Something along those lines:
<form action="http://careertest.edumilestones.com/access-login-api.php" method="GET">
<input type="hidden" name="category" value="2123">
<input type="hidden" name="channel_id" value="371">
<input type="hidden" name="cd" value="89">
<input type="hidden" name="age" value="371">
<input type="hidden" name="access_code" value="democodesjam12474">
</form>
A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted.
Read more about it here: https://www.w3schools.com/tags/att_input_type_hidden.asp

How to redirect users based on what they type in an input?

I have a form like this:
<form method="POST">
<input type="url" placeholder="Enter URL Address">
<input type="submit" value="go!">
</form>
And I want users to be redirected to a URL based on what they wrote in the URL input when they click the submit button.Is it possible?
Like this
window.onload=function() {
document.getElementById("form1").onsubmit=function() {
var url = this.url.value;
if (url) location=url;
return false;
}
}
using
<form id="form1">
<input type="url" placeholder="Enter URL Address">
<input type="submit" value="go!">
</form>
You can check out the window.location for this specific case. You can throw any string in there and the browser will redirect to that page.
EDIT:
You do not need a whole form for that. The form is used to send data to the server - the thing you want here is client-sided and does not require a form. You can use a simple input field with a simple button that fires a bit of javascript code.
Yes jane it is possible. You can do that by javascript or php.
example on javascript:
// Put an id on your form and change the id below accordingly
var idForm = 'form';
var form = $('#' + idForm);
form.submit(function(e) {
e.preventDefault();
var redirectTo = form.find('input').val();
switch(redirectTo) {
case "INPUT_VALUE_EXAMPLE":
window.location = 'YOUR URL HERE';
break;
case "google"
window.location = 'http://www.google.com'
break;
}
});

Form not getting submitted using jquery

I am trying to validate user using oAuth 2.0 which works fine and am obtaining user information from google using jquery which I want to send to the next page. So to do that, I am making form programmatically using jQuery and submitting using same. But unfortunately, form is not getting submitted. I have seen various answers on stack-overflow and have tried to implement using that things but none of them is working.
Here is my code..
customButtonRender.js
function onSuccess(googleUser){
console.log('Logged in as '+googleUser.getBasicProfile().getName());
var profile = googleUser.getBasicProfile();
submit_form(profile);
}
var submit_form = function(profile){
console.log(profile.getId());
console.log(profile.getName());
console.log(profile.getImageUrl());
console.log(profile.getEmail());
var user_url = "localhost:8080/NUConnect_JSP/jsp/home.jsp";
var val_form = $('<form data-ajax="false" method="POST" id="val_form" action="' + user_url + '">'+
'<input type="text" name="user_name" value="' + profile.getName() + '">'+
'<input type="text" name="user_email" value="' + profile.getEmail() + '">'+
'<input type="submit" name="user_submit" id="user_submit">'+
'</form>');
$('body').append(val_form);
// $("#val_form").submit();
// $("#val_form")[0].submit();
// $("#user_submit").click();
document.getElementById("val_form").submit();
console.log("After submit");
};
I have included customButtonRender.js file in head section.
As you can see I have tried various methods to submit form written in comments but none of them worked.
All the logs are printed successfully.
Do one thing if your data is not so confidential then pass that information in your url like this
window.location.href = "localhost:8080/NUConnect_JSP/jsp/home.jsp?user_name="+profile.getName()+"&user_email="+ profile.getEmail();

Create mailto from form with custom fields

I have a HTML form with 3 fields (Name, E-Mail and Message) and I want to create a custom mailto with this 3 fields but I don't want create a fixed content like this:
Send a mail
Is this possible? If it isn't, do I have another way to do a simple formulary? My page is a landing page and only have HTML, CSS and some JavaScript (Bootstrap too).
--- Edit ---
I found this, for example: http://www.techrepublic.com/article/set-up-an-html-mailto-form-without-a-back-end-script/
But it write too much information in the body, the result is literal:
Name=Your name
E-mail=mail#company.com
Comment=Testing textarea
Submit=Submit
I can answer myself, after a deep search I could fix my problem.
JavaScript:
function sendMail() {
var name = $('#contact #name').val();
var email = $('#contact #email').val();
var message = $('#contact textarea').val();
window.location.href = 'mailto:mail#company.com?subject=The subject - ' + name + ' (' + email + ')' + '&body=' + message;
};
HTML:
<form>
<input type="text" id="name" name="name" >
<input type="email" id="email" name="email">
<textarea rows="5"></textarea>
</form>
<button type="submit" class="btn btn-primary" onclick="sendMail()">Button Text</button>
We can't use a submit input, because window.location.href doesn't work with it; we need to use a button who will run a function.
And it's all, very simple :)

How to submit form with concatenated URL?

I'm fairly new to the whole Javascript scene. Followed along with those online javascript tutorial things like code academy offers so I'm going by what I learned off of there and what I have read through other tutorials. Read though a few other posts to try and help me but I can't figure it out
So here's my question,
I am trying to take a form input, send it to a javascript file, then the javascript file returns a string which then I wish to reload the frame with. I'm attempting to make a simple chrome extension for me and my friends.
When I click "View Grade!" I get an error:
No webpage was found for the web address: chrome-extension://gcgddggimojbfgpbdmpfkmiofmpinjgb/location.href=getURL(account)?
and I can't determine if my javascript isn't working right or I just don't know how to send to a URL outside the "chromium" (as I call it) world.
This is my html file:
<form action="location.href=getURL('account')">
PSU Account (i.e. xyz123): <input type:"text" id="account">
<input type="submit" value="View Grade!">
</form>
And this is my javascript file:
function getURL(account) {
var psuAccount = document.getElementById(psuAccount);
// I changed strA to the ***.***.*** for this post
var strA = 'https://***.***.***/section/Gradebook/Student/default.aspx?userId=';
var strB = '&reportMode=true';
var newURL = strA + psuAccount + strB);
return(newURL);
}
I think this is exactly what <form>s are for...no need for Javascript for something like this. Try:
<form action="https://***.***.***/section/Gradebook/Student/default.aspx" method="GET">
PSU Account (i.e. xyz123): <input type="text" name="userId" />
<input type="hidden" name="reportMode" value="true" />
<input type="submit" value="View Grade!" />
</form>
The submit mechanism will automatically use the action attribute of the form. Since the method is "GET", it will also add a querystring of key/value pairs for elements in the <form> with a name attribute. So with your form, it will add a key "userId" with the value as the textbox's current value at time of submission. It will also add a key "reportMode" with the value "true". So the final URL that will be submitted is:
https://***.***.***/section/Gradebook/Student/default.aspx?userMode=true&userId=SOME_INPUT_STRING
If you need to use Javascript, try:
<div>
PSU Account (i.e. xyz123): <input type:"text" id="account" />
<input type="button" value="View Grade!" onclick="getURL();" />
</div>
with:
function getURL() {
var psuAccount = document.getElementById("account").value;
var strA = 'https://***.***.***/section/Gradebook/Student/default.aspx?userId=';
var strB = '&reportMode=true';
var newURL = strA + psuAccount + strB;
window.location.href = newURL;
}

Categories