Add and Multiply values without refresh from button and input

Asked

Viewed 135 times

0

Good afternoon.

I need to do a calculation without refresh, but I’m encountering difficulties. I’ll try to explain this in the image below:

inserir a descrição da imagem aqui

<script type="text/javascript">
  var xazul = 0;
  function buttonazul1() {
    document.getElementById('output-azul').innerHTML = ++xazul;
  }

  function buttonazul2() {
    document.getElementById('output-azul').innerHTML = --xazul;
  }
</script>

<table style="margin: 0 auto;">
  <tr>
    <td>
      <button type="submit" class="btn btn-default" onclick="buttonazul2()">
        <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i>
      </button>
    </td>                        
    <td>
      <span id="output-azul">0</span>
    </td>
    <td>
      <button type="submit" class="btn btn-default" onclick="buttonazul1()">
        <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i>
      </button>
    </td>
  </tr>
</table>

I programmed the button to add +1 to SPAN, so that the customer chooses the quantity of each product. I need to take that value, multiply it with the unit value of the product, which I’m going to leave in a field hidden, show subtotal and then add the entire subtotal column to give the final purchase total.

Anyway, is this the best method? Is there a better method? How could I perform these calculations, just by clicking the 'more' and 'less' button'?

javascript

  • I replicated your code and it did not reproduce errors...

  • Oops! The '+' and '-' part works normal. I just wanted to understand the logic to make this account.

  • I’m trying to do the operation I described in the image, only I couldn’t create the logic to perform all these calculations without refresh.

  • 1

    @Cyberplague, my instruction was not to repurpose the question. It is to create a new question, it was good this way, the code, preferably, should be placed directly in the question users prefer so. And in the new question remove the refresh part that has already been solved.

  • 1

    https://answall.com/questions/413058/somar-subtrair-extrair-subtotal-e-total-final-com-javascript-jquery

  • @Cyberplague, the question was very good. I left the +1. I saw that you already had an answer if she solved your problem consider accepting it. If you have questions about how to accept a reply read How and why to accept an answer

Show 1 more comment

2 answers

2

First thing I did was replicate your example:

var xazul = 0;

function buttonazul1() {
  document.getElementById('output-azul').innerHTML = ++xazul;
}

