We Keep Coding

How can I get the value of an input and split the words by comma?

I'm working on a search feature for my ecom project. What I'm trying to do is take the data from an input in index.html, and then redirect to search.html while still being able to hold the data, but the page just reloads and nothing is showing up in the console field.
I'm using vanilla JavaScript and running into some issues.
This is my HTML
<form action="search.html">
<input
type="text"
placeholder="Search for products"
id="search-query"
/>
</form>
and this is my JavaScript
document.getElementById("search-query").addEventListener("focus", function () {
const search = document.getElementById("search-query").value;
const searchResults = search.split(" ");
console.log(searchResults);
});
I'm using the split method because I want each word separated by a comma. I plan on implementing a feature that displays images based on each word, but for now I just want the results to log to the console so I know I'm not getting an undefined, but nothing I try seems to be working.
I was able to get the code working just fine when I was only logging the value of the input, but I need a way to redirect to search.html, which is why I wrapped it in the form.

Change the eventlistener to input and not focus as the focus will work only when the input is focused and not on user input value.
Modified snippet:
const search = document.getElementById("search-query");
search.addEventListener("input", function () {
const searchValue = search.value;
const searchResults = searchValue.split(" ");
console.log(searchResults);
});
<form action="search.html">
<input
type="text"
placeholder="Search for products"
id="search-query"
/>
</form>

Is there a good way to display collected data to the user in HTML or javascript and still keep the data?

I am trying to pick up some user data from a HTML page by having the user type it in. I want to retain the data, (they are ID numbers of sorts) display it back to the user on any subsequent section they go to (currently different href sections on one page), collect more data from them and eventually present the data to the user as a review. I thought this would be a little like HTML “Hello World”, but it’s proving to be more than that. . I found out that document.write() is the wrong way to go about it, but no good answer on how to accomplish this. Collecting this data is the first thing I need from the user, and then I will collect more data, so I have to be able to get data and let the user move around.
I have spent a day and a half on this site and others, pulled out two books (yes, paper!) looking for answers, but not reaching a usable solution. Nothing seems to work. When complete, I want to give the user a chance to correct the data before submitting, most likely to post at the moment, but would be a server if implemented.
Here’s how I am collecting, simplified as much as possible:
<form name="getNPIandTIN">
<p> Please enter NPI and TIN</p>
Provider NPI: <input type="number" name="Provider_NPI">
<p>
Provider TIN: <input type="number" name="Provider_TIN">
<input type="submit" value="Submit NPI and TIN">
</form>
...
<p id="demo"></p>
Inner HTML action
<script> document.getElementById"demo").innerHTML=
document.getNPIandTIN.Provider_NPI.value
</script>
No error messages; things just don't work. I want to ask the user to enter field 1, have them type it in, click for acceptance, store the data in a variable and echo the information back to them. Sounds pretty simple, but it isn't.

The form is going to get in your way, you don't need it unless you want to post the data somewhere. Since you just want to grab the data directly from the input fields and store it yourself you can just do something like this:
<div>
Provider NPI: <input type="number" id="providerNPI" name="Provider_NPI" value="">
<br>
Provider TIN: <input type="number" id="providerTIN" name="Provider_TIN" value="">
<br>
<button onclick="captureNumbers()">Submit NPI and TIN</button>
</div>
<p id="demo"></p>
<script>
function displayNumbers() {
// get the stored values and show them to the user
var providerNPI = sessionStorage.getItem('providerNPI');
var providerTIN = sessionStorage.getItem('providerTIN');
document.getElementById("demo").innerHTML = "NPI: " + providerNPI + ", TIN: " + providerTIN;
}
function storeNumbers(numbersObject) {
// store the values locally so you can access them wherever you need them
sessionStorage.setItem('providerNPI', numbersObject.providerNPI);
sessionStorage.setItem('providerTIN', numbersObject.providerTIN);
}
function captureNumbers() {
// first get the values from the input fields as a javascript object so you don't have to pass a ton of individual variables
var providerNumbers = {};
providerNumbers.providerNPI = document.getElementById("providerNPI").value;
providerNumbers.providerTIN = document.getElementById("providerTIN").value;
// then pass the object variable to the storage function
storeNumbers(providerNumbers);
// then call the display function
displayNumbers();
}
</script>

