I have a page where a table of possible selections is dynamically generated with Javascript from an Ajax call. Each row of the table has a checkbox with an associated id. A user is able to then select as many checkboxes as they like and then press the "START" button. When the button is pressed, I need to get the selections and send those as part of the data of an Ajax call. Where I am getting stuck is getting the selections and using them in the Ajax call.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="access_database.js" type="text/javascript"></script>
</head>
<body>
<script>initializeDatabase();</script>
<h1 align="center">WELCOME TO MY APPLICATION</h1>
<script>getDecks();</script>
<p>FRONT</p><input type="radio" name="side_selection" value="FRONT">
<p>BACK</p><input type="radio" name="side_selection" value="BACK">
<br></br>
<form action="study.html">
<input type="submit" value="START">
</form>
</body>
</html>
access_database.js:
//Function for getting decks from database
function getDecks() {
var json;
$.ajax({
url: "get_decks.php",
type: "GET",
success: function(data) {
json = JSON.parse(data);
createTable(json, "Available Decks");
}
});
}
//Function for initializing database
function initializeDatabase() {
$.ajax({
url: "action.php",
type: "GET",
data: { param1: "INITIALIZE"}
});
}
//Function to create HTML table
function createTable(json, headerName) {
var header = document.createElement('h2');
var textHeader = document.createTextNode(headerName);
header.appendChild(textHeader);
var table = document.createElement('table');
table.setAttribute("border", "1");
var th = document.createElement('th');
var textTH = document.createTextNode("DECK ID");
th.appendChild(textTH);
var th1 = document.createElement('th');
var textTH1 = document.createTextNode("DECK DESCRIPTION");
th1.appendChild(textTH1);
var th2 = document.createElement('th');
var textTH2 = document.createTextNode("CHAPTER ID");
th2.appendChild(textTH2);
var th3 = document.createElement('th');
var textTH3 = document.createTextNode("GROUP");
th3.appendChild(textTH3);
var th4 = document.createElement('th');
var textTH4 = document.createTextNode("CHAPTER NAME");
th4.appendChild(textTH4);
table.appendChild(th);
table.appendChild(th1);
table.appendChild(th2);
table.appendChild(th3);
table.appendChild(th4);
for (var i = 0; i < json.length; i++){
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var text1 = document.createTextNode(json[i].deck_ID);
var text2 = document.createTextNode(json[i].deck_description);
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var text3 = document.createTextNode(json[i].chapter_ID);
var text4 = document.createTextNode((json[i].faculty=='1')?'Faculty':'Student');
var td5 = document.createElement('td');
var text5 = document.createTextNode(json[i].name);
var buttonR = document.createElement('INPUT');
buttonR.setAttribute("type", "checkbox");
buttonR.setAttribute("id", json[i].deck_ID);
td1.appendChild(text1);
td2.appendChild(text2);
tr.appendChild(td1);
tr.appendChild(td2);
td3.appendChild(text3);
td4.appendChild(text4);
td5.appendChild(text5);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(buttonR);
table.appendChild(tr);
}
document.body.appendChild(header);
document.body.appendChild(table);
}
I would like to get the selections using what I have now, and then use the data in an Ajax call for a query. I'm just looking for help with getting the selections in a format that I can use for the Ajax call.
I think you are looking for something like this (disclaimer : not run/syntax checked)
$('input[type="submit"]').click(function() {
var selection = []
for (var i = 0; i < json.length; i++){
if ($("#"+json[i].deck_ID).is(':checked')){
selection.push(json[i].deck_ID);
}
}
$.ajax({
method: "POST",
url: "some.php",
data: { selection: JSON.stringify(selection)}
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
I know you are asking for specific help but I feel morally obligated to tell you that use of javascript is horribly incorrect. Specifically I mean
<script>initializeDatabase();</script>
<h1 align="center">WELCOME TO MY APPLICATION</h1>
<script>getDecks();</script>
But your method of creating tables is extremely long/tedious as well.
You can do something like this
function getChecked() {
return $('table input[type="checkbox"]').filter(':checked').map(function(index, item) {
return $(item).attr('id');
}).toArray();
}