Develop Reference

How can I save data from an html js website?

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.

How do I display database rows on multiple pages with Ajax?

I have a database with a table having a big number of rows. I am fetching the data in this table and displaying it in an HTML table on a web page.
My requirement is to display 20 records initially and then when the user clicks a button labelled Next, I show the next 20 records and so on...
So I have initially fetched first 20 rows from the table in my PHP (server-side), and then assigned a JS function to the onclick attribute of the button labelled Next. Inside this JS function, I use an AJAX call which brings me the next 20 rows. Then within this JS function, I replace the HTML rows with these new rows.
I need something like this:
The question is that are there any plugins available which can implement that functionality for me? If a plugin is available, implementing it manually wouldn't make sense because being a rookie, I can't develop it better than the developers of that plugin.

Yes
This is called pagination - a quick search for "ajax pagination mysql php" or similar brings up a wide range of options. I can't recommend any particular one as your question is too broad; I can only reasonably go as far as a definition.
Internally they use the MySQL LIMIT keyword which may help give further things to search for or experiment with depending on your actual use case.

Sort and retrieve data with drop down menus in php

I have two drop down menus on my webpage. One is a course list and the other is a student list. What I want to do is, when a selection is made in the course menu it will update the student menu to only list students in that course.
All the course and student data is saved in a MySQL database. The SQL statements to retrieve the results I want are not a problem. I have those figured out. The problem is that I don't know how to get one drop down menu to update the other without the use of a submit button. Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
I've looked through several similar questions, but a lot of them end up resetting the first menu when the second is updated. I need to print both the selected course and student on the page at the end.
Is this something that can be done with PHP, or would Javascript be more preferable? If someone could point em in the right direction, that would be much appreciated.

Is there a way to have the course menu call a php function when it changes, and that will update the student menu?
Yes. The buzz-word for this is AJAX.
You will end up using both JavaScript and PHP to do this. The actual implementation is quite involved, so I will list the basic steps for you.
(JavaScript) Bind the change event for the course drop down menu.
(JavaScript) When that event is fired, capture the selected course and fire an XMLHttpRequest off to your server along with the selected course.
(PHP) Capture the selected course, and run the SQL statement to fetch your students.
(PHP) Convert the student list to a text format (JSON, XML, delimited-text, etc.) to send back to the browser (using echo, print, etc).
(JavaScript) Populate the student drop down menu.

The general approach to this is to use jQuery to add a hook to your drop-down selector and trigger an AJAX load on another section of the page, populating that with data retrieved either as an HTML fragment (easy) or JSON data that's turned into one (harder).
A really quick and dirty version is to grab a portion of a page and re-populate the current document with it using $.load():
$('#select1').on('change', function() {
$('#select2').load('select.php #select2', 'select1=' + $(this).val())
})
That's the rough idea: When your first selection box changes, load the select.php page, or whatever you're using, and add on the parameter select=N where N is the selected value. It then rips out the #select2 section and replaces it.

Fill and add select options and sync with database

I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.
What I want to do is:
form is open in browser with a drop-down list of records in a database
if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
this will open a new window with an additional form for this entry
on clicking submit the processing script will run to insert this information into the database
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.
Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)
ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?

No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...
form is open in browser with a drop-down list of records in a database
This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.
if the desired option is not in the list, the user can click on a link
next to it to add a new entry to the database
this will open a new window with an additional form for this entry
The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.
on clicking submit the processing script will run to insert this information into the database
On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.
And this is it. Now it's up to you. Hope it helps.

Preview/Summary Page

New to HTML javascript programming and have an issue with implementation of my page.
I have created multipage HTML form layout(using div) which runs 4 pages with approximately 140 input values(most are optional values) all together. I need to implement a preview page before actually submit where in only filled input values along with their labels are displayed within a section of the page.I am able to collect the filled input values and the label values to an array using javascript. However the issue is, I am not able to figure out how I can pass these values to the actual in html summary page? I cannot implement .innerHTML as my labels need to be dynamically generated based on input values. Can this even be done just by javascript or HTML or do I need a server side script to implement the preview page? Does learning DHTML or AJAX help to implement a solution to this problem? I appreciate all the help. Let me know if I need to explain better.

The BEST way would be a session variable in a server-side language. If security is not an issue though, you can save the variables into a cookie though javascript.
See here.