Utilizare Ajax cu date preluate din formulare

In general, datele adaugate in casetele dintr-un formular sunt trimise prin POST la un script de pe server specificat in atributul "action" al etichetei <form>.
Cu Ajax puteti trimite datele preluate din formulare atat prin metoda GET cat si prin metoda POST. Totusi, tinand cont ca prin GET continutul care poate fi trimis este limitat iar in formulare pot fi adaugate o cantitate mare de date, in special daca aveti o caseta <textarea>, e de preferat folosirea metodei POST.
Procedeul de trimitere a datelor din formulare folosind Ajax este similar cu exemplele prezentate in lectiile anterioare, diferenta e data de modul de preluare a acestor date. Pentru formulare, datele din casetele acestuia pot fi preluate folosind una din urmatoarele formule:
                document.nume_form.nume_caseta.value
- unde "nume_form" e valoarea adaugata in atributul "name" din eticheta <form>, iar "nume_caseta" e valoarea adaugata in atributul "name" din caseta a carei valoare vrem sa o preluam.
Sau
                document.getElementById(id_caseta).value
- unde "id_caseta" e valoarea adaugata in atributul "id" din caseta a carei valoare vrem sa o preluam.
Despre lucru cu JavaScript si date din formulare puteti citi si in lectia -> Ierarhia JavaScript (la punctul 2).

Iata si un exemplu practic, din care sa intelegeti mai bine.
1. - Creati pe server un fisier PHP, de exemplu "test_form.php", in care adaugati urmatorul cod:

<?php
// Daca sunt primite date din formular
if (isset($_POST['nume']) && isset($_POST['mesaj'])) {
    $nume = $_POST['nume'];
    $mesaj = $_POST['mesaj'];

    // Daca au fost completate casetele din formular
    if (strlen($nume)>0 && strlen($mesaj)>0) {
        echo 'Bine ai venit <b>'. $nume. '</b><br />Mesajul pe care ti-l transmiti este "<i>'. $mesaj. '</i>"';
    }
    else {
        echo 'Completati toate campurile din formular';
    }
}
?>
- Acesta este un script PHP care primeste date prin POST. Le stocheaza in variabile "$nume" si "$mesaj", si daca au fost completate toate campurile din formular (verificand cu "strlen()" daca sirurile sunt mai mari decat zero), afiseaza /transmite un mesaj, in caz contrar atentioneaza ca nu au fost completate toate casetele.

2. - Creati un fisier HTML pe server, de exemplu "ajax_form.html", in acelasi director unde este si fisierul "test_form.php", si adaugati in el codul de mai jos (studiati si comentariile din cod).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Exemplu Ajax cu Form</title>

<script type="text/javascript">
<!--
// Functia care trimite datele la un fisier PHP si returneaza raspunsul
function ajaxrequest(formular, tagID) {
  var ob_ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  // Preia datele necesare din formular
  var numele = formular.nume.value;
  var mesajul = formular.mesaj.value;

  // Construieste datele care trebuie trimise prin POST la scriptul PHP (perechi nume=valoare)
  var  datele = 'nume='+numele+'&mesaj='+mesajul;

  ob_ajax.open("POST", 'test_form.php', true);			// Creaza cererea

  // Adauga un Header specific pentru ca datele sa fie recunoscute ca au fost trimise prin POST
  ob_ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ob_ajax.send(datele);		// Efectueaza trimiterea cererii, impreuna cu valorile care trebuie transmise

  // Verifica starea cererii
  // Daca raspunsul e primit complet, il transfera in eticheta HTML cu id-ul din "tagID"
  ob_ajax.onreadystatechange = function() {
    if (ob_ajax.readyState == 4) {
      document.getElementById(tagID).innerHTML = ob_ajax.responseText;
    }
  }
}
//-->
</script>
</head>
<body>

<form action="test_form.php" method="post" name="form1" onsubmit="ajaxrequest(this, 'raspuns'); return false;">
  Numele tau: <input type="text" name="nume" id="nume" size="20" maxlength="33" /><br />
  Transmite un mesaj:<br />
  <textarea name="mesaj" id="mesaj" cols="25" rows="4"></textarea><br />
  <input type="submit" value="Trimite" />
</form>
<div id="raspuns"> </div>

</body>
</html>
		
- Aici este un document HTML ce are in sectiunea HEAD un script pentru Ajax, iar in sectiunea BODY un formular in care vizitatori pot adauga un nume si un mesaj, aceste date vor fi trimise la script-ul Ajax care apoi le trimite la script-ul PHP din fisierul "test_form.php".
- Codul onsubmit="ajaxrequest(this, 'raspuns'); return false;", din eticheta <form>, face ca la click pe butonul "Trimite" sa fie apelata direct functia "ajaxrequest()" (si nu adresa din atributul "action"), transferandu-i ca argument "this" (care aici reprezinta formularul curent) si id-ul div-ului in care va fi adaugat raspunsul.
Sintaxa "return false" are rolul de a opri deschiderea din formular a adresei din "action", fara aceasta sintaxa, dupa trimiterea datelor la scriptul Ajax, ar fi fost apelata in fereastra navigatorului si adresa din atributul "action"; totusi, aceasta e bine sa fie adaugata deoarece astfel datele vor fi trimise la fisierul PHP si daca utilizatorul are JavaScript dezactivat.
- Dupa ce in variabila "ob_ajax" este adaugata instanta la obiectul XMLHttpRequest, sunt preluate datele din formular in variabilele "numele" si "mesajul".
- Apoi am creat variabila "datele" pentru a construi si adauga aceste date sub forma care este recunoscuta de script-ul PHP (perechi indice=valoare); aceasta variabila va fi folosita ca parametru al metodei "send()".
- In continuare este creata cererea cu "open()", continand tipul metodei de transfer POST si adresa, numele fisierului PHP.
- Pentru ca datele sa fie recunoscute ca au fost trimise prin POST, am adaugat cu metoda "setRequestHeader()" un Header specific, iar datele care trebuie recunoscute de scriptul PHP sunt adaugate ca parametru in "send(datele)".
- Scriptul PHP va procesa datele si dupa ce se verifica faptul ca raspunsul a fost primit complet, il afiseaza in div-ul cu id-ul precizat pentru "tagID".
Daca deschideti fisierul "ajax_form.html" va afisa urmatorul rezultat.
Numele tau:
Transmite un mesaj:

- Completati campurile din formular si dati click pe butonul "Trimite.

Daca doriti ca datele preluate din formular sa fie trimise de scriptul Ajax prin GET, aplicati exemplul prezentat in Lectia 2. In acest caz trebuie modificat si scriptul PHP, ca sa preia datele primite prin GET.

Puteti construi si exemple mai complicate, cum ar fi functii JavaScript care sa auto-apeleze la intervale de timp (cu "setInterval()") o functie Ajax, sau scriptul PHP sa foloseasca datele primite pentru a le adauga intr-o baza de date ori in alte fisiere. Totul depinde de imaginatia si cunostintele dumneavoastra.
Ajax cu POST si ... <<-- Anterior --- Urmator -->> Trimitere date prin GET ...

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
viviĆ³ vivido viviendo
Estoy viviendo aquĆ­.
- Traiesc /Locuiesc aici.
Ajax cu formulare - Tutorial Ajax