[AJAX] Ajax et plusieurs radios générés par MySQL
Bonjour à tous,
Je m'amuse depuis ce matin à faire un peu de AJAX.
Outre le fait que j'amuse plutot pas mal (toujours étonnant de voir le résultat), je bute un peu sur un problème.
j'ai écrit ça actuellement (dans <head>) :
Modifié.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<script type="text/javascript">
// <![CDATA[
function getXhr(){
var xhr = null;
if (window.XMLHttpRequest) { // Firefox et autres
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
} else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest !");
xhr = false;
}
return xhr;
}
function add2cart(products_id) {
var xhr = getXhr();
var option = '';
var ajax_cart = document.getElementById('ajax_cart');
var quantity = document.getElementById('quantity').value;
quantity = (parseInt(quantity) == quantity) ? quantity : 1;
ajax_cart.style.display = 'block';
ajax_cart.style.position = 'absolute';
ajax_cart.style.background = 'white';
ajax_cart.style.padding = '1em';
ajax_cart.style.width = '400px';
ajax_cart.style.height = '60px';
ajax_cart.style.border = '1px solid #ccc';
ajax_cart.innerHTML = '<p class="center"><?php echo tep_image(DIR_WS_ICONS . 'loading.gif', 'Chargement', '', '', 'class="noBorder"') . ' Chargement ...'; ?></p>';
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
ajax_cart.innerHTML = xhr.responseText;
}
}
xhr.open("POST", "action.php", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
for (var i = 0; i < document.getElementById('add2cart').elements.length; i++) {
if(document.getElementById('add2cart').elements[i].type == 'radio' && document.getElementById('add2cart').elements[i].checked) {
option += "&id["+document.getElementById('add2cart').elements[i].name+"]=" + document.getElementById('add2cart').elements[i].value;
}
}
xhr.send("products_id="+products_id+"&quantity="+quantity+option);
// Fermeture du layer automatique (10000 = 10 sec)
setTimeout("ajaxCartClose()", 10000);
return false;
}
function ajaxCartClose() {
if (document.getElementById('ajax_cart')) {
document.getElementById('ajax_cart').style.display = 'none';
}
}
// ]]>
</script> |
Seulement voilà, j'arrive bien à ajouter à mon panier les produits (grace au onsubmit de mon formulaire) mais je tiens pas compte des options.
Je fais passer les options via $_POST : id[5]=152&id[4]=123
je génére mes radios via un while depuis la base de donnée ce qui donne ceci dans le code source :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <fieldset id="options">
<legend>Options disponibles</legend>
<p><strong>Option :</strong></p>
<p><input type="radio" name="id[5]" value="152" checked="checked" id="LJHwpg" /> <label for="LJHwpg">Offre complète</label> </p>
<p><input type="radio" name="id[5]" value="54" id="yVZbfy" /> <label for="yVZbfy">Chevet seul</label> <span class="price_attribute">(148.00<abbr title="Euros">EUR</abbr>)</span></p>
<p><input type="radio" name="id[5]" value="153" id="ktgTsc" /> <label for="ktgTsc">Colonne / étagère</label> <span class="price_attribute">(370.00<abbr title="Euros">EUR</abbr>)</span></p>
<p><input type="radio" name="id[5]" value="154" id="jpqvDb" /> <label for="jpqvDb">Armoire / Penderie</label> <span class="price_attribute">(750.00<abbr title="Euros">EUR</abbr>)</span></p>
<p><input type="radio" name="id[5]" value="155" id="AupnrO" /> <label for="AupnrO">Paravent</label> <span class="price_attribute">(298.00<abbr title="Euros">EUR</abbr>)</span></p>
<p><input type="radio" name="id[5]" value="156" id="IVSVhv" /> <label for="IVSVhv">Lit seul (L140 x P190)</label> <span class="price_attribute">(598.00<abbr title="Euros">EUR</abbr>)</span></p>
<p><input type="radio" name="id[5]" value="157" id="ZYiJgv" /> <label for="ZYiJgv">Lit seul (L160 x P200)</label> <span class="price_attribute">(660.00<abbr title="Euros">EUR</abbr>)</span></p>
<div class="clear noHeight"> </div>
<p><strong>Teinte :</strong></p>
<p><input type="radio" name="id[7]" value="142" checked="checked" id="LLqPJq" /> <label for="LLqPJq">Naturelle</label> </p>
<p><input type="radio" name="id[7]" value="4" id="VTqMJW" /> <label for="VTqMJW">Marron foncé</label> </p>
<div class="clear noHeight"> </div>
</fieldset> |
je dois récupérer dans le head les champs radio checked,
Avec name et value pour faire ensuite passer le paramètre dans xhr.send()
Mais je sais pas comment faire.
Impossible de faire une boucle là ?
c'est là que ça commence à devenir compliqué pour moi ...
Quelqu'un aurait la délicatesse de m'aider, ça serait sympa :oops:
P.S : Je refais une recherche on sait jamais.
