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.
function PlusRaktar(num) {
  var input = document.getElementById('raktarkeszlet_'+ num);
  input.value = parseInt(input.value, 10) + 1;
}
function MinusRaktar(num) {
  var input = document.getElementById('raktarkeszlet_'+ num);
  input.value = parseInt(input.value, 10) - 1;
}
<input type='text' size='3' name='raktarkeszlet_1' 
id='raktarkeszlet_1' maxlength='3' value='$sor[prod_amount]'>
<input type='button' value='+' size='1' name='plus' onclick='PlusRaktar(1);'>
<input type='button' value='-' size='1' name='minusz' onclick='MinusRaktar(1);'>
2

szerintem

carstepPCE · 2009. Már. 11. (Sze), 12.20
Hali,

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


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


function PlusRaktar( inputid )
{
  var poz = document.getElementById(inputid);
  poz.value = parseInt(poz.value) + 1;
}
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:
<table summary="Raktárkészlet">
  <tbody>
    <tr>
      <td>
        <form name="item_1" method="post" action="" enctype="application/x-www-form-urlencoded">
          <label>Raktárkészlet: 
            <input type="text" name="raktarkeszlet" 
              value="$sor['prod_amount']" size="3" maxlength="3"/>
          </label>
          <input type="button" name="plus" value="+"/>
          <input type="button" name="minus" value="-"/>
          <input type="submit"/>
        </form>
      </td>
    </tr>
  </tbody>
</table>
jQuery-vel így oldanám meg:
$(function() {
  $('table form').each(function() {
    var raktarkeszlet = $(this).find(':text[name="raktarkeszlet"]');
    $(this).find(':button[name]').click(function() {
      if (this.name == 'plus') {
        raktarkeszlet.val(parseInt(raktarkeszlet.val(), 10) + 1);
      }
      if (this.name == 'minus') {
        raktarkeszlet.val(parseInt(raktarkeszlet.val(), 10) - 1);
      }
    });
  });  
});
Ezt átültetni sima DOM hívásokba kicsit macerás, de ezt már rád bízom.