All of the tutorials I've looked up only show how to everything works using forms. I want to avoid using a form. Right now i have the code for Javascript to map my answering based on what's clicked and make array thats shown in a alert. (in the end i don't want it to be in a alert but im keeping it in there until i know everythings working) but I think i have the ajax sending the info to the server but i'm not sure if its working. Or how to have php take the ajax information and send it to the server. My server is also connected fine. I'm posting all of my current code. Any help is appreciated. Even if you just send me a link or point me in the right direction that would be great.
I think my biggest question is how to take the array generated in Javascript then call in in Ajax, then Php. since i already made the array what do i call in the Ajax. then how to treat it with a PDO
<?php
include_once('database.php');
$name = $_POST['name'];
$choices = $_POST['answers'];
if(mysql_query("INSERT INTO answers VALUES('$name', '$choices')"))
echo "Successfully Inserted";
else
echo "Insertion Failed";?>
jQuery
$(document).ready(function() {
$(function() {
//catch this values, because you will use these for more than one time
var answers = [];
function getAnswers() {
answers = []; //empty old answers so you can update it
$.map($('.on'), function(item) {
answers.push($(item).data('value'));
});
}
//init the answers in case you use it before click
getAnswers();
$(document).on('click', 'img', function(e) {
e.preventDefault();
$(this).toggleClass('on');
//trigger the state change when you click on an image
$(document).trigger('state-change');
});
//get answers when event was triggered
$(document).on('state-change', function(e) {
getAnswers();
});
$('#btn-show').click(function() {
alert(answers.join(',') || 'nothing was selected');
});
});
});
CSS
#seasoning {
margin: 8px;
font-size: 16px;
height: 100px;
width: 100px;
}
/* this shows the user which item has been selecting along with making a searchable class for the program */
.on {
padding: 10px;
background-color: red;
}
HTML
<html>
<head>
<LINK REL=StyleSheet HREF="code.css" TYPE="text/css">
<script type="text/javascript" src="javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
Name:
<input type="text" name="name">
</form>
<img src="https://i.imgur.com/7HyU4yh.jpg" id="seasoning" data-value="0">
<br>
<img src="https://i.imgur.com/OEHCjCK.jpg" id="seasoning" data-value="1">
<br>
<button id="btn-show">Submit</button>
</body>
</html>
