ugrás a tartalomhoz

JS plusz-minusz gomb

Vakond · 2009. Már. 11. (Sze), 11.33
Sziasztok!

Belső felhasználásra készítettem egy kis raktár kezelő programot. Úgy működik, hogy a kiválasztott kategória után minden terméket egy külön táblázatba listáz ki egymás alá.

A raktárkészletet és a foglalást egy text input mezőben lehet módosítani. Ennek az értékét szeretném plusz - minusz JS gombal változtatni.

Csináltam is egyet, de az a nagy hibája mindig a legfelső táblázat értékét módosítja. Szeretném a kódot úgy módosítani, hogy a JS gomb mindig a megfelelő sor megfelelő értékét módosítsa.

Ez a JS:

function PlusRaktar()
{
 
  var poz = document.getElementById('raktarkeszlet').value;
 
  document.getElementById('raktarkeszlet').value = parseInt(poz) +1;
 
}


Ez pedig a form:

<input type='text' size='3' name='raktarkeszlet' id='raktarkeszlet' maxlength='3' value='$sor[prod_amount]'>
<input type='button' value='+' size='1' name='plus'  id='raktarkeszlet' onclick='PlusRaktar();'>
<input type='button' value='-' size='1' name='minusz' id='raktarkeszlet' onclick='MinusRaktar();'>


Ebben szeretném a segítségeteket kérni.

Előre is köszi a válaszokat!
‹ betűméret változtatás js: select tag-re feltétel ›
 ■
1

Elnevezések

Poetro · 2009. Már. 11. (Sze), 12.18
Ne nevezd ugyanúgy eleve a form mezőidet, és akkor máris csökken a lehetséges problémák száma.
  1. function PlusRaktar(num) {  
  2.   var input = document.getElementById('raktarkeszlet_'+ num);  
  3.   input.value = parseInt(input.value, 10) + 1;  
  4. }  
  5. function MinusRaktar(num) {  
  6.   var input = document.getElementById('raktarkeszlet_'+ num);  
  7.   input.value = parseInt(input.value, 10) - 1;  
  8. }  
  1. <input type='text' size='3' name='raktarkeszlet_1'   
  2. id='raktarkeszlet_1' maxlength='3' value='$sor[prod_amount]'>  
  3. <input type='button' value='+' size='1' name='plus' onclick='PlusRaktar(1);'>  
  4. <input type='button' value='-' size='1' name='minusz' onclick='MinusRaktar(1);'>  
2

szerintem

carstepPCE · 2009. Már. 11. (Sze), 12.20
Hali,
  1. <input type='text' size='3' name='raktarkeszlet' id='raktarkeszlet' maxlength='3' value='$sor[prod_amount]'>  
  2. <input type='button' value='+' size='1' name='raktarkeszlet-plus'  id='raktarkeszlet-plusz' onclick='PlusRaktar('raktarkeszlet');'>  
  3. <input type='button' value='+' size='1' name='raktarkeszlet-minusz'  id='raktarkeszlet-minusz' onclick='MinusRaktar('raktarkeszlet');'>  
  1. <input type='text' size='3' name='foglalas' id='foglalas' maxlength='3' value='$sor[prod_amount]'>  
  2. <input type='button' value='+' size='1' name='foglalas-plus'  id='foglalas-plusz' onclick='PlusRaktar('foglalas');'>  
  3. <input type='button' value='+' size='1' name='foglalas-minusz'  id='foglalas-minusz' onclick='MinusRaktar('foglalas');'>  
  1. function PlusRaktar( inputid )  
  2. {  
  3.   var poz = document.getElementById(inputid);  
  4.   poz.value = parseInt(poz.value) + 1;  
  5. }  
itt az 'inputid' az aktualis beviteli mezo /raktarkeszlet, foglalas/ azonositoja

-cs-
Sanyi
3

És a form számát is fogja

Vakond · 2009. Már. 11. (Sze), 12.20
És a form számát is fogja modosítani, hogy tudja melyik form és hova?
4

Milyen form?

Poetro · 2009. Már. 11. (Sze), 12.23
Eddig nem volt szó több form-ról. Kérlek újra írd le, mit is akarsz.
5

formok...

Vakond · 2009. Már. 11. (Sze), 12.26
"minden terméket egy külön táblázatba listáz ki egymás alá."

Ez azt jelenti, hogy egymás alatt több form jelenik meg, benn a különböző értékekkel, és ezeket külön-külön akarom modosítani (mindegyik form mellett megjelenik ez a JS gomb).
6

jQuery

Poetro · 2009. Már. 11. (Sze), 14.59
A következő HTMLt feltételezve:
  1. <table summary="Raktárkészlet">  
  2.   <tbody>  
  3.     <tr>  
  4.       <td>  
  5.         <form name="item_1" method="post" action="" enctype="application/x-www-form-urlencoded">  
  6.           <label>Raktárkészlet:   
  7.             <input type="text" name="raktarkeszlet"   
  8.               value="$sor['prod_amount']" size="3" maxlength="3"/>  
  9.           </label>  
  10.           <input type="button" name="plus" value="+"/>  
  11.           <input type="button" name="minus" value="-"/>  
  12.           <input type="submit"/>  
  13.         </form>  
  14.       </td>  
  15.     </tr>  
  16.   </tbody>  
  17. </table>  
jQuery-vel így oldanám meg:
  1. $(function() {  
  2.   $('table form').each(function() {  
  3.     var raktarkeszlet = $(this).find(':text[name="raktarkeszlet"]');  
  4.     $(this).find(':button[name]').click(function() {  
  5.       if (this.name == 'plus') {  
  6.         raktarkeszlet.val(parseInt(raktarkeszlet.val(), 10) + 1);  
  7.       }  
  8.       if (this.name == 'minus') {  
  9.         raktarkeszlet.val(parseInt(raktarkeszlet.val(), 10) - 1);  
  10.       }  
  11.     });  
  12.   });    
  13. });  
Ezt átültetni sima DOM hívásokba kicsit macerás, de ezt már rád bízom.