There are many different ways, you can use ajax to save all data to a database and show them to user when ever you want.
Or you could use localStorage to save the data temporarily and save them later in certain circumstances...

URL path gets converted to query string on jquery

I am trying to get a button to load a new html page in a website I am building with jinja2. The button action in jquery is as follows:
HTML
<input id="str_A" class="form-control-custom" name="str_A" size="30" type="text" placeholder="1st String" />
<input id="str_B" class="form-control-custom" name="str_B" size="30" type="text" placeholder="2nd String" />
<button id="calcdynamic" class="btn btn-lg btn-outline-success">Calculate Edit Distance</button>
JQUERY
$("#calcdynamic").click(function(){
var str_A = $("#str_A").val();
var str_B = $("#str_B").val();
var url1 = "dynamic/"+str_A+"/"+str_B;
window.location. = url1;
});
Now, here's the problem:
I need to pass data in the url path like http://127.0.0.1:5000/dynamic/sgsdgdgsdgd/sdgsdg, not as a query string as http://127.0.0.1:5000/dynamic/?str_A=sgsdgdgsdgd&str_B=sdgsdg. However when I try to reach the url through the jquery call method, I am sent to the query string link, which is a redirectment to the same page I am in at the moment, http://127.0.0.1:5000/dynamic/.
I use flask server (python) and it is configured to redirect like this:
#app.route('/dynamic/')
#app.route('/dynamic/<str_A>/<str_B>')
def dynamic(str_A=None, str_B=None):
At first, I thought this was a problem with flask server, but if I manually type in the URL http://127.0.0.1:5000/dynamic/sgsdgdgsdgd/sdgsdg it works fine.
Can anybody help please, it looks like a simple thing, but I haven't been able to figure out why it happens so far.

Clear query term displaying in search bar when results page loads

On a search results page, I have:
1) a global search bar in the site header
2) another search bar, specific to the page, that's part of a custom image search.
Issue:
When I perform a search using #2, and the results page loads, BOTH search input fields are populated with my search term.
Desired functionality:
a) both fields should be cleared when the results page loads
OR, at the very least:
b) a #2 search term shouldn't be populated in the #1 search field as well
There is some existing script tied to the site search, but I'd like to use a separate solution, ideally with jQuery, to clear the search fields. This way the user doesn't have to manually clear out text when performing a new search. Any ideas?

here is a working fiddle:
http://jsfiddle.net/acturbo/S3tqZ/
html:
<div id="search-bar">
<form id="search-bar-form">
<input id="search-bar-input"> value to find
Search
</form>
</div>
<div id="search-bar-page">
<form id="search-bar-page-form">
<input id="search-bar-page-input"> value to find on page
Search
</form>
</div>
jquery:
$().ready(function() {
$("#search-bar-page-btn").on("click", function(){
$("#search-bar-input").val("");
$("#search-bar-page-input").val("");
});
});

Need to get data from google spreadsheet to javascript to tie to button

I am very new to javascript...
I am trying to fetch a url out of a cell in a Google spreadsheet, I would like that url to then be tied to a button on my site...(see button in html below)
"<center><FORM METHOD="LINK" ACTION= X
<INPUT TYPE="submit" VALUE="Clickable Button">
</FORM> </center>"
I would like the X variable too = the url contain in the specific cell in the Google spreadsheet. I have been searching for days to accomplish this, and I know I need to use some javascript but not sure how to implement it. Please help.

One way you could achieve this is to use Google JSON API method as documented on this page.
You first add a javascript file to your page as the below example.
<script src="http://spreadsheets.google.com/feeds/list/*ID*/*WS*/public/values?alt=json-in-script&callback=*FN*"></script>
• Where *ID* is the spreadsheet's long ID.
• Where *WS* is the worksheet number e.g. 1,2,3 etc.
• Where *FN* is the function you want to call.
Then in the callback function you can do something like the below to add your variable as desired. rowWithURL is the row number. CellWIthURL is usually the column heading. Or you could use some other methods to locate your URL.
function CallBack(json){
entry = json.feed.entry[rowWithURL];
url = entry.gsx$CellWithURL.$t;
content = '<center>' +
'<form method="link" action='+ url +'>' +
'<input type="submit" value="Clickable Button">' +
'</form>' +
'</center>'
}
Please note the above is not tested but should get you on the right track.