CODEWITHSUNDEEP
javascriptjquery
Kilax31
Kilax31

Reputation: 35

jQuery dynamic table searches

I'm trying to make a dynamic calculator for a table

And for this table I have:

 <button type="button" class="btn btn-primary">Enviar Pedido 00.00 $</button>

What I'm trying to achieve is , when user writes something in a input , the value searches for the price and multiplies it. And that sum gets added to the button.

So if I would write 2 in the #item1 , I would have 5 dollars in the Enviar Pedido.

What I did so far:

$('input#item1').keypress(function() {
  alert('a');
});

I'm really struggling and all I could find out is to use the keypress for any modification in the input. It doesn't seem right though to do this for all 8 inputs + I'm not sure how to search in the parent for the "Valor" value.

https://jsfiddle.net/a7u1y8bc/1/

$('input#item1').keypress(function() {
  alert('a');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Valor</th>
      <th scope="col">Quantidade</th>
  </thead>
  <tbody>
    <tr>
      <td>Batata Inglesa (500g)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item1" name="item1" step="1" min="0" max="10"></td>
    </tr>


    <tr>
      <td>Beterraba (500g)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item2" name="item2" step="1" min="0" max="10"></td>
    </tr>

    <tr>
      <td>Cenoura (500g)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item3" name="item3" step="1" min="0" max="10"></td>
    </tr>


    <tr>
      <td>Alface Crespa (1 un)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item4" name="item4" step="1" min="0" max="10"></td>
    </tr>

    <tr>
      <td>Alface Lisa (1 un)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item5" name="item5" step="1" min="0" max="10"></td>
    </tr>

    <tr>
      <td>Brócolis (1 maço)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item6" name="item6" step="1" min="0" max="10"></td>
    </tr>


    <tr>
      <td>Hortelã (1 maço)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item7" name="item7" step="1" min="0" max="10"></td>
    </tr>

    <tr>
      <td>Limão Cravo (500g)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item8" name="item8" step="1" min="0" max="10"></td>
    </tr>

  </tbody>
</table>


<button type="button" class="btn btn-primary">Enviar Pedido 0.00</button>

Upvotes: 0

Views: 66

Answers (2)

Sean T
Sean T

Reputation: 2504

You can get the value to the left of the input using jQuery parent() and prev(). Then use replace() to get the desired result, so something like...

    $('input#item1').keypress(function() {
        const price = $(this).parent().prev().text();
    const v = $(this).val();
    const d = parseFloat(price.replace("R$", "").replace(",",".").replace(" ", "")).toFixed(2);

});

It's not a great way to go about it though, it's probably best to put the initial price as an attribute of the input and use attr() to get it.

<input type="number" id="item1" name="item1" step="1" min="0" max="10" data-price="2.50"/>

$('input#item1').keypress(function() {
     const price = $(this).attr('data-price');
});

Upvotes: 1

Tyler Roper
Tyler Roper

Reputation: 21672

  • I've changed the event to be attached to table input[type=number], which is "Any number input within a table". If you need to be more specific than that, consider using a class on all the inputs instead.

  • To get the Valor <td> element, you can do the following:

    $(this)              //The input being changed
    .closest("td")   //Its parent TD
    .prev();         //The previous sibling

  • Once you have that, you can get the value of it using .text(). You'll have to remove the R$ and replace the , with a . before attempting to parse it as a number.

  • You'll have to do that for every input in the table, so I've wrapped that logic in an .each().

  • The result is formatted with two decimal places and a comma, using .toFixed(2).replace('.',',');

var $numberInputs = $('table input[type=number]');
var $btn = $('button.btn.btn-primary');

$numberInputs.keyup(function() {
  var sum = getSumOfInputs().toFixed(2).replace('.',',');
  $btn.text("Enviar Pedido " + sum);
});

function getSumOfInputs() {
  var result = 0.00;
  $numberInputs.each(function() {
    var $td = $(this).closest("td").prev();
    var valor = parseFloat($td.text().replace('R$ ', '').replace(',', '.'));
    var qty = parseInt($(this).val() || 0);
    result += (valor * qty);
  });

  return result;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Valor</th>
      <th scope="col">Quantidade</th>
  </thead>
  <tbody>
    <tr>
      <td>Batata Inglesa (500g)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item1" name="item1" step="1" min="0" max="10"></td>
    </tr>


    <tr>
      <td>Beterraba (500g)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item2" name="item2" step="1" min="0" max="10"></td>
    </tr>

    <tr>
      <td>Cenoura (500g)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item3" name="item3" step="1" min="0" max="10"></td>
    </tr>


    <tr>
      <td>Alface Crespa (1 un)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item4" name="item4" step="1" min="0" max="10"></td>
    </tr>

    <tr>
      <td>Alface Lisa (1 un)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item5" name="item5" step="1" min="0" max="10"></td>
    </tr>

    <tr>
      <td>Brócolis (1 maço)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item6" name="item6" step="1" min="0" max="10"></td>
    </tr>


    <tr>
      <td>Hortelã (1 maço)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item7" name="item7" step="1" min="0" max="10"></td>
    </tr>

    <tr>
      <td>Limão Cravo (500g)</td>
      <td>R$ 2,50</td>
      <td><input type="number" id="item8" name="item8" step="1" min="0" max="10"></td>
    </tr>

  </tbody>
</table>


<button type="button" class="btn btn-primary">Enviar Pedido 0.00</button>

Upvotes: 0

Related Questions