AJAX i kilka formularzy

Question

Witam,

Dopiero zaczynam zabawę z AJAX i JQuery i napotkałem problem.

Ogólnie to chciałbym dodawać produkty i ilość ich sztuk bez przeładowania do koszyka, wszystko działa gdy mam jeden produkt i jeden formularz, natomiast nie wiem jak zrobić to gdy mam kilka różnych formularzy (produktów z innymi wartościami)

KOD JQ:

<script type="text/javascript">
	jQuery(document).ready(function() {
		$("button[name=dodaj]").click(function() {			
		  var id_prod = $('input[name=id_produkt]').val();
		  var sztuki = $('input[name=sztuki]').val();			  
		   var proceed = true;
		   if(sztuki<="0"){ 
		   $('input[name=sztuki]').addClass('blad'); 
		    $('.bload_tresc').css('display','block');
			setTimeout(function(){
		    $('.bload_tresc').hide(); 
			},3000)
		   proceed = false;
		   }  
		  if(proceed==true) 
		   {
			$.ajax({
				url: "skrypt.php",
				type: "POST",
				data: "add=1&id_prod="+id_prod+"&sztuki="+sztuki,
				success: function(msg) {
					$("#kontener").html(msg);
				}
			});
			$("input").removeClass('blad'); 
		   } 
		});
	});
	</script>

Kod HTML:

<form action="#">
  <div class="ilosc">Ilość<br>
    <input type="number" min="1" name="sztuki"  value="5"/>
  </div>
  <input type="hidden" name="id_produkt" value="210"/>
  <div class="bload_tresc">Proszę wybrać liczbę nie mniejszą niż 1</div>
  <div class="wiecej">
    <button type="button" name="dodaj" style="background:none; border:none;"><i style="color:#005826;" class="fa fa-2x fa-check-circle"></i> </button>
  </div>
</form>
<br>
<br>
<br>
<form action="#" >
  <div class="ilosc">Ilość<br>
    <input type="number" min="1" name="sztuki"  value="10"/>
  </div>
  <input type="hidden" name="id_produkt" value="212"/>
  <div class="bload_tresc">Proszę wybrać liczbę nie mniejszą niż 1</div>
  <div class="wiecej">
    <button type="button" name="dodaj" style="background:none; border:none;"><i style="color:#005826;" class="fa fa-2x fa-check-circle"></i> </button>
  </div>
</form>

Próbowałem coś z opcją "this" w jq ale nie do końca ją rozumiem, przeglądam już którąś godzinę google ale nie mogę znaleźć nic co by mi trochę pomogło.

Answer 1

W .click() możesz się odwołać do formy np $(this).parents('form') i wtedy pobrać wartości z inputów tylko w obrębie tej formy albo szybciej/leniwiej za pomocą .serialize()

http://api.jquery.com/serialize/

Zauważ, że serialize() jest w event handlerze dla 'submit' podpiętym do formy a nie jak w Twoim przypadku 'click' na buttonie.

Comments

Zrobiłem coś takiego, niby działa, ale czy jest to poprawnie zrobione?

 <script type="text/javascript">
	jQuery(document).ready(function() {		
		$("button[name=dodaj]").click(function() {				
		  var id_prod =$(this).parents('form').find('input[name=id_produkt]').val();
		  var sztuki = $(this).parents('form').find('input[name=sztuki]').val();			  
		   var proceed = true;
		   if(sztuki<="0"){ 
		   $(this).parents('form').find('input[name=sztuki]').addClass('blad'); 
		   $(this).parents('form').find('.bload_tresc').css('display','block');
			setTimeout(function(){
		    $('.bload_tresc').hide(); 
			},3000)
		   proceed = false;
		   }  
		  if(proceed==true) 
		   {
			$.ajax({
				url: "skrypt.php",
				type: "POST",
				data: "add=1&id_prod="+id_prod+"&sztuki="+sztuki,
				success: function(msg) {
					$("#kontener").html(msg);
				}
			});
			$("input").removeClass('blad'); 
		   } 
		});
	});
	</script>