function buttonazul2() {
  document.getElementById('output-azul').innerHTML = --xazul;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>
  <table style="margin: 0 auto;">
    <tr>
      <td>
        <button type="button" class="btn btn-default" onclick="buttonazul2()">
        <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i>
      </button>
      </td>
      <td>
        <span id="output-azul">0</span>
      </td>
      <td>
        <button type="button" class="btn btn-default" onclick="buttonazul1()">
        <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i>
      </button>
      </td>
    </tr>
  </table>
</body>

</html>

In executing I was able to see what has already been raised in the comments, that the behavior described does not happen. Then I turned my focus to image the question and it occurred to me that this code could be inserted inside a <form>. So I took the test:

var xazul = 0;

function buttonazul1() {
  document.getElementById('output-azul').innerHTML = ++xazul;
}

function buttonazul2() {
  document.getElementById('output-azul').innerHTML = --xazul;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>
  <form>
    <table style="margin: 0 auto;">
      <tr>
        <td>
          <button type="submit" class="btn btn-default" onclick="buttonazul2()">
        <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i>
      </button>
        </td>
        <td>
          <span id="output-azul">0</span>
        </td>
        <td>
          <button type="submit" class="btn btn-default" onclick="buttonazul1()">
        <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i>
      </button>
        </td>
      </tr>
    </table>
  </form>
</body>

</html>

And really occurred the problem described, just after clicking a button the form is sent and you need to refresh to view the page.

This is because you declared the element <button> with the attribute type="submit" which means your behavior is to send the form data to the server.

To change this behavior you must declare the element <button> with the attribute type="button" which allows the button to have client-side scripts associated with its events.

Element documentation <button>.

var xazul = 0;

function buttonazul1() {
  document.getElementById('output-azul').innerHTML = ++xazul;
}

function buttonazul2() {
  document.getElementById('output-azul').innerHTML = --xazul;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>
  <form>
    <table style="margin: 0 auto;">
      <tr>
        <td>
          <button type="button" class="btn btn-default" onclick="buttonazul2()">
        <i class="fa fa-minus-circle fa-2x" style="color:#FFFFFF;"></i>
      </button>
        </td>
        <td>
          <span id="output-azul">0</span>
        </td>
        <td>
          <button type="button" class="btn btn-default" onclick="buttonazul1()">
        <i class="fa fa-plus-circle fa-2x" style="color:#FFFFFF;"></i>
      </button>
        </td>
      </tr>
    </table>
  </form>
</body>

</html>

  • Thank you very much for your time! Now, as I informed you before, I need to take the value of each product, which I can leave in a variable, without problems. When the person clicks on the plus or the minus, I need to calculate the fixed amount * quantity, to have the subtotal that is next. I’m trying here, but I confess that I have no skill yet with jQuery or Javascript.

  • 1

    @Cyberplague I’m reading the updates you asked in the question.

  • Thanks! I would like to play these values in variables, to make the code cleaner. Now, I’m trying to sum up all the "subtotals" to generate the total.

  • The question is outside the format of the page, increased its scope. I recommend you remove the updates from this question, because the way it is will close because it is too wide. I suggest you open a new question specific to the question of the sum and subtotals would only be interesting to put the code you are really working on because this example does not fit more with what you are asking because when you explain your problem you explain from the perspective of the code that generated that image but we read only have the example code to work generating a cognitive void.

  • Augusto, thanks again. In fact, everything is within what I asked at the beginning, but I really put too much text. I’ll edit the question, make it easier.

  • 1

    The ideal would be the code of the page of the image. Poxa the example only has a line as I will make a sum of a single line. The image page has six lines. It’s okay to make a sum of inputs with jquery is basically var soma = 0;&#xA;$('.subtotais').each(function(){&#xA; sum += this.value;&#xA;}); but I can’t enter that into your blind code. It would be irresponsible of me.

  • 1

    Should I post the full code? Gosh, forgive me, I do it smoothly!

  • This... ask a new question, based on the complete code or if it is too large publish only the <form> that contains the elements containing the values to be summed and multiplied, as well as the element that will receive the total.

  • I’m playing in the Pastebin, to be cleaner.

Show 4 more comments

0

Follow an example of a function, I didn’t quite understand what you want, it does the math:

function upPreco() {
var Valor = document.getElementById("valor").value;
var Pagamento = document.getElementById("total").value;
var Desconto = document.getElementById("desconto").value;
var Mora = document.getElementById("mora").value;
var Multa = document.getElementById("multa").value;
var Outros = document.getElementById("outros").value;
var Total = 0;
var TotalSoma = 0;
var Saldo = 0;
TotalSoma = Number(Mora.replace(/[R\$ \.]/g, '').replace(',', '.')) + Number(Multa.replace(/[R\$ \.]/g, '').replace(',', '.')) + Number(Outros.replace(/[R\$ \.]/g, '').replace(',', '.'));
Total = Number(Valor.replace(/[R\$ \.]/g, '').replace(',', '.')) - Number(Desconto.replace(/[R\$ \.]/g, '').replace(',', '.'));
Total = Total + TotalSoma;
Saldo = Total - Number(Pagamento.replace(/[R\$ \.]/g, '').replace(',', '.'));
$("#saldo").val(Saldo.toFixed(2).replace(".", ","));
 }

and you call her at the event onclick, of + or -, which will not perform the refresh.

  • var xAzul = 0;&#xA; var Valor = 150;&#xA;&#xA; function buttonazul1() {&#xA; &#xA; document.getElementById('quantidadeAzul').innerHTML = ++xAzul;&#xA;&#xA; var SubTotalAzul = 0;&#xA;&#xA; SubTotalAzul = xAzul * Valor;&#xA;&#xA; $("SubTotal").val(SubTotalAzul.toFixed(2).replace(".", ","));&#xA;&#xA; }

  • I can’t implant, something’s wrong.

Browser other questions tagged javascript

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