Script to automate the passing credentials to next page - javascript

I have one URL which asks me to " click here to login" then the next page loads.
once the next page loads I need to pass the credential. tried below script but didn't work
document.getElementsByClassName('click_hereTo_login')[0].click();
$( document ).ready(function()
{ if document.location.href=="https://example.com/secondpage"
then {
document.getElementById('id').value="12322";
document.getElementById('password').value="4444";
document.getElementsByClassName('login')[0].click();
}})

First of all your if is not written correctly. It should be:
if (document.location.href=="https://example.com/secondpage"){
document.getElementById('id').value="12322";
document.getElementById('password').value="4444";
document.getElementsByClassName('login')[0].click();
}
The another problem here is, that your script runs from scratch on both pages. If you want to pass data from page to page without backend, you can use either query string or localstorage to store the data somewhere and then access it from another page.
let id = localStorage.getItem('id');
// get the input element
let idInput = document.getElementById('id');
// check if we are one second page
if(idInput) {
document.getElementById('id').value = id;
}
// Save id on login click
document.querySelector('.login').addEventListener('click', () => {
localStorage.setItem('id', 1234);
});

Related

how to pass "id" as a path variable via url from first page to second page and assign to a variable

I need to pass the id of html card (when I click on it) to second page via URL as a path variable using JavaScript.
currently, the URL is like this : www.xyz.com/page2.html?id=2
but I need to do the same function by sending the id as a path variable to second page like this
www.xyz.com/page2.html/2
and assign that id to a variable in the second page. I need to do this using JavaScript or jQuery
Please someone help me to solve this issue.
You can use jQuery to redirect the user to another page.
let's say
//cardID is the class value of the HTML card or we can use some other selector
$( ".cardID" ).on( "click", function() {
var cardID = $(this).attr('id');
window.location.replace("www.xyz.com/page2.html/"+cardID);
});
And on another page...
var url = window.location;
var urlAux = url.split('/');
var cardID = urlAux[2]

How to sent data to server, remove parameter from url and reload window with new url Javascript, jQuery and PHP

I am currently stuck with a problem I can't seem to find a decent solution for.
Problem:
I have written some code that will send 2 parameters to an action within a PHP script through a url. I need these parameters sent to the action no matter what. However, after the parameters are sent, I need to remove one of said parameters from the URL and then reload the page with said new URL.
I hope I could give you a clear description of my problem. Following is the code I have written so far.
jQuery(document).ready(function() {
// Define array with the dashboard id and title as key => value pairs.
var dashboardArray = <?php echo json_encode(CHtml::listData($dashboards, 'iddashboard', 'title')); ?>;
// Loop through the elements in the dashboardArray and then create option elements to be added to the above create select element.
for (var idDashboard in dashboardArray) {
$('#idDashboards').append($(document.createElement('option')).prop({
value: idDashboard,
text: dashboardArray[idDashboard].charAt(0).toUpperCase() + dashboardArray[idDashboard].slice(1)
}));
};
// Get arg01 from the server.
var arg01 = <?php echo json_encode($arg01); ?>;
// Prepare URL variable and spike it with arg01 to be sent back to the server.
var url = 'Path/To/action/Index/index&arg01='+arg01;
// Button change and function tied to it. Instead of an ajax request, we reload the page completely.
$("#idDashboards").change(function() {
// Define dashboardIndex. The -1 stands for the option tag that has already been created.
var dashboardIndex = $(this).prop('selectedIndex')-1;
// Sent parameters to actionIndex in Controller and remove dashboardIndex after the request was successful.
if (url.includes(arg01)) {
window.location.href = url+"&dashboardIndex="+dashboardIndex;
console.log("Yes i was here");
}
// window.location.href = url; <---- Here is where the problem begins.
});
});

Getting the value of # from a url

I have a problem. i have a website am working on. I have created a php script to fetch all the receipts id from the data base using pagination, and all works fine. But the problem is every receipt id, i have added a link so as when clicked a specified results will be displayed without loading the page.
The links are like :
G145252 G785965 and when each link is clicked will show http://test.com/?go=any#G145252
When clicked the page will not reload.
So what i need help with is how can i get G145252 from the url after when the link is clicked using javascript and print it using html?
i need to pass the value to the process.php as a $GET value so the i can load the receipt detail of the clicked id with out reloading the page.
Please note: there are a lot of get values before the #value i need to get out of the url address.
You should not be using the fragment identifier section of the URI for server side related tasks. This section is intended for client-side manipulation only. More info here.
You can use some other means such as query parameters to access this data.
For example, turn this:
http://test.com/enter code here?go=any#G145252
Into this:
http://test.com?go=any&hash=G145252
Then:
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
console.log(getQueryVariable("go")); // any
console.log(getQueryVariable("hash")); // G145252
NOTE: I know this is not the exact answer to your actual problem, but the question itself is presenting a bad practice scenario, thus my suggestion.
Credits for the getQueryVariable function goes to CSS Tricks: https://css-tricks.com/snippets/javascript/get-url-variables/?test=3&test2=5
Let's assume you're using jQuery.
Change all your links so that they have a common class name, lets say 'hashClick' e.g
My Link
To get the hash part when clicked, add a click event handler for those links
$('.hashClick').click( function(event) {
event.preventDefault();
var url = $(this).attr('href');
var hash = url.substring(url.indexOf('#')+1);
alert("You clicked " + hash);
// or at this point you can do an AJAX call
// or GET request to process.php with hash as one of the parameters
})
suppose this is the link
http://test.com/?go=any#G145252
to get the hash value
window.location.hash
which will return you #G145252
and
window.location.hash.substring(1) will return you "G145252"

why it says that my var is undefined

I can't understand why this doesn't work: it should take the text of ("#name") and write in another html page that I open on click on the button, but when I open the other page it says that the "username" is undefined, how can I pass the value of that?
username = [];
$("#main_page").ready(function() {
$("#name").focus();
$("#name").keydown(function(e) {
if (e.which === 13) {
console.log("ok");
$('#login').click();
}
});
$("#login").click(function() {
username[0] = $("#name").val();
console.log(username);
window.location.replace("chat");
});
});
$("#chat").ready(function(){
console.log(username[0] + " recived");
$("#username_title").append(username[0]);
});
Is it wrong to use $('#chat').ready? Because it runs the code filled in it in the main_page too.
In the two file html i gave an id to the body for use .ready, but I think it's wrong
You could put "username" in a cookie, and get "username" from the cookie in the next page "chat". You also could use localStorage or sessionStorage instead of cookie.
Its all about page load and page unload
the scope of a variable is just inside these events means that no jq js or any web code(client side) will work before or after that
Means you cant write a code and expect it to work even after page reload its a whole new start then although you can pass the username as a querystring and fetch it after page is reloaded

I have a query with upload real time data to load in div without refresh in jquery

I am making a chat function, in which I have put the chat records with while loop but I want to get new records with out refresh the div at the real time.
But If no record is updated new so div doesn't refresh because of scroll force me to bottom.
Use this (I guess u have php installed, you use a PHP page):
var ajaxurl = "updatepage.php(CORRECT URL HERE)";
var data = {};
data["CurBox"] = document.getElementById(IDOFCHATBOX).innerHTML
$.post(ajaxurl, data
, function (response) {
func(response);
});
and make sure you run checks on that the current chatbox is not already the same as when it would be updated! :)
use the post method inside the refreshscript to get the current chatbox contents

Categories