Use AJAX for forms submission, especially editing sports and majors lists

[smattingly]

Currently, the sports and majors list pages contain multiple forms behind the scenes-- one for each individual record. Click a checkbox submits the form to update that record, and the same URL is reloaded, reflecting the update. While this happens quickly enough to look okay, the better way to do this is to submit the update using AJAX so that the server-side data is modified, but there is no reload of the page.

[Weintraubm]

@brownk3 You posted that you were awaiting work, I have added you to this issue, I will also do more research and help you figure out how to perform this task. Please read up on these two articles on ajax and Jquery. Also do your own research as you feel necessary into the concepts. Let me know when you have done this and are ready to move on.

https://www.sanwebe.com/2016/07/ajax-form-submit-examples-using-jquery#:~:text=Ajax%20forms%20are%20the%20integral%20part%20of%20web,to%20send%20HTML%20form%20data%20using%20jQuery%20Ajax.

https://learn.jquery.com/ajax/ajax-and-forms/

[brownk3]

@Weintraubm I'm sorry that I took so long to follow up on this. I have been aware of it and I had read the two articles you had provided, but I didn't realize until recently that you wanted me to let you know when I'm ready to move on. Since Professor Mattingly mentioned us moving to "Fetch," is there anything we need to change, and what do we need to do to proceed?

[smattingly]

@brownk3 I'd suggest looking at the POST with fetch example about halfway thru this article: https://www.geeksforgeeks.org/get-and-post-method-using-fetch-api/
To use similar code, we must either

1. figure out how to send form-encoded data instead of JSON, or
2. add server-side code to accept the JSON data and format it.

I can help with whichever of those once you have something that is sending requests to the server.

[smattingly]

@brownk3 I was looking at the changes I needed to make for you, when I remembered option 1 above. That requires no server changes, so let's go that way. Your fetch will use method: "POST", and

body: new URLSearchParams({
      'discontinued': 'Yes'
}),

when the user clicks on an empty checkbox (changing it to be marked). The 'Yes'would be 'No' instead when clicking a checked box (changing it to be empty).

The URL is /major/X where X is the id number of that major.

[smattingly]

@brownk3 I just realized something. The button's type="submit" should be entirely removed. That's what got confused earlier.