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 102 103 104 105 106 107 108 109
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ajax Form</title>
<script type='text/javascript'>
function groupNames(){
var n=0;
var hashNames={};
while(document.forms['myform'].elements[n]){
if(!hashNames[document.forms['myform'].elements[n].name]){hashNames[document.forms['myform'].elements[n].name]=1}
else{hashNames[document.forms['myform'].elements[n].name]++}
n++;
}
return hashNames;
}
function SendAjaxForm(){
var ScanNames=groupNames()
var Params="";
regEnd=/\[\]$/;
for (EltName in ScanNames){
switch (true){
case(regEnd.test(EltName)): for (i=0;i<ScanNames[EltName];i++){
Params+="&"+EltName+"="+document.getElementsByName(EltName)[i].value;
}
break;
case(document.getElementsByName(EltName)[0].type=='radio' || document.getElementsByName(EltName)[0].type=='checkbox'):
for (i=0;i<ScanNames[EltName];i++){
if (document.getElementsByName(EltName)[i].checked){
Params+="&"+EltName+"="+document.getElementsByName(EltName)[i].value;
}
}
break;
case(document.getElementsByName(EltName)[0].tagName.toLowerCase()=='select' && document.getElementsByName(EltName)[0].multiple==true):
for (i=0;document.getElementsByName(EltName)[0].options[i];i++){
if(document.getElementsByName(EltName)[0].options[i].selected){
Params+="&"+EltName+"="+document.getElementsByName(EltName)[0].options[i].value;
}
}
break;
default: Params+="&"+EltName+"="+document.getElementsByName(EltName)[0].value;
}
}
Params=Params.replace(/^&/,"")
alert("la chaine send est : \n"+ Params)
//l'ajax
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('POST', 'cible.php', true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(Params);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert('le dump du POST :\n '+xhr.responseText) //ici le traitment du retur ajax
}
else{ alert ("Erreur : " + xhr.status) };
}
}
}
</script>
</head>
<body >
<form name="myform" method="post" action="javascript:SendAjaxForm()">
<input type='text' name="text1[]" />
<input type='text' name="text1[]" />
<input type='text' name="text3" />
<input type='text' name="text4" />
<input type='text' name="text5" />
<input type='text' name="text6" />
<select name='sel' multiple>
<option value='one'>un</option>
<option value='two'>deux</option>
<option value='three'>trois</option>
<option value='four'>quatre</option>
</select><br />
<input type='radio' value='rad1' name='rad' />rad1 <br />
<input type='radio' value='rad2' name='rad'/>rad2<br />
<br />
<input type='checkbox' value='check1' name='check' />check1<br />
<input type='checkbox' value='check2' name='check'/>check2<br />
<input type='submit' value="go" name='submit'/>
</form>
</body>
</html> |
Partager