Nu am folosit Ajax pina acum , asa ca am luat un exemplu de pe un site si l-am modificat sa il pot folosi la ce imi trebuie. Exemplul era cu trei comobox-uri dependente (judet, oras , strada) eu l-am adaptat pentru a calcula pretul unui produs format din 2 componente sina si material iar preturile acestora depind de dimensiuni.In primul combo aleg tipul produsului (jaluzele sau rolete) iar celelalte doua se vor popula cu materialele corespunzatoare tipului ales.Mai am doua cimpuri in care trec latimea si inaltimea produsului. Toate acestea le trimit cu ajutorul formularului la un fisier php care preia preturile din baza de date si calculeaza pretul.
As vrea sa am un buton "calculeaza" care la click sa afiseze pretul in aceeasi pagina cu formularul sa nu mai deschid alta pagina.
Form cu Ajax
Moderator: Moderatori
Fisierele pe care le folosesc sunt:
index.html:
index.html:
Cod: Selectaţi tot
<html>
<head>
<title> Pagina Index </title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
<script type="text/javascript" src="js/preloader.js"></script>
<h2>Calculeaza pretul:</h2><br
</head>
<body>
<div style="display:none;" id="loading">
<img alt="prealoder" title="Se incarca" src='images/preloader.gif'/>
</div>
<div id = "cos"><table class="tcentrat">
<form enctype="multipart/form-data" name="administrare" method="post" action="php/CalculJaluzele.php">
<tr><td>Categoria: </td><td><select id="judet"></select></td>
<tr><td>Tip: </td><td><select id="oras" name="oras"></select></td>
<tr><td>Material: </td><td><select id="strada" name="strada"></select></td>
<tr><td>Latime(cm): </td><td width=10> <input type="text" name="latime" /></td></tr>
<tr><td>Inaltime(cm): </td><td width=20> <input type="text" name="inaltime" /></td></tr>
<td><input type="submit" name="Submit" value="Adauga"></td>
<td><input type="reset" name="Submit" value="Sterge"></td>
</tr>
</form>
</table></div>
<div id="rezultat" />
</body>
</html>
Fisierul getData.php cu ajutorul caruia incarc datele in combo material:
Fisierul care populeaza celalalt combo nu il mai atasez pentru ca este asemanator cu getData.php
Mai este fisierul calculjaluzele.php care preia datele din form si calculeaza pretul:
[code]
<body>
<p>Pretul pentru o jaluzea
<?php
$l = $_REQUEST["latime"];
$h = $_REQUEST["inaltime"];
$s = $_REQUEST["oras"];
$t = $_REQUEST["strada"];
mysql_connect("localhost", "root", "") or die ("Nu ma pot conecta la server");
mysql_select_db("splendid") or die ("Nu pot selecta baza de date");
$comanda = "select * from materiale WHERE ID = $t";
$rezultat = mysql_query ($comanda) or die(mysql_error());
$linie = mysql_fetch_array($rezultat);
$pretmp = $linie["PretVanzare"];
$comanda2= "select * from garnise WHERE GarnisaId = $s";
$rezultat2 = mysql_query ($comanda2) or die(mysql_error());
$linie2 = mysql_fetch_array($rezultat2);
$preta = $linie2["PretActionare"];
$pretl = $linie2["PretLatime"];
$preth = $linie2["PretInaltime"];
$pret = $l/100*$h/100*$pretmp+$l/100*$pretl+$h/100*$preth+$preta;
echo " $l cm / $h cm $s cm $t cm $n $pr";
echo "este: $pret Ron.";
?>
</p>
</body>
Cod: Selectaţi tot
<?php
include('conectare.php');
//in functie de cererea primita aleg tabelul dorit si conditia
switch ($_GET['ce']) {
case 'strada' : { $content = '<option selected="selected" value="">-Alege Material-</option>'; $tabel = 'materiale'; $conditie = "WHERE categorie={$_GET['judet_id']}"; break;}
default:
break;
}
$sql = "SELECT ID,Denumire FROM $tabel $conditie";
$result = $conexiune->query($sql);
if (!$result) echo mysqli_error($conexiune);
while ($option = mysqli_fetch_array($result))
{
$content .= '<option value="'.$option['ID'].'">'.$option['Denumire'].'</option>';
}
echo $content;
?>
Fisierul care populeaza celalalt combo nu il mai atasez pentru ca este asemanator cu getData.php
Mai este fisierul calculjaluzele.php care preia datele din form si calculeaza pretul:
[code]
<body>
<p>Pretul pentru o jaluzea
<?php
$l = $_REQUEST["latime"];
$h = $_REQUEST["inaltime"];
$s = $_REQUEST["oras"];
$t = $_REQUEST["strada"];
mysql_connect("localhost", "root", "") or die ("Nu ma pot conecta la server");
mysql_select_db("splendid") or die ("Nu pot selecta baza de date");
$comanda = "select * from materiale WHERE ID = $t";
$rezultat = mysql_query ($comanda) or die(mysql_error());
$linie = mysql_fetch_array($rezultat);
$pretmp = $linie["PretVanzare"];
$comanda2= "select * from garnise WHERE GarnisaId = $s";
$rezultat2 = mysql_query ($comanda2) or die(mysql_error());
$linie2 = mysql_fetch_array($rezultat2);
$preta = $linie2["PretActionare"];
$pretl = $linie2["PretLatime"];
$preth = $linie2["PretInaltime"];
$pret = $l/100*$h/100*$pretmp+$l/100*$pretl+$h/100*$preth+$preta;
echo " $l cm / $h cm $s cm $t cm $n $pr";
echo "este: $pret Ron.";
?>
</p>
</body>
Am reusit in cele din urma.
Fisierul code.js :
Fisierul code.js :
Cod: Selectaţi tot
$(document).ready(function(){
//atunci cand dom ul este pregatit populam primul select cu toate judetele care le avem in tabelul tbl_judete
$.ajax({
method:'GET',
data : 'ce=judet',
ur: "php/getData.php",
success: function(select)
{
$('select#judet').html(select);
},
error : function(mesaj){
alert('eroare'+mesaj);
}
});
});
// $(function() este echivalent cu $(document).ready(function() , un mod de a scrie mai putin cod
$(function(){
//Atunci cand utilizatorul alege un judet Ajax ul trimite o cerere catre script ul getData
// cu avand ca paramentru id ul judetului selectat care este luat din valoarea optiunii judetului selectat
// Scriptul va returna optiunele cu toate orasele din respectivul judet ales si va goli select ul cu strazi
$("select#judet").change(function(){
var judet_id = $(this).val();
$.ajax({
method:'GET',
data : 'ce=oras&judet_id='+judet_id,
ur: "php/getData2.php",
success: function(select)
{
$('#oras').html(select);
}
});
})
$("select#judet").change(function(){
var judet_id = $(this).val();
$.ajax({
method:'GET',
data : 'ce=strada&judet_id='+judet_id,
ur: "php/getData3.php",
success: function(select)
{
$('#strada').html(select);
}
});
})
//Atunci cand utilizatorul alege un oras Ajax ul trimite o cerere catre script ul getData
// cu avand ca paramentru id ul orasului selectat iar scrip ul va popula selectul cu strazile respectivului oras
//Atunci cand utilizatorul modifica si strada vom afisa in div ul cu id ul rezultat Id urile judetului , orasului si respectiv strazii
//alese de catre acesta
$("select#strada").change(function(){
var rezultat = 'Id Judet = '+$('#judet').val()+'<br/> Id Oras ='+$('#oras').val()+'<br/> Id Strada = '+$('#strada').val();
$('#rezultat').(rezultat);
});
})
Înapoi la “Librarii Javascript”
Cine este conectat
Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 21 vizitatori