There are several ways to do what you want. The one I propose is to associate each question number with its answer (yes / no). We give each radio names like these: si_1 , no_1 . By Javascript, by pressing the button Enviar we launch a code that runs through all radio and save an array of those that are selected. In our example code, in which I use only three questions for brevity, the array will look like this:
["si_1","no_2","si_3"]
There we have all the information that is needed! We can determine that:
- Answered
sí to Pregunta 1
- Answered
no to Pregunta 2
- Answered
sí to Pregunta 3 ...
Let's see a functional example:
document.getElementById("btnEnviar").onclick = function() {
var radioStatus = new Array();
var allRadios =
document.querySelectorAll('input[class="radio"]').forEach(function(el) {
if (el.checked) {
radioStatus.push(el.id);
}
})
var toPost = JSON.stringify(radioStatus);
console.log(toPost);
};
<table>
<tr>
<td>Pregunta 1...</td>
<td>
sí <input id="si_1" type="radio" class="radio" name="r1" value="1">
</td>
<td>no <input id="no_1" type="radio" class="radio" name="r1" value="0">
</td>
</tr>
<tr>
<td>Pregunta 2...</td>
<td>
sí <input id="si_2" type="radio" class="radio" name="r2" value="1">
</td>
<td>no <input id="no_2" type="radio" class="radio" name="r2" value="0">
</td>
</tr>
<tr>
<td>Pregunta 3...</td>
<td>
sí <input id="si_3" type="radio" class="radio" name="r3" value="1">
</td>
<td>no <input id="no_3" type="radio" class="radio" name="r3" value="0">
</td>
</tr>
<tr>
<td>
<button id="btnEnviar">Enviar</button></td>
</tr>
</table>
Send / read data
The data is stored in the variable toPost , and you can send it by Ajax to the server. Note that JSON.stringify is used to convert the array to a JSON string and may be easier to send / retrieve on the server.
In the data parameter of Ajax you can do something like this:
data: { 'data' : toPost},
And in PHP you can do something like this:
if(isset($_POST["data")){
$data=json_decode($_POST['data']);
/*Trabajamos con $data*/
}
Now, the data comes like this:
But I need the 1 , the 2 , the 3 ... to identify each question. No panic! That information can be widely used. If in PHP you make a explode you can obtain separately the data you need to operate in the database. You would separate by _ and you would then get the number of each question and the question it received.
This separation work can also be done from the client, making a split in Javascript and sending the server an arrangement already organized with each question and its response. For this case I think it would be easier with explode .
The other tags of the radio , such as value , are free to be able to put in them any information that might be necessary.
Another possibility
To simplify the management of the server side, you can send an associative array built on the client side.
In this example, what is done is to put another array with two values in the main array, one for the question number and the other for the answer.
The array would look like this:
[["1","si"],["2","no"],["3","si"]]
Doing so would make it easier for the server to obtain two arrays separately for use in the database entry.
Here's a test:
document.getElementById("btnEnviar").onclick = function() {
var radioId = "";
var parts = "";
var radioStatus = new Array();
var allRadios =
document.querySelectorAll('input[class="radio"]').forEach(function(el) {
if (el.checked) {
radioId = el.id;
parts = radioId.split('_');
radioStatus.push(new Array(parts[1], parts[0]));
}
})
var toPost = JSON.stringify(radioStatus);
console.log(toPost);
};
<table>
<tr>
<td>Pregunta 1...</td>
<td>
sí <input id="si_1" type="radio" class="radio" name="r1" value="1">
</td>
<td>no <input id="no_1" type="radio" class="radio" name="r1" value="0">
</td>
</tr>
<tr>
<td>Pregunta 2...</td>
<td>
sí <input id="si_2" type="radio" class="radio" name="r2" value="1">
</td>
<td>no <input id="no_2" type="radio" class="radio" name="r2" value="0">
</td>
</tr>
<tr>
<td>Pregunta 3...</td>
<td>
sí <input id="si_3" type="radio" class="radio" name="r3" value="1">
</td>
<td>no <input id="no_3" type="radio" class="radio" name="r3" value="0">
</td>
</tr>
<tr>
<td>
<button id="btnEnviar">Enviar</button></td>
</tr>
</table>
You can also produce those two arrays right here by doing something like:
var radioP = new Array ();
var radioR = new Array ();
And in the each :
radioP.push((parts[1]);
radioR.push((parts[0]);
And then you send the server radioP and radioR as two independent arrays. What happens is that this renounces having the data structured and related to each other. I would send them as partners and make the necessary separations, according to the needs of the server.