I am the webmaster for our Running Club and another member and I are trying to automate our site by drawing data from Google Sheets in a JSON file and using it to automatically update the website.
We have had a fair degree of success so far but have a hit a hurdle, what we would like to do is create a Run Report on the fly by adding a Run Number to a static url from a text box using some javascript and then redirect to the modified URL, see the image below.
The target static page calls on a js file that populates the page with the data from the number entered to the text box.
Below is the minimal amount of html and script that I have already, really hoping that someone can help me with this or hopefully not, tell me that it isn’t possible.
<div class="runsearchinput">
<span><strong>Run #</strong></span> <input type="text" id="runrequest" placeholder="eg: 123">
</div>
<p><strong>Type the run number you wish to view in the text box above and click the button.</strong></p>
<div>
<button class="runsearch" onclick="process()">Load Run Report Now</button>
</div>
<script>
function myFunction() {
document.getElementById("runrequest").placeholder = "Type number here..";
}
</script>
is it just a redirect to the page you want? i have made a quick repl https://repl.it/@biscuitmanz/run-test
try this out and see if this is what you meant because im not sure.
It redirects to the run page that you enter then click go to page, hope it helps your problem
Kind of, what we are trying to do is target a static page and append a run number to the end of it so that the appended number will trigger a javascript file to populate the static page with the data from Google sheets.
It is currently being populated with the data from Sundays run, but the js file is specifically loading the data for Run #427 from last Sunday until we can figure out how to append the run number to the URL and be able to target that to decide what run number data to load, hope that all makes sense.
I just had a thought, as I said previously I am a complete numpty when it comes to javascript, BUT, would an easier solution be to have the input from the search box trigger the js file that loads the data and tell that file which run number to load it for ?? Just a thought.
so i think i get what you mean you have a javascript file that gets data from your google sheets database?
and yes just have the input load the data straight from the js file so just change
var RunNum = '427';
to
var RunNum = input.value
that seems like the easiest way.
let input = document.querySelector('#input')
let btn = document.querySelector('#btn')
let runNum;
btn.addEventListener('click', () => {
runNum = input.value
})
