How can I save data from an html js website? - javascript

I'm trying to make a website with a sort of survey where the user picks one of 2 buttons with different text values and the website saves what value he picked and reloads the website giving the user 2 new values on the buttons. I already made the system for rolling new button values and reloading when one of them is picked but I cant figure out how to save data.
This is the current code I have:
function b1() {
data = document.getElementById("b1").innerHTML;
alert(data);
location.reload();
}
This function is called when one of the buttons is pressed (there is another one for the other button) and the data variable is what value is on the button.
Instead of alerting the data variable I want to be able to add 1 to a variable in a database which counts how many times this value was picked.
I already tried using the google sheets api but it did not work and just stopped the code from working.
I tried adding a .txt file and use js to edit it but since js is ran client side it cant edit server side files.

You can use google forms for that.
Usually if you want a custom solution you would need PHP.
Using external software like with an API you can get an easy solution without too much effort.
At the end of google forms when you have made your form, you have the option to share, and there you should click the "<>" tab to copy the iframe into your HTML.

Related

Sending and receiving data between two pages

I'm working on a basic voting system where I have 2 HTML pages (both on the same domain).
On page 1 there are two buttons of which the person should choose one.
One page 2 I want to visualise the chosen option in a graph.
The goal is that if a button is clicked on page 1, the data on page 2 updates automatically without refreshing the whole page.
In order to do this, I tried saving the clicked option in a localStorage. I managed to get the data by writing a variable using localStorage.getItem(''). However, when I get the data, I have to manually refresh page 2 for the result to show. Is there a way to update the data on page 2? So if I press multiple buttons, multiple responses will show on page 2?
I also saw that there is a possibility of using WebSockets. Since I'm only familiar with HTML and JavaScript, I was wondering whether it's possible to solve my issue without setting up a server and run things locally. If that's not possible, what would be the best (and maybe easiest) way to solve my issue?
If you have page 2 successfully reading a variable that you get from local storage (which is being updated by actions taken on page 1), you can make a timer with setInterval to read from local storage every x milliseconds. Then the graph will update on its own.
See documentation for setInterval here.
Maybe the best and simple solution is setting specific url parameters for each button selection.
Then on the page 2 you simply show conditionally according the url parameter.

How to scrape data from website when the data is only accessible by pressing a button?

I want to scrape data from a website within my java-application. The data I want to collect is inside a html-table-element. I tried two different methods:
I tried to load the website with a BufferedReader into a String and collect the data from the String.
I tried to use Jsoup to get access to the exact html-element, but it's empty.
Turns out that the table exists, but it is empty as long as the user has not pressed a button (labled "load raw data"). I inspected the sourcecode of the webpage. When the user presses the button, a load_table()-function is called which loads the data into the table. Obviously, the URL remains the same, otherwise I could've just used the other URL where the data is already loaded into the table. Has anyone an idea on how to scrape data from a website although it's only on the website if the user presses a button after the website is loaded?
I'm not really a trained Javascript-coder, but I tried to look through the script which is executed after the user presses the button. It's kind of hard to understand for me but I made a pastebin of the script with a highlighting where I think the rows are added to the table if that helps. The code for the button is:
Load raw data
The code I use to access the html element with Jsoup would be (all the child(x) methods are called on different div-elements to go deeper into the html-document until I finally reach the table-element):
Jsoup.connect(url).get().body().children().get(5).child(0).child(4).child(1).child(1);
As I stated above, the element is empty. I hope the description of my problem is detailed enough and somebody has at least an idea of what I'm trying to say. Sorry for my clumsy expressions. Not a native speaker.
if you are familiar with selenim webdriving you could use selenium to load the page and then pass to source page into beautifulSoup argument.
html = pageSource()
you could parse the page by this method i guess

Pass variable from one Javascript file to another when used in different HTML pages

Sorry for the slightly confusing title, but couldn't find anything online to help me with the issue I am facing. Essentially, I have three Javascript files and two different HTML pages. In the first HTML page, let's say first.html, I have two buttons, let's call them Button 1 and Button 2. When the user clicks on Button 1, it opens up a Javascript function in javascript1.js which makes a call to a REST API. It then passes this data to javascript2.js by passing it as a parameter. Essentially, this is how it looks like:
javascript1.js
function firstfunction() {
$.getJSON("http://website.com", function(data) {
newfunction(data);
}
}
Inside javascript2.js is
function newfunction(dataparameter) {
alert(dataparameter);
}
This so far is working perfectly. However, some complications arise with the second button in first.html. Essentially, after the user clicks on the first button a second button becomes available which leads the user to a new html page, in this case second.html. Now inside this HTML page, I want to display the same data that javascript1.js produces in a file called javascript3.js. I have tried many options, such as using cookies, or passing it in a parameter, etc. However, I have been unable to do successfully do it as I am a bit confused on how to include the Javascript files in the HTML page. In first.html, I am including javascript1.js and javascript2.js. In the second.html, should I be including all three javascript files? I could just try to make the get call again in the new HTML page but I'd prefer to find a more efficient way. Please let me know if I should provide more code/explanation; hopefully this question makes sense! Thanks for the help!

Using Javascript with Asp.net for ListBox

I want to use ClientSide Javascript for listbox, it should take values from database table when the page is loaded first time OR load the specific table in javascript,
Right Now, all the values are coming from database, if I select "StandardM1(CA)"
it brings all the values from "food_menu" table.
I want to do the the same thing with client-side javascript in order to save time and server requests, so that the application runs faster.
Can some one please guide me?
Faheem use array in it and try to do the coding right on the save button. its the save button that is creating problems

Deleting dynamically created button

I am making an English to hindi transliteration webpage that works offline. I have used HTML & javascript so the file works on all browsers across all OS.
I have added support for remembering words used via a cookie provided the user works on same computer, same browser every time.
As the user types word , buttons are dynamically created which suggest on basis of database stored in cookie. Is there a way I can associate action on right clicking a dynamically created button ?
Also , I want that - the dynamically created button should vanish on right clicking it ?
I want this because , if user wants to remove an erroneous entry from his vocab database (which is in a cookie referred above).
Currently I am able to remove all dynamic buttons in one go using
id-of-span-which-holds-dynamic-buttons.innerHTML = '';
A lengthier way would be to remove all buttons , then pop out word from database & recreate suggestion based on current database. Is there a simpler way ?
Where can I post my web page code (>51KB) if somebody wants to see what I have been talking about?
I have added support for remembering words used via a cookie
This is a really bad idea. It incurs a big overhead in every HTTP request - and eventually it will get to apoint where the requests get too large foer the server to cope with - then bad things can start happenning. HTML5 has proper support for local storage. Use it.
Is there a way I can associate action on right clicking a dynamically created button
Have a look around the web - do you see anything similar implemented anywhere? I never have. Trying to take over the right mouse button is a bad idea.

Categories

Resources