[AJAX] Ajax, javacript dans un sondage
Bonjour a tous,
Je prépare un sondage en ligne pour un de mes clients. Avec ajax je fais afficher un question a la fois. Jusqu'ici tout fonctionne bien. Quand je change de page, il faut que la reponse s'incrive dans la base de donnée. Pour ca, quand je veux faire suivant, il faut que je demande a Ajax de loader la 2e question et de faire l'inscription dans la bdd. Ici je bloque. Jai besion de faire un getElementById. Jai fais quelque essai
Code:
<a href="javascript:void();" onclick="javascript:ShowPage('2&reponse="obj.value"', '');" >suivant</a>
Code:
1
2
3
| <script>
var obj = document.getElementById("Q1")
</script> |
Je le "obj.value" que je ne suis pas capable de faire. je vous donne le code intégrale
question1.php
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
| <script>
var obj = document.getElementById("Q1")
</script><form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform"><table>
<tr>
<td colspan="3" class="num">Section I : Image de l’organisation</td>
</tr>
<tr>
<td class="num">1.</td>
<td colspan="2" class="que">En quelle année avez-vous terminé vos études au Cégep de ***?<br>
Ou, jusqu’en quelle année avez-vous travaillé au Cégep de *** ? </td>
</tr>
<tr>
<td> </td>
<td colspan="2"><select name="Q1" size="1" id="Q1" style="font-family:Arial;color:navy;font-size:12px;">
<option value=""></option>
<option selected <? if ($Q1=='1969'){echo 'selected';}?> value="1969">1969</option>
<option <? if ($Q1=='1970'){echo 'selected';}?> value="1970">1970</option>
<option <? if ($Q1=='1971'){echo 'selected';}?> value="1971">1971</option>
<option <? if ($Q1=='1972'){echo 'selected';}?> value="1972">1972</option>
<option <? if ($Q1=='1973'){echo 'selected';}?> value="1973">1973</option>
<option <? if ($Q1=='1974'){echo 'selected';}?> value="1974">1974</option>
<option <? if ($Q1=='1975'){echo 'selected';}?> value="1975">1975</option>
<option <? if ($Q1=='1976'){echo 'selected';}?> value="1976">1976</option>
<option <? if ($Q1=='1977'){echo 'selected';}?> value="1977">1977</option>
<option <? if ($Q1=='1978'){echo 'selected';}?> value="1978">1978</option>
<option <? if ($Q1=='1979'){echo 'selected';}?> value="1979">1979</option>
</select>
<br></td>
</tr>
<tr>
<td> </td>
<td colspan="2"><hr></td>
</tr><tr><td colspan="2">
<a href="javascript:void();" onclick="javascript:ShowPage('2&reponse="obj.value"', '');" >suivant</a></td></tr>
</table></form> |
ajax.js
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| var xhr = null;
function getXhr()
{
if(window.XMLHttpRequest)xhr = new XMLHttpRequest();
else if(window.ActiveXObject)
{
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else
{
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
}
function ShowPage(page)
{
getXhr();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
document.getElementById('page').innerHTML=xhr.responseText;
}
}
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
}
var http_request = false;
function makeRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url + parameters, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
} else {
alert('There was a problem with the request.');
}
}
}
function get(obj) {
var getstr = "?";
for (i=0; i<obj.childNodes.length; i++) {
if (obj.childNodes[i].tagName == "INPUT") {
if (obj.childNodes[i].type == "text") {
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
}
if (obj.childNodes[i].type == "checkbox") {
if (obj.childNodes[i].checked) {
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
} else {
getstr += obj.childNodes[i].name + "=&";
}
}
if (obj.childNodes[i].type == "radio") {
if (obj.childNodes[i].checked) {
getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
}
}
}
if (obj.childNodes[i].tagName == "SELECT") {
var sel = obj.childNodes[i];
getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
}
}
makeRequest('ajax.php', getstr);
} |
index.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script type="text/javascript" src="../js/ajax.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>***</title>
<link href="../css/sondage.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="ShowPage(1)">
<div id="main"><img src="../images/top_cll.jpg" width="660" height="100">
<div id="sommaire">
<h3><?php echo $_GET['reponse']; ?></h3>
<a href="javascript:void();" onClick="ShowPage(1)">Question 1</a> <a href="javascript:void();" onClick="ShowPage(2)">Question 2</a> <a href="javascript:void();" onClick="ShowPage(3)">Question 3</a> <a href="javascript:void();" onClick="ShowPage(4)">Question 4</a> <a href="javascript:void();" onClick="ShowPage(5)">Question 5</a> <a href="javascript:void();" onClick="ShowPage(6)">Question 6</a> <a href="javascript:void();" onClick="ShowPage('7a')">Question 7a</a> <a href="javascript:void();" onClick="ShowPage('7b')">Question 7b</a> <a href="javascript:void();" onClick="ShowPage(8)">Question 8</a> <a href="javascript:void();" onClick="ShowPage('9a')">Question9a</a> <a href="javascript:void();" onClick="ShowPage('9b')">Question 9b</a> <a href="javascript:void();" onClick="ShowPage('10a')">Question 10a</a> <a href="javascript:void();" onClick="ShowPage('10b')">Question 10b</a> <a href="javascript:void();" onClick="ShowPage(11)">Question 11</a> <a href="javascript:void();" onClick="ShowPage(12)">Question 12</a> <a href="javascript:void();" onClick="ShowPage(13)">Question 13</a> <a href="javascript:void();" onClick="ShowPage(14)">Question 14</a> <a href="javascript:void();" onClick="ShowPage('15a')">Question 15a</a> <a href="javascript:void();" onClick="ShowPage('15b')">Question 15b</a> <a href="javascript:void();" onClick="ShowPage(16)">Question 16</a> <a href="javascript:void();" onClick="ShowPage(17)">Question 17</a> </div>
<div id="page"> </div>
<?php echo $_GET['reponse']; ?>
</div>
</div>
</body>
</html> |
Je m'y connais pas très bien en javascript et jespere avoir ete claire
