I am trying to run a script that automatically navigates from one website to another upon button click, enters text into a form field and clicks a button on the second website. However, the script is not working as intended and is not entering the text or clicking the button.
button.addEventListener("click", function() {
setTimeout(() => {
// Attempts to find the form element with the name attribute "url" and enters the text "Test"
var urlInput = document.getElementsByName("url")[0];
if(urlInput) {
urlInput.value = "Test";
}
// Attempts to find the element with the class "submit" and clicks it
var submitBtn = document.getElementsByClassName("submit")[0];
if(submitBtn) {
submitBtn.click();
}
}, 3000);
});
I have added a setTimeout of 3 seconds to ensure that the website has sufficient time to load before attempting to access the form elements.
Also, I have added a check to see if the form element and the button are found and trying to access them only if they are found.
Related
Below given is my onclick event handler which is triggered to search images of the movie when I enter the movie name in the search bar, thus the input value here is a movie name. The function used to get the movie images is TopMovies() function through API.
const SearchButton =document.querySelector('#search');
const InputValue = document.querySelector('#input_value');
SearchButton.onclick = function(event){
event.preventDefault();
const value = InputValue.value;
console.log(value);
const newUrl =multi_search + '&query=' +value;
function TopMovies(searched_movies){
const sectionOfMovies = document.createElement('div');
sectionOfMovies.classList.add('search_movie_section');
sectionOfMovies.setAttribute('class','search_movie_section')
searched_movies.map((searched_movie)=>{
const img= document.createElement('img');
const a= document.createElement('a');
img.src= image_url + searched_movie.poster_path;
a.appendChild(img);
sectionOfMovies.appendChild(a);
});
return sectionOfMovies;
}
fetch(newUrl) // fetching the images through API
.then((res)=>res.json())
.then((movie_data)=>{
const searched_movies= movie_data.results;
const Poster_Block = TopMovies(searched_movies);
topMovies.append(Poster_Block)
console.log('movies',movie_data);
InputValue.value='';
})
.catch((error)=>{
console.log('err',error)
})
}
All the above code is dumped into this SearchButton.onclick = function(event)
Now the issue I am facing is that if I search for a movie by clicking on the search button 1st time, I am getting the images for that movie 1 time. if I click on the search button 2nd time. Similarly, if I click on the search button 3rd-time total images are fetched 3 for the same input value. In short, the images are fetched as many times I click on the search button for the same input value.
For eg:- If I search for the movie Lion king and click on the search button 2 times, the images are fetched 2 times. So how can I fetch the movie image one time even though I click on the search button 2 times or more with the same input value "Lion king"?.
How can I stop fetching images multiple times?
According to me the images are fetched multiple times for the same input value is because I have dumped all my code in SearchButton.onclick=function(event) thus images are fetched every time when I click on the search button.
Help would be appreciated!!
One simple solution is to disable the button, once you clicked and enable the button once its response status is 200 or something error. Note: clear the HTML for the div before you append, else it will append twice.
Disable the button onClick of it and re-enable it after getting a response.
Remember to clear the div element onClick of the 'search' button.
So that the element will only have new results.
I have a website that has a bunch of forms embedded on it on different pages. I need to be able to detect keystrokes within input tags inside of those iframes, then make sure that if keystrokes were detected and a user attempts to leave the page, they are stopped & prompted so that they don't lose data that they had input into the form.
I had it working when a certain element on the page had a certain class, which works ok, but it often times would pop up when a user was just on a page & had the iframe loaded, but I need it to only happen if a user has typed in the iframe.
I tried the following but it isn't working for me.
notifyTab = false;
$('#notify', $('iframe.wufoo-form-container').contents()).on('keyup', function(e) {
notifyTab = true;
console.log(notifyTab);
});
jQuery(window.addEventListener('beforeunload', function (e) {
if(notifyTab == true){
console.log('true - run jq event');
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = 'Your Notify Form is open! Make sure you clicked "Submit", otherwise you may lose your message!';
}
}));
I am trying to click a button in HtmlUnit to login to a site (m.pge.com) but it is not working. The browser stays on same page. I had similar issue with another site. I tried searching but didn't get a definitive answer.
Any ideas what I might be doing wrong ?
Here is code..
Web_Client = new WebClient(BrowserVersion.CHROME);
Web_Client.getOptions().setCssEnabled(false);
Web_Client.getOptions().setThrowExceptionOnScriptError(false);
Web_Client.setJavaScriptTimeout(15000);
Web_Client.getOptions().setRedirectEnabled(true);
//Web_Client.setAjaxController(new NicelyResynchronizingAjaxController());
// load home page
HtmlPage page = Web_Client.getPage("https://m.pge.com/#login");
HtmlTextInput userName = loginForm.getFirstByXPath("//*[#id=\"usernameField\"]");
HtmlPasswordInput passWord = loginForm.getFirstByXPath("//*[#id=\"passwordField\"]");
userName.setValueAttribute(user);
passWord.setValueAttribute(password);
HtmlButton button = null;
DomNodeList<DomElement> buttonList = page.getElementsByTagName("button");
for (Iterator buttonIter = buttonList.iterator(); buttonIter.hasNext();) {
DomElement domElement = (DomElement) buttonIter.next();
if(domElement.asText().equals("SIGN IN")) {
button = (HtmlButton)domElement;
}
}
loginpage = button.click();
It is too tedious and unclear to type in comment so i type it as answer and will update with progress.
Part1: login
The first thing is that are you sure you target the button correctly and where did you initialize the HtmlPage loginpage. Normally, when you assign
loginpage = button.click();
It will get you the login page,but sometimes it is weird that it doesn't assign new page but rather change the current page. that is your
page
You may try to print it out before button click and after button click to see if this page changes? that is
System.out.println(page.asText());
button.click(); // no need to assign page, if the page changes itself
System.out.println(page.asText());
Part2: Search
When you have done input textbox and button click, you will have to target the changes element after search again and get its content, for example, if it is a element, you should probably target the element after button click and get the content you want afterwards. If you target it before button click, the content in that element won't changes itself, you need to get that again.
I inherited VScript code that will create a web service redirect button based on logged in user; if the user is not found the button is not created and error text is displayed, I was asked to set up onload javascript function to automatically click the button-that i did.I need to check if the button exists first before i click it.What is the best way to do check if the button exist onload in javascript?
Thnaks
This should work fine:
var button = document.getElementById("the button's id");
window.onload = function() {
if (button != null) {
// your code
}
}
Hey guys, I am showing a javascript dialog box to user using window.onbeforeunload to handle if user clicks back button.
My code is working to a point, but I am struggling to redirect the user if they click 'Leave this page' (Message varies in different browsers).
// Set check var false to begin with
// This is set true on submit btns using onclick event
submitFormOkay = false;
// If we are on check-availability page
if( window.location.href.indexOf( 'check-availability' ) != -1 )
{
// If back button is clicked
window.onbeforeunload = function()
{
// Only show dialog if submit btn wasn't clicked
if (!submitFormOkay)
{
// Show dialog
return "Use of the browser back button will lose form data.\nPlease use the 'Previous' button at the bottom of the form.";
// If 'leave' this page was clicked'
// do 'window.location = window.location'
}
}
}
Thanks in advance.
David
If they click "Leave this page" then the browser will complete whatever action the user was trying to perform before the dialog popped up.
But if they do navigate Back, they will still be on your site, right? So you can just do whatever you need to do when that page is re-requested (providing it's not cached).
In other words ... detect on server-side if the user has clicked Back, and then do whatever you would have done if they had clicked Previous.