Increment in one field and Decrement in another

Asked

Viewed 85 times

0

I’m on a project where, several input spinners by increasing in one field he decreases in another.

Example: In the 1st field I have the value 2. In the 2nd field I have the value 4. When clicking to decrease in the 1st field it will pass the subtracted value for the 2nd field being with the values 1 and 5 respectively.

function id(el) {
  return document.getElementById(el);
}

function menos(id_qnt) {
  var qnt = parseInt(id(id_qnt).value);
  if (qnt > 0)
    id(id_qnt).value = qnt - 1;
}

function mais(id_qnt) {
  id(id_qnt).value = parseInt(id(id_qnt).value) + 1;
}
<form action="" method="post">
  <input type="text" name="quantidade" id="quantidade1" value="0" size="1" readonly="readonly" />
  <input type="button" value="+" onclick="mais( 'quantidade1' )">
  <input type="button" value="-" onclick="menos( 'quantidade1' )">
</form>

<form action="" method="post">
  <input type="text" name="quantidade" id="quantidade2" value="0" size="1" readonly="readonly" />
  <input type="button" value="+" onclick="mais( 'quantidade2' )">
  <input type="button" value="-" onclick="menos( 'quantidade2' )">
</form>

<form action="" method="post">
  <input type="text" name="quantidade" id="quantidade3" value="0" size="1" readonly="readonly" />
  <input type="button" value="+" onclick="mais( 'quantidade3' )">
  <input type="button" value="-" onclick="menos( 'quantidade3' )">
</form>

I found this sample code

javascript
  • 1

    Is this the right Client Side programming? I mean, on the Client side, you don’t need the right server? You can put in your question the example you tried?

  • You are using an input type="number"?

  • This seems to be a Javascript problem, so Laravel does not enter the wheel. Being Javascript interacting with HTML, it seems to me that you already have HTML done, so please add the code to the question.

  • Yes. I’m using Laravel 5.5.

  • you will have more than two fields?

  • In your case there are 3 as would be logic?

  • In this case, it would have 5 fields. But with 2 fields it is easier to understand the logic.

  • pera a little if your rule is 5 fields the question also needs to be, because: what do you intend how this works? understood!

  • Got it, Virgilio. But the 2-field rule of business is fine. The rest is just replicate.

  • Then explain to me if I click on the fifth input where the result goes?

  • At the last input it will be disabled. This I already have.

Show 6 more comments

1 answer

0


Basically just put in the function of menos who will be awarded with another, example:

function id(el) {
  return document.getElementById(el);
}

function menos(id_qnt, id_add_qnt) {
  var qnt = parseInt(id(id_qnt).value);
  if (qnt > 0) {
    id(id_qnt).value = qnt - 1;
    id(id_add_qnt).value =
        parseInt(id(id_add_qnt).value) + 1;
  }
}

function mais(id_qnt) {
  id(id_qnt).value = parseInt(id(id_qnt).value) + 1;
}
<div>
  <input type="text" name="quantidade" id="quantidade1" value="0" size="1" readonly="readonly" />
  <input type="button" value="+" onclick="mais( 'quantidade1' )">
  <input type="button" value="-" onclick="menos( 'quantidade1' ,'quantidade2')">
</div>

<div>
  <input type="text" name="quantidade" id="quantidade2" value="0" size="1" readonly="readonly" />
  <input type="button" value="+" onclick="mais( 'quantidade2' )">
  <input type="button" value="-" onclick="menos( 'quantidade2' ,'quantidade3')">
</div>

<div>
  <input type="text" name="quantidade" id="quantidade3" value="0" size="1" readonly="readonly" />
  <input type="button" value="+" onclick="mais( 'quantidade3' )">
  <input type="button" value="-" onclick="menos( 'quantidade3' ,'quantidade1')">
</div>

at least the initial logic of the comments.

  • @Kelvin.Almeida worked out well?

  • Helped a lot friend. Thank you very much!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.