Jquery

avatar
unknown
plain_text
3 years ago
4.8 kB
5
Indexable
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
    <div class="container">
        
        <div class="row" style="margin-top: 30px;">
            <div class="col">
                <h3 style="text-align: center;">Services</h3>
                <form method="POST">
                    <div class="row">
                        <div class="col">
                            <label>Select Service</label>
                            <select id="service_add" class="form-control" required>
                                <option value="">Select Service</option>
                                <option value="5000">thyroid function test</option>
                                <option value="7000">thoracentesis</option>
                                <option value="4300">lumbar puncture</option>
                                <option value="6000">gastric fluid analysis</option>
                                <option value="700">blood analysis</option>
                            </select>
                        </div>
                    </div>
        
                    <button style="margin-top: 15px;" type="submit" id="add" class="btn btn-primary" name="add">Add</button>
                </form>
            </div>
            <div class="col">
                <h3 style="text-align: center;">Cart</h3>
                <table id="service_details" class="table">
                    <thead class="thead-dark">
                      <tr>
                        <th scope="col">Service Name</th>
                        <th scope="col">Service Price</th>
                      </tr>
                    </thead>
                    <tbody id="data_row">
                      
                      
                    </tbody>
                    <tfoot id="data_total_price">

                    </tfoot>
                  </table>
            </div>
        </div>
    </div>


    </body>



    <script>
        $("#service_details").hide();
        var row_html = '', total_html = '';
        var total_price = 0;
        $(document).ready(function(){
            var data = [];
            
          $("#service_add").change(function(){
              var object_arry = {};
              $service_price = $("#service_add").val();
              $service_name = $("#service_add option:selected").text();
              $("#service_details").show();
              if ($service_price.length!=0&&check_dublicate(data,$service_name)==true){
                object_arry['service_price'] = $service_price;
                object_arry['service_name'] = $service_name;
                data.push(object_arry);

                total_price+=parseInt($service_price);
                
                row_html += '<tr><td>'+$service_name+'</td><td>'+$service_price+'</td></tr>';
                total_html = '<tr><td>Total Price</td><td>'+total_price+'</td></tr>';
                $("#data_row").html(row_html);
                $("#data_total_price").html(total_html);
                
              }
              
              
          });
        });
        function check_dublicate(data = [], $service_name){
            for(var i = 0; i <data.length; i++){
                if(data[i].service_name==$service_name){
                    alert("You have already selected it.")
                    return false;
                    break;
                }
            }
            return true;
        }
    </script>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>
Editor is loading...