ahah submit degradabile

[LoRdCoStE]

Salve a tutti, ho realizzato un piccolissimo form e faccio avvenire il sumit con la funzione ahah.
Ora però vorrei fare i modo che fosse completamente degradabile, ho visto qualcosa del genere nell'esempio
LIve Search

Però non mi è molto chiaro come poterlo realizzare.

Per ora il mio codice è così:

<form name='frmCat' method='post' action="javascript:submit('ahah.php?do=add&what=cat', 'POST');">
					<input class='cal' name='categoria' type='text' id='categoria' maxlength='20'>
					<input class='cal' name='add_cat' type='submit' id='add_cat' value='aggiungi'>
		</form>

Ovviamente poi ho un div con id=target

Spero che qualcuno possa aiutarmi.
Graze in anticipo

[LoRdCoStE]

up

[LoRdCoStE]

up

[andr3a]

ahah c'entra poco .. questo è js su eventi dedicati, lo fai con qualunque libreria per remote scripting

<form 
	name='frmCat' 
	method='post' 
	action="ahah.php?do=add&what=cat" 
	onsubmit="submit('ahah.php?do=add&what=cat', 'POST'); return false;"
>
	<input class='cal' name='categoria' type='text' id='categoria' maxlength='20' /> 
	<input class='cal' name='add_cat' type='submit' id='add_cat' value='aggiungi' />
</form>

[LoRdCoStE]

grazie della risposta, ho provato a fare come hai detto tu, però non mi esegue la funzione, mi fa direttamente il posto normale, come se js non fosse abilitato (però lo è)
fammi sapere
ciao

[andr3a]

devi assegnare i valori da inviare via post ... cioè qualcosa devi fare anche tu, ajax non è magico

[LoRdCoStE]

forse non ho capito, oppue mi sono spiegato male io:

allora la funzione submit('url', 'POST') normalmente mi fa già il sumbmit, senza fare nient'altro, semplicemente la emtto come azione del form e quando uno clicca sul tasto sumbmit mi inserisce i risultati direttamente nel div senza ricaricare la pagina.
PErò se uno non ha javascript attivato quando clicca sul submit non succede nulla, quindi volevo trovare un bel modo per far si che se uno non abbia javascript quando clicca su submit faccia il POST normale, ricaricando la pagina.

Con il codice postato da te ricarica la pagina sempre, anche con javascript abilitato. Come mai?
grazie ancora e ciao

[andr3a]

posta la pagina per intero con tanto di codice js

[LoRdCoStE]

Questo è il codice della pagina funzionante con ahah, solo qunado ha js abilitato.

javascript incluso:

/********************************
Funzione che sostituisce il SUBMIT, utile al passaggio di tutti i parametri
alla pagina che poi restituirà i valori a seconda dei parametri inseriti
esempio utilizzo: link
********************************/
function submit(FILE, METHOD){

	var num = document.forms[0].elements.length;
	var url = "";

	//radio button 
	var j = 0;
	var a = 0;
	var radio_buttons = new Array();
	var nome_buttons = new Array();
	var the_form = window.document.forms[0];
	for(var i=0; i<the_form.length; i++){
		var temp = the_form.elements[i].type;
		if ( (temp == "radio") && ( the_form.elements[i].checked) ) { 
			nome_buttons[a] = the_form.elements[i].name;
			radio_buttons[j] = the_form.elements[i].value; 
			j++; 
			a++;
		}
	}
	for(var k = 0; k < radio_buttons.length; k++) {
		url += nome_buttons[k] + "=" + radio_buttons[k] + "&";
	}
	//checkbox
	var j = 0;
	var a = 0;
	var check_buttons = new Array();
	var nome_buttons = new Array();
	var the_form = window.document.forms[0];
	for(var i=0; i<the_form.length; i++){
		var temp = the_form.elements[i].type;
		if ( (temp == "checkbox") && ( the_form.elements[i].checked) ) { 
			nome_buttons[a] = the_form.elements[i].name;
			check_buttons[j] = the_form.elements[i].value; 
			j++; 
			a++;
		}
	}
	for(var k = 0; k < check_buttons.length; k++) {
		url += nome_buttons[k] + "=" + check_buttons[k] + "&";
	}
	for (var i = 0; i < num; i++){
		
		var chiave = document.forms[0].elements[i].name;
		var valore = document.forms[0].elements[i].value;
		var tipo = document.forms[0].elements[i].type;

		if ( (tipo == "submit") || (tipo == "radio") || (tipo == "checkbox") ){}
		else {
			url += chiave + "=" + valore + "&";
		}
	}
	var parameters = url;
	url = FILE + "?" + url;
	if (METHOD == undefined) { METHOD = "GET"; 	}
	if (METHOD == "GET") { ahah(url, 'target', '', METHOD); }
	else { ahah(FILE, 'target', '', METHOD, parameters); }
}

function ahah(url, target, delay, method, parameters) {

  if (method == undefined) {
	  document.getElementById(target).innerHTML = 'caricamento dati in corso...';
	  if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	  } else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
	  }
	  if (req) {
		req.onreadystatechange = function() {
			ahahDone(url, target, delay, method, parameters);
		};
		req.open("GET", url, true);
		req.send("");
	  }  
  }
  if ( (method == "GET") || (method == "get") )
  {
	  document.getElementById(target).innerHTML = 'caricamento dati in corso...';
	  if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	  } else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
	  }
	  if (req) {
		req.onreadystatechange = function() {
			ahahDone(url, target, delay, method, parameters);
		};
		req.open(method, url, true);
		req.send("");
	  }
  }

  if ( (method == "POST") || (method == "post") )
  {
	  document.getElementById(target).innerHTML = 'caricamento dati in corso...';
	  if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	  } else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");
	  }
	  if (req) {
		req.onreadystatechange = function() {
			ahahDone(url, target, delay, method, parameters);
		};
		req.open(method, url, true);
		req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		req.send(parameters);
	  }
  }
}  

function ahahDone(url, target, delay, method, parameters) {
  if (req.readyState == 4) {
    if (req.status == 200) {
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML="ahah error:\n"+req.statusText;
    }
  }
}

parte pagina:

<table width='100%' border='0' align='center' cellpadding='0' cellspacing='0' style='border-collapse:collapse'>
<tr> 
			<td class='cal' colspan='2' bgcolor='#CCCCFF'>
			<div align='right'>aggiungi categoria</div></td>
			</tr>
			<tr> 
			<td class='cal' colspan='2'><form name='frmProvincia' method='post' action="javascript:submit('ahah.php?do=add&what=categoria', 'POST');">

				<div align='center'>
				

			
				<input class='cal' name='categoria' type='text' id='categoria' maxlength='30'>
				<input class='cal' name='add_cat' type='submit' id='add_cat' value='aggiungi'>
				</div>
			</form></td>
			</tr>
			</table>
			<div id='target'></div>

Fammi sapere grazie mille

[LoRdCoStE]

up