Skip to Content
0
Oct 05 at 09:13 AM

Vendor portal HTML

78 Views Last edit Oct 05 at 10:46 AM 3 rev

<!DOCTYPE html>  
<html>  
<head>  
  <title> Product Enquiry </title>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>  


</head>  
<body>  
      
<div class="container">  
  <h1> Product Enquiry </h1>  
  
  <BR>
   <label for="vendors">Choose the Customer:</label>
  <select id="vendors" name="vendors">
    <option value="Vendor1">Customer1</option>
    <option value="Vendor2">Customer2</option>
    <option value="Vendor3">Customer3</option>
    <option value="Vendor4">Customer4</option>
    </select>
    
    <h2>
    </h2>
    


    
 <form >
  <label for="fname">Quotation No:</label><br>
  <input type="text" id="fname" name="fname" value=""><br>
  </form>
   <form Style = "text-align : Left";>
  <label for="fname">Quotation Date:</label><br>
  <input type="date" id="fname" name="fname" value=""><br>
</form>
<BR>
      
  <form>  
          
    <div class="form-group">  
      <label>Item name:</label>  
      <input type="text" name="IN" class="form-control" value="" required="">  
    </div>  
      
    <div class="form-group">  
      <label>Quantity:</label>  
      <input type="text" name="Qty" class="form-control" value="" required="">  
    </div> 
    
    <div class="form-group">  
      <label>Price:</label>  
      <input type="text" name="Price" class="form-control" value="" required="">  
    </div>  
     
    <button type="submit" class="btn btn-success save-btn">Add</button>  
      
  </form>  
  <br/>  
  <table class="table table-bordered data-table">  
    <thead>  
      <th>Item Name</th>  
      <th>Quantity</th> 
      <th>price</th>
      <th width="200px">Action</th>  
    </thead>  
    <tbody>  
      
    </tbody>  
  </table>  
     
</div>  
     
<script type="text/javascript">  
     
    $("form").submit(function(e){  
        e.preventDefault();  
        var IN = $("input[name='IN']").val();  
        var Qty = $("input[name='Qty']").val();  
         var Price = $("input[name='Price']").val();
       
        $(".data-table tbody").append("<tr data-IN='"+IN+"' data-Qty='"+Qty+"'data-Price='"+Price+"'><td>"+IN+"</td><td>"+Qty+"</td><td>"+Price+"</td><td><button class='btn btn-info btn-xs btn-edit'>Edit</button><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>");  
      
        $("input[name='IN']").val('');  
        $("input[name='Qty']").val('');
        $("input[name='Price']").val('');
    });  
     
    $("body").on("click", ".btn-delete", function(){  
        $(this).parents("tr").remove();  
    });  
      
    $("body").on("click", ".btn-edit", function(){  
        var IN = $(this).parents("tr").attr('data-IN');  
        var Qty = $(this).parents("tr").attr('data-Qty');  
        var Price = $(this).parents("tr").attr('data-Price');
      
        $(this).parents("tr").find("td:eq(0)").html('<input name="edit_IN" value="'+IN+'">');  
        $(this).parents("tr").find("td:eq(1)").html('<input name="edit_Qty" value="'+Qty+'">'); 
        $(this).parents("tr").find("td:eq(2)").html('<input name="edit_Price" value="'+Price+'">'); 
      
        $(this).parents("tr").find("td:eq(3)").prepend("<button class='btn btn-info btn-xs btn-update'>Update</button><button class='btn btn-warning btn-xs btn-cancel'>Cancel</button>")  
        $(this).hide();  
    });  
     
    $("body").on("click", ".btn-cancel", function(){  
        var IN = $(this).parents("tr").attr('data-IN');  
        var Qty = $(this).parents("tr").attr('data-Qty'); 
        var Price = $(this).parents("tr").attr('data-Price'); 
        
      
        $(this).parents("tr").find("td:eq(0)").text(IN);  
        $(this).parents("tr").find("td:eq(1)").text(Qty);
         $(this).parents("tr").find("td:eq(2)").text(Price);
     
        $(this).parents("tr").find(".btn-edit").show();  
        $(this).parents("tr").find(".btn-update").remove();  
        $(this).parents("tr").find(".btn-cancel").remove();  
    });  
     
    $("body").on("click", ".btn-update", function(){  
        var IN = $(this).parents("tr").find("input[name='edit_IN']").val();  
        var Qty = $(this).parents("tr").find("input[name='edit_Qty']").val();  
        var Price = $(this).parents("tr").find("input[name='edit_Price']").val();
      
        $(this).parents("tr").find("td:eq(0)").text(IN);  
        $(this).parents("tr").find("td:eq(1)").text(Qty); 
        $(this).parents("tr").find("td:eq(2)").text(Price);
       
        $(this).parents("tr").attr('data-IN', IN);  
        $(this).parents("tr").attr('data-Qty', Qty);
        $(this).parents("tr").attr('data-Price', Price);
      
        $(this).parents("tr").find(".btn-edit").show();  
        $(this).parents("tr").find(".btn-cancel").remove();  
        $(this).parents("tr").find(".btn-update").remove();  
    });  
      
</script>  
       
</body>  
</html>