1

I am trying to make a restaurant order table(form) with the columns (checkbox, article, quantity, price). I would like to get the value of the checkbox and assign it to the value of the textbox, knowing that the table is populated from the Mysql database using a PHP code. I want to make the price of each item visible in the corresponding textbox, everytime I click on its corresponding checkbox.

// my attempt at a jqyery function 

$(document).ready(function(){
  $('input:checkbox').click(function(){
    $('input:checkbox:checked').each(function(){
     var price = parseInt(($(this).val()));
    });
    $('#<?php echo $row['idchoix'] ?>').val(price);
  });
});


// the php code for the table

<?php

// Check connection

$result = mysqli_query($con,"SELECT * from menu order by type");

echo "<form action='order.php' method='POST' >";
echo "<legend id='legend'>Nouvelle commande</legend>";
echo "<table class='table table-bordered table-striped table-hover' >
<tr>
<th>Categorie</th>
<th></th>
<th>Article</th>
<th>Prix unitaire</th>
<th>Quantité</th>
<th>Somme</th>
</tr>";



while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['type'] . "</td>";

echo "<td> <input type='checkbox' class='form-check-input' id='check1' value='".$row['prixunitaire']."'> </td>";
echo "<td>" . $row['choix'] . "</td>";

echo "<td>" . $row['prixunitaire'], "Dh" . "</td>";

echo "<td> <div class='btn-toolbar' role='toolbar' aria-label='Toolbar with button groups'>
  <div class='btn-group mr-2' role='group' aria-label='First group' required='required'>
    <button type='button' class='btn btn-secondary' >x1</button>
    <button type='button' class='btn btn-secondary'>x2</button>
    <button type='button' class='btn btn-secondary'>x3</button>
    <input type='number' class='btn btn-secondary form-control' style='width:70px;' name='quantity' value='4' ></div></div></td>";


echo "<td> . <input type='number' class='btn btn-secondary form-control' style='width:200px;' id='".$row['idchoix']."' name='quantity' value=00.00 readonly> </td>";


echo "</tr>";
}

echo "</table>";

echo "<input class='btn btn-success form-control' type='submit' value='Envoyer la commande'>";

echo "</form>";
?>
Anass Talai
  • 11
  • 2
  • What value do you expect the checkbox to have? – Dharman Apr 29 '19 at 20:23
  • 2
    Well, just glancing at your javascript, you have a scoping issue. price is scoped to the each callback, and will not exist outside of it. You need to raise the scope if you want to use it outside. – Taplar Apr 29 '19 at 20:24
  • 1
    Possible duplicate of [Get checkbox value in jQuery](https://stackoverflow.com/questions/2834350/get-checkbox-value-in-jquery) – Dharman Apr 29 '19 at 20:32
  • @Dharman I expect the checkboxes to keep their initial values, and the text boxes to receive the values of the corresponding checked checkbox. – Anass Talai May 01 '19 at 11:57
  • You are talking about multiple textboxes and yet your JavaScript only handles one. What is the connection between checkbox and textbox? How do you know which one corresponds to the checkbox you ticked. – Dharman May 01 '19 at 12:06
  • @Dharman ooh I see the problem now, but I don't really know how to fix it. – Anass Talai May 01 '19 at 12:12
  • Assign a data element to the checboxes which will help you yo identify which text box should be updated. Then in JS read that data attribute abd use it to select right text box. – Dharman May 01 '19 at 12:17

1 Answers1

0

You can try like this I think it is a scope issue for price variable

$(document).ready(function(){
  $('input:checkbox').click(function(){
    var price;
    $('input:checkbox:checked').each(function(){
     price = parseInt(($(this).val()));
    });
    $('#<?php echo $row['idchoix'] ?>').val(price);
  });
});
Anshul
  • 375
  • 3
  • 14