I have a button on one html page, but when clicked I want it to activate a different button on a different html page. Is this possible?
This is only possible if the first page actually generates the second page (via window.open()). Otherwise, you won't have any way to access the document in the other window.
Here's an example:
var newWin = window.open("other page in my domain");
var otherButton = newWin.document.querySelector("selector to find button");
otherButton.click();
This solution will work though, but it requires passing a value from one page to another. It cannot link pages together. If you want that look into websockets.
Page 1
HTML
<button id="activate">Activate other page</button>
JavaScript
document.querySelector("#activate").addEventListener("click", function(){
location.href = "page2.html?button=activate"; //mind the querystring here.
});
Page 2
HTML
<button id="toactivate" disabled>disabled button</button>
JavaScript
var activateButton = location.search.slice(1); //querystring | get rid of the ?
activateButton.split(/&/);
activateButton.forEach(function(value){
var splitted = value.split("=");
if (splitted[0] == "button" && splitted[1] == "activate")
{
document.querySelector("#toactivate").removeAttribute("disabled");
}
});
Related
Im trying display the count of the childnode in the html page, is there anyway I can display the count without using button onclick function, html page:
<span id="demo"></span> <button type ="button"onclick ="test()">click</button>
function getCount(){
var nodeToCount = document.getElementById("overall-page");
var questionCount = document.getElementsByClassName("survey-form");
document.getElementById("demo").innerHTML = questionCount.length;
console.log(questionCount.length);
}
There are many events you can use...
https://www.w3schools.com/js/js_events.asp
What do you want to achieve? it could run on window load? mouse hover over the area?
I am attempting to manipulate the hyperlink of a button and I'm getting nowhere with this and not sure where I am going wrong.
The Code:
<link rel="stylesheet" href="https://cdn.site.td/Calendar.css">
<script type="text/javascript" src="https://cdn.site.td/Calendar.js"></script>
<div id="the-calendar"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var options = {
fullNames : false
};
var myCalendar = new Calendar(document.getElementById('the-calendar'), options);
});
</script>
This generates an event calendar that is loaded on a separate website. It works perfectly when loading it on a separate domain except for one thing. There is a more info button for events and when you click that it attempts to go to:
/folder/folder/folder/event-name-1
So of course, when I generate it on a separate domain it attempts that same folder path except with the current domain. Therefore it goes nowhere since the folders are not the same on both domains.
I want to add an onClick event to the button to manipulate the path of the hyperlink.
The button is:
<button class="calendar-icon-info-action">More info</button>
Keep in mind this button is not generated until the initial script above loads and populates the page with the HTML for the calendar.
So once the calendar is loaded, I need each more info link for each event to be manipulated to add the original domain path. I would need a variable to store the original path because that will not change too.
So to recap more info leads generates:
/folder/folder/folder/event-name-1
I want this stored in a variable and then another var for the domain stored together so it becomes something like this:
var a = "domain.tld";
var b = "/folder/folder/folder/event-name-1";
var c = a + b;
document.getElementsByClassName("calendar-icon-info-action")[0].addEventListener("click", function(){
document.getElementsByClassName("calendar-icon-info-action")[0].href = var c;
});
The href attribute is applicable only for a tags (links). Since you have a <button>, what you could do is intercept and block the original event, and redirect the page to the desired URL.
Something like this:
document.getElementsByClassName("calendar-icon-info-action")[0].addEventListener("click", function(event){
// This will stop the original event:
event.preventDefault();
// This will open your desired URL:
window.location.href = c
});
If you have multiple buttons and want to update the event of all of them, you could loop the buttons:
document.querySelectorAll(".calendar-icon-info-action").forEach((elem) => elem.addEventListener("click", function(event){
event.preventDefault();
window.location.href = c;
}))
For future reference, if you had links instead of buttons, and wanted to change the href attribute, the proper way to do is:
document.getElementsByClassName("calendar-icon-info-action")[0].setAttribute('href', 'your-url-here')
In my main html page, I have the following code:
<p class="text" id="time">00:00</p>
In my other html page, I have the following code:
<button onclick="resettime()">RESET TIME</button>
They both link to the same javascript page, which has the code:
function timeIncrement()
{
document.getElementById('time').innerHTML = +mins+":"+secs;
if(secs==60)
{
mins+=1;
secs = 0;
}
}
var timecheck = setInterval(timeIncrement,1000);
function resettime()
{
clearInterval(timecheck);
mins = 0;
secs = 0;
timecheck = setInterval(timeIncrement,1000);
}
Clicking the button doesn't reset the time to 0:0, so it doesn't work, so I was wondering if there's any way I can do this without going into php. I'm new to html/js, so sorry if this is a repeat, couldn't find a similar one.
Two html means two windows. if you want to execute script from one window to another window, you should have the other window's object and both window should have document.domain. for having reference of another window
in main html add the followingÂ
<script>window.open("other.html");//other html will open automatically</script>
in other html, change the code to following
<button onclick="resettimeinMainHtml()">RESET TIME</button>
<script>function resettimeinMainHtml(){window.opener.resettime();// will reset in mail html}</script>
Just like the question says, I'm trying to clear a form from a modal window while the modal stays up. I've tried:
if (myDocument.title == "Modal Window") {
parent.document.getElementById("textbox")
}
(I need it to do more than 1 tb, but used that just to try to get there. No luck.
It is contained within an iFrame, so I tried:
if (myDocument.title == "Modal Window") {
var ifr = document.getElementById("iFrame")
var form = ifr.document.getElementById("form")
ClearForm(form)
}
The ClearForm(form) function I stole from another Stack Overflow answer:
function ClearForm(form) {
$(':input', form).each(function () {
var type = this.type;
var id = this.id;
if (type == 'text' && id != 'text2')
this.value = "";
});
}
That 'text2' is one specific tb that we need to remain populated.
Any idea what I'm missing? I've been plagued with this bug for weeks.
I expect your issue is that the form is within an iFrame - most browsers won't allow you to modify elements within an iFrame, from the parent page, if they aren't from the same origin (or if the server is set up to deny it, or if you're looking at the page locally... see here for more details)
To double-check, try moving the form markup into the same page as the modal is in and run your function ClearFormfrom there. I expect that you'll then find it works.
Your only way around this would be to include the ClearForm function within the iFrame'd page, and then trigger it from the parent.
I have a web page with a jQuery lightbox that opens automatically on page load. In the lightbox I have implemented the Facebook Like button (this is a 2 click solution for Facebook Like button in email). Now, when a Facebook user visits my web page by clicking on the "Liked" URL on Facebook I want to turn off the lightbox. I don't want to have to create two different pages (one with lightbox turned on and another turned off) and I think I can avoid this by adding a parameter to the URL with Javascript then turn the lightbox on/off based on that parameter. Is this a safe way to do this? How would I do this?
You can get URL params with this JS function that I found here:
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
Then *add use ?lightbox=1 e.g www.example.com?lightbox=1 and read it with the above function:
if(getUrlVars()["lightbox"]=="1"){
//...
}
*to add parameters you can either:
Change the a link href attribute element.href = "http://www.newURL.com?param=1"; and wait for the user to click them
Redirect to the new location window.location.href = "http://www.newURL.com?param=1";
I believe this is the rough code you're after:
<script type="text/javascript">
document.location="http://example.com/index.php?noLightBox=1";
</script>
Then on index.php, you'd want something such as:
<?php
function isset_or(&$check, $alternate = NULL)
{
return (isset($check)) ? (empty($check) ? $alternate : $check) : $alternate;
}
function getGETPOST($var)
{
return isset_or($_GET[$var],isset_or($_POST[$var],"Empty"));
}
?>
Example:
if(getGETPOST('noLightBox') != 1) {
// Code to display the light box comes here.
}
// Else normal page code
Hope this was helpful!
Source: http://php.net/manual/en/function.isset.php
& W3School's tutorials on PHP