We Keep Coding

How to make JavaScript Snippets work after page reloads, in Chrome?

Environment: Chrome, a simple Web Portal
I'm trying to do a simple browser automation.
In a HTML table, 1. Clicks the first link, 2. Change the dropdown value and 3. click Submit.
The code after button click is not executed, as the page loads after the button click.
var tbl = document.getElementById("incident_table")
tbl.rows[2].cells[2].getElementsbyClassName("linked")[0].click()
// below code is not executing, as the above click loads the page
document.getElementById("incident.state").selectedIndex = 1
document.getElementById("sysverb_update").click()
I can able to run the last 2 lines of code separately in console, it works.
But when executing as a snippet it didnt

this post is very similar to your question:
preventDefault() on an <a> tag
what you want to do is prevent the default action of the javascript click event.
What you may also do is:
tbl.rows[2].cells[2].getElementsbyClassName("linked")[0].addEventListener('click', ()=>{
preventDefault();
//write here what should happen instead
});
What this will do is prevent the default action "reload site" from happening
Edit:
What i mean in the comment is the following:
if(localStorage.getItem("firstPartComplete") === null){
//do first part
//set completion status in localStorage
localStorage.setItem("firstPartComplete", true);
}else{
// do second part
localStorage.removeItem("firstPartComplete");
}

Gravity Forms Javascript Hook To Fire Script When User is on Specific Page on Multipage Form

I have a multi-page form created with gravity forms. It's form I use for lead generation, with the last step asking for the user's name, email, and phone number.
In the second last step before asking for user's personal info, there is a page with a "loading" gif spinner and the animated text "searching for a quote".
I need help to set up a javascript code for the second last page for when the user is on that page with the loading gif after 6.5 seconds it will automatically click the hidden page next button to take the user to the last page asking for their personal info.
I'm using the code below, which works only when the user manually clicks using the mouse or mousepad and click on the third last page. If the user enters details in the third last page and hits the enter or return key on the keyboard the code doesn't fire.
I'm not too familiar with Javascript. Just getting started learning.
I understand there's a gravity forms javascript gform_page_loaded, but that seems to fire the code on every single page rather than just when the second last page is in the user's viewport. Please help.
SEE CODE BELOW
<script type="text/javascript">
const btnSearchMortgage = document.getElementById("gform_next_button_13_16");
btnSearchMortgage.addEventListener("click", function () {
setTimeout(function () {
document.getElementById("gform_next_button_13_9").click();
}, 6500);
});
</script>

The gform_page_loaded is the way to go. You can use the currentPage parameter it passes to only trigger code on a given form page.
jQuery( document ).on( 'gform_page_loaded', function( event, formId, currentPage ) {
if ( currentPage == 2 ) {
// bind your custom event
}
} );

How to make keyboard disappear on Iphone form with multiple pages

I have a form that is composed of 3 pages. On a iphone I'm trying to get the keyboard to disappear and would also like the page to zoom page to original size when the GO button is pushed.
I tried the following JS function:
$(document).on("keyup", "input", function(event) {
// If enter is pressed then hide keyboard.
if(event.keyCode == 13) {
$("input").blur();
}
});
but that brings me back to the first page. Here's a link to a js fiddle
With the JS function above it works on the first page but on the second page with the function or not when I press GO it goes back to the first page.
That seems like strange behavior. Without the function at all, the GO button, when pressed on the first page brings me to the second page (desired behavior) but when on the second page and the GO button is pressed it looks like it's submitting the form - desired behavior is to either close the keyboard or go to page 3
I'm getting a CSRF verification failed when trying this on the iphone from JS fiddle when on page 2. Any ideas?
When I add debug:true to the validate jquery it works. My understanding is debug:true prevents form submission. How do I do this properly?

<form onsubmit="return false">
seems to do the trick

How do I make the page refresh in Javascript

So I want to make a script like this:
window.location = "http://m.roblox.com/Catalog/VerifyPurchase?assetid=122174821&type=robux&expectedPrice=1"
document.getElementsByClassName('buyButtonClass')[1].click()
but I don't know how to make the page refresh and the code start over without it having to manually be entered again
Thanks
By the way it will be running in Google Chrome Dev. tools Console
I tried
function blah() {
// window.location = "http://m.roblox.com/Catalog/VerifyPurchase?
assetid=122174821&type=robux&expectedPrice=1"
document.getElementsByClassName('buyButtonClass')[1].click()
if (some_condition) {
blah() // rerun the code
}
}
Output was "undefined", the script did nothing.
The script goes to a link, clicks a button (currently it doesn't click for some reason) then restarts the script (not working)

setting window.location = ... will refresh the page, but stuff after that will not trigger, because you just refreshed the page including all the javascript. You can put the code you want to trigger in a $(document).ready(function(){your_code_here}); call and when the page refreshes, it will set up your click event.

"onclick" of a button in a popup works only once

I have an html/php webpage (the file is called searchresults.php) that imports jquery mobile. When you enter the page, the url is usually something like
www.domain.com/searchresults.php?&sort="off"&max="5"
In this example sorting is off and only 5 items are displayed. On that page is a button that opens a popup where I want the user to be able to change these settings. I use the built-in jquery mobile popup. On that popup you can toggle "sort" on/off and you can enter a new maximum. On the popup is an "ok" button to confirm your new settings. It looks like this:
OK
The sortAgain(); function in javascript looks like this:
function sortAgain();
{
//some code to get the necessary variables//
...
//change the href of the button so you reload the page
document.getElementById("okbutton").href = "searchresults.php" + "?keyword=" + var1 + "&sort=" + var2 + "&max=" + var3
}
So, basically, right before the "ok" button navigates to another page, I set its href of the page where it should navigate too.
This scheme works, and the searchresults.php file is fetched again from the server and re-interpreted (with the new variables in the url).
However, if i try to change the settings again after changing it once, the popup just does nothing! In other words, the href of the ok button on the popup stays empty and the javascript function sortAgain() is not called. I don't understand why it calls the onclick method perfectly fine the first time, but then refuses to call it again?
I assume it has something to do with the fact that the popup html code is an integral part of searchresult.php file, and that hrefing to the same page gives problems? The popup is pure html, no php is involved in the popup code. and again, it works fine the first time.

You should check out how to attach events via JavaScript. See here: javascript attaching events

You need to use the "pageinit" event when setting up click handlers in JQM: http://api.jquerymobile.com/category/events/
Here is an example of how to bind click handlers when the page is first loaded.
$( document ).on( "pageinit", "#that-page", function() {
$('#okbutton').on( "click", "#that-page", function( e ) {
$(this).attr("href", "searchreslts.php");
});
});