API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 23rd, 2019
175
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.92 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">
  6.         <title>Volo Manual Order Listing</title>
  7.    
  8.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  9.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  10.     <style>
  11.     .form-group {
  12.         margin-bottom: 0.5em;
  13.       }
  14.       html { font-size: 70%; }
  15.     </style>
  16.   </head>
  17.     <body>
  18.     <div class="container">
  19.     <h2>Address Information</h2>
  20.       <div class="row">
  21.         <div class="col-6">
  22.        
  23.           <form id="orderForm" method="POST" action="test.php">
  24.             <div class="form-group">
  25.               <label for="bill_name"></label>
  26.               <div class="input-group">
  27.                 <div class="input-group-prepend">
  28.                   <div class="input-group-text">Billing Name</div>
  29.                 </div>
  30.                 <input id="bill_name" name="bill_name" type="text" required="required" class="form-control">
  31.                 <div class="input-group-append">
  32.                   <div class="input-group-text">
  33.                     <i class="fa fa-building-o"></i>
  34.                   </div>
  35.                 </div>
  36.               </div>
  37.             </div>
  38.             <div class="form-group">
  39.               <label for="bill_line_1"></label>
  40.               <div class="input-group">
  41.                 <div class="input-group-prepend">
  42.                   <div class="input-group-text">Billing Line 1</div>
  43.                 </div>
  44.                 <input id="bill_line_1" name="bill_line_1" type="text" required="required" class="form-control">
  45.                 <div class="input-group-append">
  46.                   <div class="input-group-text">
  47.                     <i class="fa fa-building-o"></i>
  48.                   </div>
  49.                 </div>
  50.               </div>
  51.             </div>
  52.             <div class="form-group">
  53.               <label for="bill_line_2"></label>
  54.               <div class="input-group">
  55.                 <div class="input-group-prepend">
  56.                   <div class="input-group-text">Billing Line 2</div>
  57.                 </div>
  58.                 <input id="bill_line_2" name="bill_line_2" type="text" class="form-control">
  59.                 <div class="input-group-append">
  60.                   <div class="input-group-text">
  61.                     <i class="fa fa-building-o"></i>
  62.                   </div>
  63.                 </div>
  64.               </div>
  65.             </div>
  66.             <div class="form-group">
  67.               <label for="bill_line_3"></label>
  68.               <div class="input-group">
  69.                 <div class="input-group-prepend">
  70.                   <div class="input-group-text">Billing Line 3</div>
  71.                 </div>
  72.                 <input id="bill_line_3" name="bill_line_3" type="text" class="form-control">
  73.                 <div class="input-group-append">
  74.                   <div class="input-group-text">
  75.                     <i class="fa fa-building-o"></i>
  76.                   </div>
  77.                 </div>
  78.               </div>
  79.             </div>
  80.             <div class="form-group">
  81.               <label for="bill_line_4"></label>
  82.               <div class="input-group">
  83.                 <div class="input-group-prepend">
  84.                   <div class="input-group-text">Billing Line 4</div>
  85.                 </div>
  86.                 <input id="bill_line_4" name="bill_line_4" type="text" aria-describedby="bill_line_4HelpBlock" class="form-control">
  87.                 <div class="input-group-append">
  88.                   <div class="input-group-text">
  89.                     <i class="fa fa-building-o"></i>
  90.                   </div>
  91.                 </div>
  92.               </div>
  93.               <span id="bill_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
  94.             </div>
  95.             <div class="form-group">
  96.               <label for="bill_county"></label>
  97.               <div class="input-group">
  98.                 <div class="input-group-prepend">
  99.                   <div class="input-group-text">Billing County</div>
  100.                 </div>
  101.                 <input id="bill_county" name="bill_county" type="text" class="form-control">
  102.                 <div class="input-group-append">
  103.                   <div class="input-group-text">
  104.                     <i class="fa fa-globe"></i>
  105.                   </div>
  106.                 </div>
  107.               </div>
  108.             </div>
  109.             <div class="form-group">
  110.               <label for="bill_post"></label>
  111.               <div class="input-group">
  112.                 <div class="input-group-prepend">
  113.                   <div class="input-group-text">Billing Postcode</div>
  114.                 </div>
  115.                 <input id="bill_post" name="bill_post" type="text" required="required" class="form-control">
  116.                 <div class="input-group-append">
  117.                   <div class="input-group-text">
  118.                     <i class="fa fa-area-chart"></i>
  119.                   </div>
  120.                 </div>
  121.               </div>
  122.             </div>
  123.             <div class="form-group">
  124.               <label for="bill_telephone"></label>
  125.               <div class="input-group">
  126.                 <div class="input-group-prepend">
  127.                   <div class="input-group-text">Billing Telephone Number</div>
  128.                 </div>
  129.                 <input id="bill_telephone" name="bill_telephone" type="text" class="form-control">
  130.                 <div class="input-group-append">
  131.                   <div class="input-group-text">
  132.                     <i class="fa fa-phone"></i>
  133.                   </div>
  134.                 </div>
  135.               </div>
  136.             </div>
  137.             <div class="form-group">
  138.               <label for="bill_email"></label>
  139.               <div class="input-group">
  140.                 <div class="input-group-prepend">
  141.                   <div class="input-group-text">Billing Email Address</div>
  142.                 </div>
  143.                 <input id="bill_email" name="bill_email" type="text" class="form-control">
  144.                 <div class="input-group-append">
  145.                   <div class="input-group-text">
  146.                     <i class="fa fa-tablet"></i>
  147.                   </div>
  148.                 </div>
  149.               </div>
  150.             </div>
  151.         </div>
  152.         <div class="col-6">
  153.        
  154.               <div class="form-group">
  155.                 <label for="ship_name"></label>
  156.                 <div class="input-group">
  157.                   <div class="input-group-prepend">
  158.                     <div class="input-group-text">Shipping Name</div>
  159.                   </div>
  160.                   <input id="ship_name" name="ship_name" type="text" required="required" class="form-control">
  161.                   <div class="input-group-append">
  162.                     <div class="input-group-text">
  163.                       <i class="fa fa-building-o"></i>
  164.                     </div>
  165.                   </div>
  166.                 </div>
  167.               </div>
  168.               <div class="form-group">
  169.                 <label for="ship_line_1"></label>
  170.                 <div class="input-group">
  171.                   <div class="input-group-prepend">
  172.                     <div class="input-group-text">Shipping Line 1</div>
  173.                   </div>
  174.                   <input id="ship_line_1" name="ship_line_1" type="text" required="required" class="form-control">
  175.                   <div class="input-group-append">
  176.                     <div class="input-group-text">
  177.                       <i class="fa fa-building-o"></i>
  178.                     </div>
  179.                   </div>
  180.                 </div>
  181.               </div>
  182.               <div class="form-group">
  183.                 <label for="ship_line_2"></label>
  184.                 <div class="input-group">
  185.                   <div class="input-group-prepend">
  186.                     <div class="input-group-text">Shipping Line 2</div>
  187.                   </div>
  188.                   <input id="ship_line_2" name="ship_line_2" type="text" class="form-control">
  189.                   <div class="input-group-append">
  190.                     <div class="input-group-text">
  191.                       <i class="fa fa-building-o"></i>
  192.                     </div>
  193.                   </div>
  194.                 </div>
  195.               </div>
  196.               <div class="form-group">
  197.                 <label for="ship_line_3"></label>
  198.                 <div class="input-group">
  199.                   <div class="input-group-prepend">
  200.                     <div class="input-group-text">Shipping Line 3</div>
  201.                   </div>
  202.                   <input id="ship_line_3" name="ship_line_3" type="text" class="form-control">
  203.                   <div class="input-group-append">
  204.                     <div class="input-group-text">
  205.                       <i class="fa fa-building-o"></i>
  206.                     </div>
  207.                   </div>
  208.                 </div>
  209.               </div>
  210.               <div class="form-group">
  211.                 <label for="ship_line_4"></label>
  212.                 <div class="input-group">
  213.                   <div class="input-group-prepend">
  214.                     <div class="input-group-text">Shipping Line 4</div>
  215.                   </div>
  216.                   <input id="ship_line_4" name="ship_line_4" type="text" aria-describedby="ship_line_4HelpBlock" class="form-control">
  217.                   <div class="input-group-append">
  218.                     <div class="input-group-text">
  219.                       <i class="fa fa-building-o"></i>
  220.                     </div>
  221.                   </div>
  222.                 </div>
  223.                 <span id="ship_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
  224.               </div>
  225.               <div class="form-group">
  226.                 <label for="ship_county"></label>
  227.                 <div class="input-group">
  228.                   <div class="input-group-prepend">
  229.                     <div class="input-group-text">Shipping County</div>
  230.                   </div>
  231.                   <input id="ship_county" name="ship_county" type="text" class="form-control">
  232.                   <div class="input-group-append">
  233.                     <div class="input-group-text">
  234.                       <i class="fa fa-globe"></i>
  235.                     </div>
  236.                   </div>
  237.                 </div>
  238.               </div>
  239.               <div class="form-group">
  240.                 <label for="ship_post"></label>
  241.                 <div class="input-group">
  242.                   <div class="input-group-prepend">
  243.                     <div class="input-group-text">Shipping Postcode</div>
  244.                   </div>
  245.                   <input id="ship_post" name="ship_post" type="text" required="required" class="form-control">
  246.                   <div class="input-group-append">
  247.                     <div class="input-group-text">
  248.                       <i class="fa fa-area-chart"></i>
  249.                     </div>
  250.                   </div>
  251.                 </div>
  252.               </div>
  253.               <div class="form-group">
  254.                 <label for="ship_telephone"></label>
  255.                 <div class="input-group">
  256.                   <div class="input-group-prepend">
  257.                     <div class="input-group-text">Shipping Telephone Number</div>
  258.                   </div>
  259.                   <input id="ship_telephone" name="ship_telephone" type="text" class="form-control">
  260.                   <div class="input-group-append">
  261.                     <div class="input-group-text">
  262.                       <i class="fa fa-phone"></i>
  263.                     </div>
  264.                   </div>
  265.                 </div>
  266.               </div>
  267.               <div class="form-group">
  268.                 <label for="ship_email"></label>
  269.                 <div class="input-group">
  270.                   <div class="input-group-prepend">
  271.                     <div class="input-group-text">Shipping Email Address</div>
  272.                   </div>
  273.                   <input id="ship_email" name="ship_email" type="text" class="form-control">
  274.                   <div class="input-group-append">
  275.                     <div class="input-group-text">
  276.                       <i class="fa fa-tablet"></i>
  277.                     </div>
  278.                   </div>
  279.                 </div>
  280.               </div>
  281.            
  282.             <button type="button" onclick="test()" class="btn btn-primary pull-right"><i class="fa fa-copy"></i></button>
  283.         </div>
  284.         </div>
  285.         <br>
  286.         <div class="container">
  287.         <h2>Extra Information</h2>
  288.           <div class="row">
  289.             <div class="col-6">
  290.              
  291.                 <div class="form-group row">
  292.                   <label for="ship_method" class="col-5 col-form-label">Shipping Method</label>
  293.                   <div class="col-7">
  294.                     <div class="input-group">
  295.                       <input id="ship_method" name="ship_method" type="text" class="form-control">
  296.                       <div class="input-group-append">
  297.                         <div class="input-group-text">
  298.                           <i class="fa fa-anchor"></i>
  299.                         </div>
  300.                       </div>
  301.                     </div>
  302.                   </div>
  303.                 </div>
  304.                 <div class="form-group row">
  305.                   <label for="extra_shipping" class="col-5 col-form-label">Extra Shipping</label>
  306.                   <div class="col-7">
  307.                     <div class="input-group">
  308.                       <input id="extra_shipping" name="extra_shipping" type="text" class="form-control" aria-describedby="extra_shippingHelpBlock">
  309.                       <div class="input-group-append">
  310.                         <div class="input-group-text">
  311.                           <i class="fa fa-money"></i>
  312.                         </div>
  313.                       </div>
  314.                     </div>
  315.                     <span id="extra_shippingHelpBlock" class="form-text text-muted">(Leave Blank For Free Shipping)</span>
  316.                   </div>
  317.                 </div>
  318.                 <div class="form-group row">
  319.                   <label for="mage_order_number" class="col-5 col-form-label">Magento Order Number</label>
  320.                   <div class="col-7">
  321.                     <div class="input-group">
  322.                       <input id="mage_order_number" name="mage_order_number" type="text" class="form-control">
  323.                       <div class="input-group-append">
  324.                         <div class="input-group-text">
  325.                           <i class="fa fa-bars"></i>
  326.                         </div>
  327.                       </div>
  328.                     </div>
  329.                   </div>
  330.                 </div>
  331.              
  332.             </div>
  333.           </div>
  334.         </div>
  335.         <br><br>
  336.         <div class="container">
  337.         <h2>Item Information</h2>
  338.           <div class="row">
  339.             <div class="col-12">
  340.               <table id="myTable" class=" table order-list">
  341.               <thead>
  342.                   <tr>
  343.                       <td>SKU</td>
  344.                       <td>Quantity</td>
  345.                       <td>Price</td>
  346.                   </tr>
  347.               </thead>
  348.               <tbody>
  349.                   <tr>
  350.                       <td>
  351.                           <input  type="text" name="sku" class="form-control" />
  352.                       </td>
  353.                       <td>
  354.                           <input type="number" name="quantity"  class="form-control"/>
  355.                       </td>
  356.                       <td>
  357.                           <input type="number" name="price"  class="form-control"/>
  358.                       </td>
  359.                       <td><a class="deleteRow"></a>
  360.                       </td>
  361.                   </tr>
  362.               </tbody>
  363.               <tfoot>
  364.                   <tr>
  365.                       <td colspan="5" style="text-align: left;">
  366.                           <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
  367.                       </td>
  368.                   </tr>
  369.                   <tr>
  370.                   </tr>
  371.               </tfoot>
  372.           </table>
  373.           <input type="submit" id="submitButton"  name="submitButton" value="Submit">
  374.           </form>
  375.         </div>
  376.       </div>
  377.     </div>      
  378.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  379.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  380.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  381.     </body>
  382. </html>
  383. <script>
  384.  
  385.  
  386.               function test() {
  387.                 var billName = document.getElementById('bill_name');
  388.                 var shipName = document.getElementById('ship_name');
  389.  
  390.                 var billLine1 = document.getElementById('bill_line_1');
  391.                 var shipLine1 = document.getElementById('ship_line_1');
  392.  
  393.                 var billLine2 = document.getElementById('bill_line_2');
  394.                 var shipLine2 = document.getElementById('ship_line_2');
  395.  
  396.                 var billLine3 = document.getElementById('bill_line_3');
  397.                 var shipLine3 = document.getElementById('ship_line_3');
  398.  
  399.                 var billLine4 = document.getElementById('bill_line_4');
  400.                 var shipLine4 = document.getElementById('ship_line_4');
  401.  
  402.                 var billCounty = document.getElementById('bill_county');
  403.                 var shipCounty = document.getElementById('ship_county');
  404.  
  405.                 var billPostcode = document.getElementById('bill_post');
  406.                 var shipPostcode = document.getElementById('ship_post');
  407.  
  408.                 var billTele = document.getElementById('bill_telephone');
  409.                 var shipTele = document.getElementById('ship_telephone');
  410.  
  411.                 var billEmail = document.getElementById('bill_email');
  412.                 var shipEmail = document.getElementById('ship_email');
  413.                
  414.                
  415.                 shipName.value = billName.value;
  416.                 shipLine1.value = billLine1.value;
  417.                 shipLine2.value = billLine2.value;
  418.                 shipLine3.value = billLine3.value;
  419.                 shipLine4.value = billLine4.value;
  420.                 shipCounty.value = billCounty.value;
  421.                 shipPostcode.value = billPostcode.value;
  422.                 shipTele.value = billTele.value;
  423.                 shipEmail.value = billEmail.value;
  424.                
  425.             }
  426.  
  427.            
  428.  
  429. </script>
  430. <script>
  431. $(document).ready(function () {
  432.     var counter = 0;
  433.  
  434.     $("#addrow").on("click", function () {
  435.         var newRow = $("<tr>");
  436.         var cols = "";
  437.  
  438.         cols += '<td><input type="text" class="form-control" name="sku' + counter + '"/></td>';
  439.         cols += '<td><input type="text" class="form-control" name="quantity' + counter + '"/></td>';
  440.         cols += '<td><input type="text" class="form-control" name="price' + counter + '"/></td>';
  441.  
  442.         cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
  443.         newRow.append(cols);
  444.         $("table.order-list").append(newRow);
  445.         counter++;
  446.     });
  447.  
  448.  
  449.  
  450.     $("table.order-list").on("click", ".ibtnDel", function (event) {
  451.         $(this).closest("tr").remove();      
  452.         counter -= 1
  453.     });
  454.  
  455.  
  456. });
  457.  
  458.  
  459. </script>
  460. <script>
  461.  
  462. $('input#submitButton').on('click', function(e)  {
  463.  
  464. e.preventDefault(); // avoid to execute the actual submit of the form.
  465.  
  466. var form = $('form#orderForm');
  467. var url = form.attr('action');
  468.  
  469. $.ajax({
  470.       type: "POST",
  471.       url: url,
  472.       data: form.serialize(), // serializes the form's elements.
  473.       success: function(data)
  474.       {
  475.        
  476.         console.log(data);
  477.  
  478.       }
  479.     });
  480.  
  481.  
  482. });
  483. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!