API tools faq
paste
Guest User

Untitled

a guest
Aug 26th, 2017
646
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 31.30 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2.  
  3. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8" />
  6.    
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  8.     <title>CALIFORNIA INTERIORS --  Cotizador</title>
  9.  
  10.     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  11.   <meta name="viewport" content="width=device-width" />
  12.  
  13.    
  14.   <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
  15.  
  16.   <link href="assets/css/bootstrap-theme.min.css" rel="stylesheet" />
  17.   <link href="assets/js/bootstrap.min.js" rel="stylesheet" />
  18.  
  19.     <link href="assets/css/gsdk-base.css" rel="stylesheet" />
  20.    
  21.   <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">
  22.  
  23.   <script>
  24.   <?php include 'imagen.css';?>
  25.   function sel_prod(value) //Lo que pasa cuando se selecciona un producto
  26.   {
  27.     $('#estilo').val('').change();
  28.     $('#estiloP').val('').change();
  29.  
  30.     var select=document.getElementById("estilo");
  31.     var op=select.getElementsByTagName("option");
  32.  
  33.     var select_r=document.getElementById("rango");
  34.     var op_r=select_r.getElementsByTagName("option");
  35.  
  36.  
  37.     if(value==''){
  38.       for (var i = 1; i < op.length; i++) op[i].style.display="none";
  39.     }else if(value=='Alfombra'){
  40.      // $('#img_prod').attr("src",'img/alfombra.jpg'); //**************imagen para alfombra****************
  41.       //mostrar ventana que diga que todos las alfombras son bajo pedido
  42.       //alert("Todas las alfombras son bajo pedido.");
  43.  
  44.    //   $("#msg-pedido").css('display','block');
  45.  
  46.   <?php <img src="http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img-mushroom.jpg" class="imagen">
  47.  
  48. <p>Colores disponibles:</p>
  49. <img src="http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img02-mushroom.jpg" onClick="cambiaImagen(0)" class="mini">
  50. <img src="http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img03-brown.jpg" onClick="cambiaImagen(1)" class="mini">
  51. <img src="http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img04-chocolate.jpg" onClick="cambiaImagen(2)" class="mini">
  52. ?>
  53.  
  54.       function cambiaImagen(X){
  55.  
  56. var img = [
  57.             'http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img-mushroom.jpg',
  58.             'http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img-brown.jpg',
  59.             'http://www.persianasfarz.com/images/productos/enrollable/inspiracion/img-chocolate.jpg',
  60.          
  61.           ];
  62.  
  63. $(".imagen").attr('src',img[X]);
  64.  
  65. }
  66.  
  67.  
  68.  
  69.       //mostramos y ocultamos estilos
  70.       for (var i = 0; i < 3; i++) op[i].style.display="block";
  71.       for (var i = 3; i < op.length; i++) op[i].style.display="none";
  72.  
  73.       $('#div_estilos').css('display','block');
  74.       $('#div_est_pasto').css('display','none');
  75.       $('#div_calidad').css('display','block');
  76.       $('#div_color_pers').css('display','none');
  77.  
  78.       $('#mExterior').css('display', 'none');
  79.       $('#mInterior').css('display', 'none');
  80.  
  81.     }else if(value=='Pasto'){
  82.       $('#img_prod').attr("src",'img/pasto.jpg'); //**************imagen para pasto ****************
  83.       $('#div_estilos').css('display','none');
  84.       $('#div_est_pasto').css('display','block');
  85.       $('#div_calidad').css('display','none');
  86.       $('#div_color_pers').css('display','none');
  87.  
  88.       $('#mExterior').css('display', 'none');
  89.       $('#mInterior').css('display', 'none');
  90.       $('#color').css('display', 'none');
  91.  
  92.       for (var i = 1; i < 10; i++) op_r[i].style.display="none";
  93.       for (var i = 10; i < 12; i++) op_r[i].style.display="block";
  94.       for (var i = 12; i < op_r.length; i++) op_r[i].style.display="none";
  95.  
  96.     }else if(value=='Piso'){
  97.       $('#img_prod').attr("src",'img/piso.jpg'); //**************imagen para piso ****************
  98.       for (var i = 1; i < 3; i++) op[i].style.display="none";
  99.       for (var i = 3; i < 7; i++) op[i].style.display="block";
  100.       for (var i = 7; i < op.length; i++) op[i].style.display="none";
  101.  
  102.       $('#div_estilos').css('display','block');
  103.       $('#div_est_pasto').css('display','none');
  104.       $('#div_calidad').css('display','block');
  105.       $('#div_color_pers').css('display','none');
  106.  
  107.       $('#mExterior').css('display', 'none');
  108.       $('#mInterior').css('display', 'none');
  109.      
  110.     }else if(value=='Persianas'){
  111.       /*for (var i = 1; i < 7; i++) op[i].style.display="none"; <!--Estilo de las persianas-->
  112.       for (var i = 7; i < op.length; i++) op[i].style.display="block";*/
  113.  
  114.       $('#img_prod').attr("src",'img/persianas.jpg'); //**************imagen para persianas ****************
  115.       for (var i = 1; i < 18; i++) op_r[i].style.display="none";
  116.       for (var i = 18; i < 21; i++) op_r[i].style.display="block";
  117.       for (var i = 21; i < op_r.length; i++) op_r[i].style.display="none";
  118.  
  119.       $('#div_estilos').css('display','none');
  120.       $('#div_est_pasto').css('display','none');
  121.       $('#div_calidad').css('display','none');
  122.       $('#div_color_pers').css('display', 'block');
  123.  
  124.       $('#mExterior').css('display', 'block');
  125.       $('#mInterior').css('display', 'block');
  126.     }
  127.   }
  128.  
  129.   function sel_estilo(value) //lo que pasa cuando se selecciona un estilo
  130.   {
  131.     $('#rango').val('').change();
  132.     var select=document.getElementById("rango");
  133.     var op=select.getElementsByTagName("option");
  134.  
  135.     if(value==''){
  136.       for (var i = 1; i < op.length; i++) op[i].style.display="none";
  137.     }else if(value=='Trafico'){
  138.       for (var i = 1; i < 3; i++) op[i].style.display="block";
  139.       for (var i = 3; i < op.length; i++) op[i].style.display="none";
  140.     }else if(value=='Residencial'){
  141.       $("#msg-pedido").modal({
  142.         modal: true,
  143.         buttons: {
  144.             Ok: function() {
  145.                 $( this ).modal( "close" );
  146.             }
  147.         }
  148.       });
  149.       for (var i = 1; i < 3; i++) op[i].style.display="none";
  150.       for (var i = 3; i < 10; i++) op[i].style.display="block";
  151.       for (var i = 10; i < op.length; i++) op[i].style.display="none";
  152.    
  153.     }else if(value=='7mm'){
  154.       for (var i = 1; i < 12; i++) op[i].style.display="none";
  155.       for (var i = 12; i < 14; i++) op[i].style.display="block";
  156.       for (var i = 14; i < op.length; i++) op[i].style.display="none";
  157.     }else if(value=='8mm'){
  158.       for (var i = 1; i < 14; i++) op[i].style.display="none";
  159.       for (var i = 14; i < 16; i++) op[i].style.display="block";
  160.       for (var i = 16; i < op.length; i++) op[i].style.display="none";
  161.     }else if(value=='10mm'){
  162.       for (var i = 1; i < 16; i++) op[i].style.display="none";
  163.       for (var i = 16; i < 18; i++) op[i].style.display="block";
  164.       for (var i = 18; i < op.length; i++) op[i].style.display="none";
  165.  
  166.     }else if(value=='12mm'){
  167.       for (var i = 1; i < op.length; i++) op[i].style.display="none"; //??????
  168.  
  169.     }else if(value=='Rollet'){
  170.  
  171.     }else if(value=='Wollet'){
  172.  
  173.     }else if(value=='Panellet'){
  174.  
  175.     }else if(value=='Aluminix'){
  176.  
  177.     }
  178.   }
  179.  
  180.   function sel_rango(value) //lo que pasa cuando se selecciona un rango
  181.   {
  182.     $('#calidad').val('').change();
  183.     var select=document.getElementById("calidad");
  184.     var op=select.getElementsByTagName("option");
  185.  
  186.     $('#estiloP').val('').change();
  187.     var select=document.getElementById("estiloP");
  188.     var op_P=select.getElementsByTagName("option");
  189.  
  190.     $('#colorPers').val('').change();
  191.     var select=document.getElementById("colorPers");
  192.     var op_Pers=select.getElementsByTagName("option");
  193.  
  194.     if(value==''){
  195.       for (var i = 1; i < op.length; i++) op[i].style.display="none";
  196.       for (var i = 1; i < op_P.length; i++) op_P[i].style.display="none";
  197.       for (var i = 1; i < op_Pers.length; i++) op_Pers[i].style.display="none";
  198.     }else if(value=='250'){
  199.       op[1].style.display="block";
  200.       op[2].style.display="none";
  201.       op[3].style.display="none";
  202.       op[4].style.display="none";
  203.       for (var i = 5; i < op.length; i++) op[i].style.display="none";
  204.  
  205.     }else if(value=='351'){
  206.       op[2].style.display="block";
  207.       op[3].style.display="block";
  208.       op[4].style.display="block";
  209.       op[1].style.display="none";
  210.       for (var i =5 ; i < op.length; i++) op[i].style.display="none";
  211.  
  212.     }else if(value=='300'){
  213.       for (var i = 1; i < 5; i++) op[i].style.display="none";
  214.       op[5].style.display="block";
  215.       for (var i = 6; i < op.length; i++) op[i].style.display="none";
  216.     }else if(value=='451'){
  217.       for (var i = 1; i < 6; i++) op[i].style.display="none";
  218.       op[6].style.display="block";
  219.       for (var i = 7; i < op.length; i++) op[i].style.display="none";
  220.     }else if(value=='601_1'){
  221.       for (var i = 1; i < 7; i++) op[i].style.display="none";
  222.       op[7].style.display="block";
  223.       for (var i = 8; i < op.length; i++) op[i].style.display="none";
  224.     }else if(value=='751'){
  225.       for (var i = 1; i < 8; i++) op[i].style.display="none";
  226.       op[8].style.display="block";
  227.       for (var i = 9; i < op.length; i++) op[i].style.display="none";
  228.     }else if(value=='951'){
  229.       for (var i = 1; i < 9; i++) op[i].style.display="none";
  230.       op[9].style.display="block";
  231.       for (var i = 10; i < op.length; i++) op[i].style.display="none";
  232.     }else if(value=='1101'){
  233.       for (var i = 1; i < 10; i++) op[i].style.display="none";
  234.       op[10].style.display="block";
  235.       for (var i = 11; i < op.length; i++) op[i].style.display="none";
  236.     }else if(value=='1250'){
  237.       for (var i = 1; i < 11; i++) op[i].style.display="none";
  238.       op[11].style.display="block";
  239.       for (var i = 12; i < op.length; i++) op[i].style.display="none";
  240.     }else if(value=='450'){
  241.       op_P[1].style.display="block";
  242.       op_P[2].style.display="none";
  243.       op_P[3].style.display="none";
  244.     }else if(value=='450_2'){
  245.       op_P[2].style.display="block";
  246.       op_P[1].style.display="none";
  247.       op_P[3].style.display="none";
  248.     }else if(value=='601_2'){
  249.       op_P[3].style.display="block";
  250.       op_P[1].style.display="none";
  251.       op_P[2].style.display="none";
  252.     }else if(value=='350'){
  253.       for (var i = 1; i < 13; i++) op[i].style.display="none";
  254.       op[12].style.display="block";
  255.       for (var i = 14; i < op.length; i++) op[i].style.display="none";
  256.     }else if(value=='401'){
  257.       for (var i = 1; i < 13; i++) op[i].style.display="none";
  258.       for (var i = 13; i < 15; i++) op[i].style.display="block";
  259.       for (var i = 15; i < op.length; i++) op[i].style.display="none";
  260.     }else if(value=='500'){
  261.       for (var i = 1; i < 15; i++) op[i].style.display="none";
  262.       op[15].style.display="block";
  263.       for (var i = 16; i < op.length; i++) op[i].style.display="none";
  264.     }else if(value=='551'){
  265.       for (var i = 1; i < 16; i++) op[i].style.display="none";
  266.       op[16].style.display="block";
  267.       for (var i = 17; i < op.length; i++) op[i].style.display="none";
  268.     }else if(value=='600'){
  269.       for (var i = 1; i < 17; i++) op[i].style.display="none";
  270.       op[17].style.display="block";
  271.       for (var i = 18; i < op.length; i++) op[i].style.display="none";
  272.     }else if(value=='700'){
  273.       for (var i = 1; i < 18; i++) op[i].style.display="none";
  274.       op[18].style.display="block";
  275.       for (var i = 19; i < op.length; i++) op[i].style.display="none";
  276.     }else if(value=='1000'){
  277.       for (var i = 1; i < 4; i++) op_Pers[i].style.display="block";
  278.       for (var i = 4; i < op.length; i++) op_Pers[i].style.display="none";
  279.     }else if(value=='1501'){
  280.       for (var i = 1; i < 4; i++) op_Pers[i].style.display="none";
  281.       for (var i = 4; i < 7; i++) op_Pers[i].style.display="block";
  282.       for (var i = 7; i < op_Pers.length; i++) op_Pers[i].style.display="none";
  283.     }else if(value=='2002'){
  284.       for (var i = 1; i < 7; i++) op_Pers[i].style.display="none";
  285.       for (var i = 7; i < op_Pers.length; i++) op_Pers[i].style.display="block";
  286.     }
  287.  
  288.   }
  289.  
  290.   </script>
  291. </head>
  292.  
  293. <body >
  294. <div class="image-container set-full-height" style="background-image: url('http://4.bp.blogspot.com/-P64BfRcnZK8/UXCHQvUE6lI/AAAAAAAAAis/_rQYb8Xn4AY/s1600/claves-para-una-decoracion-vintage.jpg')">
  295.    
  296.    
  297.     <!--   Big container   -->
  298.     <div class="container">
  299.         <div class="row">
  300.         <div class="col-sm-8 col-sm-offset-2">
  301.            
  302.             <!--      Wizard container        -->  
  303.             <div class="wizard-container">
  304.                
  305.                 <div class="card wizard-card ct-wizard-orange" id="wizardProfile">
  306.                     <form action="" method="post" id="estimate">
  307.                 <!--        You can switch "ct-wizard-orange"  with one of the next bright colors: "ct-wizard-blue", "ct-wizard-green", "ct-wizard-orange", "ct-wizard-red"             -->
  308.                
  309.                         <div class="wizard-header">
  310.                             <h3>
  311.                                <b>COTIZADOR</b>  CALIFORNIA INTERIORS <br>
  312.                                <small>El fino complemento para decorar</small>
  313.                             </h3>
  314.                         </div>
  315.                         <ul>
  316.                             <li><a href="#about" data-toggle="tab">Información del Cliente</a></li>
  317.                             <li><a href="#account" data-toggle="tab">Información del Producto</a></li>
  318.                             <li><a href="#address" data-toggle="tab">Características del Producto</a></li>
  319.                         </ul>
  320.                        
  321.                         <div class="tab-content">
  322.                             <div class="tab-pane" id="about">
  323.                               <div class="row">
  324.                                   <h4 class="info-text">Información del Cliente </h4>
  325.                                  
  326.                                   <div class="col-sm-6 col-sm-offset-3">
  327.                                       <div class="form-group">
  328.                                         <label>Nombres</label>
  329.                                         <input name="firstname" type="text" class="form-control" placeholder="Antonio Gamez..." required>
  330.                                       </div>
  331.                                      
  332.                                   </div>
  333.                                  
  334.                                  
  335.                                   <div class="col-sm-6 col-sm-offset-3">
  336.                                       <div class="form-group">
  337.                                           <label>Email</label>
  338.                                           <input name="email" type="email" class="form-control" placeholder="ramon@gmail.com" required>
  339.                                       </div>
  340.                                   </div>
  341.                                  
  342.                                   <div class="col-sm-6 col-sm-offset-3">
  343.                                       <div class="form-group">
  344.                                           <label>Celular</label>
  345.                                           <input name="phone" type="text" class="form-control" placeholder="6621....">
  346.                                       </div>
  347.                                   </div>
  348.                               </div>
  349.                             </div>
  350.                             <div class="tab-pane" id="account">
  351.                                 <h4 class="info-text"> Información del producto </h4>
  352.                                 <div class="row">
  353.                                    <div class="col-sm-4">
  354.                                     <img id="img_prod" src='http://www.vintagedecoracion.com.mx/images/neulux/persianas-neulux.jpg' class='img-responsive'>
  355.                                  
  356.                                 </div>
  357.  
  358.  
  359.                                 <div class="col-sm-8">
  360.                   <div class="form-group">
  361.                     <label>Producto <small>(Requerido)</small></label>
  362.                      <select class='form-control' required name='producto'  onchange="sel_prod(this.value)">
  363.                                             <option value=''>-- Selecciona --</option>
  364.                                             <option value='Alfombra' data-toggle="modal" data-target="#msg-pedido">Alfombra</option>
  365.                                             <option value='Pasto'>Pasto Sintético</option>
  366.                                             <option value='Piso'>Piso Laminado-TERZA</option>
  367.                       <option value='Persianas'>Persianas</option>
  368.                                    
  369.                                         </select>
  370.                   </div>    
  371.                  
  372.                   <div class="col-sm-15">
  373.                       <div class="form-group">
  374.                           <label>Área</label>
  375.                           <input type="text" name="ancho" class="form-control" placeholder="Sala, Estancia, Escalera, Patio, etc." required>
  376.                       </div>
  377.                   </div>
  378.  
  379.  
  380.                   <div class="col-sm-4">
  381.                       <div class="form-group">
  382.                           <label>Ancho</label>
  383.                           <input type="text" name="ancho" class="form-control" placeholder="1.205" required>
  384.                       </div>
  385.                   </div>
  386.  
  387.  
  388.                   <div class="col-sm-4">
  389.                       <div class="form-group">
  390.                           <label>Largo</label>
  391.                           <input type="text" name="ancho" class="form-control" placeholder="1.205" required>
  392.                       </div>
  393.                    </div>
  394.                                    
  395.                   <div class="col-sm-4">
  396.                       <div class="form-group">
  397.                          <label>ó</label> <label>Metros Cuadrados</label>
  398.                            <input type="text" name="ancho" class="form-control" placeholder="1.205" required>
  399.                       </div>
  400.                   </div>
  401.  
  402.                  
  403.                                       <div id="div_estilos" class="form-group">
  404.                                         <label>Estilo </label>
  405.                                         <select class='form-control' id="estilo" required name='estilo' onchange="sel_estilo(this.value)">
  406.                                             <option value=''>-- Selecciona --</option>
  407.                        <!--     Alfombra       -->  
  408.                                             <option value='Trafico' style="display:none">Tráfico Pesado</option> <!--1-->
  409.                                             <option value='Residencial' style="display:none">Residencial</option>
  410.                        <!--      Pasto Sintético        
  411.                       <option value='R21' style="display:none">R21 G32(Bajo pedido)</option>
  412.                       <option value='Bermuda' style="display:none">Bermuda</option>-->
  413.                        <!--      Piso Laminado       -->  
  414.                       <option value='7mm' style="display:none">7mm</option> <!--3-->
  415.                       <option value='8mm' style="display:none">8mm</option>
  416.                       <option value='10mm' style="display:none">10mm</option>
  417.                                             <option value='12mm' style="display:none">12mm</option>
  418.                       <!--      Persianas      -->
  419.                       <option value='Rollet' style="display:none">Rollet</option> <!--7-->
  420.                       <option value='Wollet' style="display:none">Wollet</option>
  421.                       <option value='Panellet' style="display:none">Panellet</option>
  422.                       <option value='Aluminix' style="display:none">Aluminix</option>
  423.                                         </select>
  424.                    </div>
  425.  
  426.                 <div  class="form-group">
  427.                     <label>Rango de precios</label>
  428.                     <select class='form-control' required id="rango" name='rango' onchange="sel_rango(this.value)">
  429.                       <option value=''>-- Selecciona --</option>
  430.                       <!--      Calidad Alfombra (Trafico Pesado)       -->
  431.                       <option value='250' style="display:none">$250 - $350</option> <!--1-->
  432.                       <option value='351' style="display:none">$351 - $450</option>
  433.                       <!--      Calidad Alfombra (Residencial)       -->
  434.                       <option value='300' style="display:none">$300 - $450</option> <!--3-->
  435.                       <option value='451' style="display:none">$451 - $600</option>
  436.                       <option value='601_1' style="display:none">$601 - $750</option>
  437.                       <option value='751' style="display:none">$751 - $950</option>
  438.                       <option value='951' style="display:none">$951 - $1100</option>
  439.                       <option value='1101' style="display:none">$1101 - $1250</option>
  440.                       <option value='1250' style="display:none">$1250 - $1400</option>
  441.                       <!--    Pasto Sintético      -->
  442.                       <option value='450' style="display:none">$450 - $600</option>
  443.                       <option value='450_2' style="display:none">$450 - $600</option> <!--10-->
  444.                       <option value='601_2' style="display:none">$601 - $750</option>
  445.                       <!--      Piso Laminado       -->
  446.                       <option value='350' style="display:none">$350 - $400</option> <!--12-->
  447.                       <option value='401' style="display:none">$401 - $450</option>
  448.                       <option value='500' style="display:none">$500 - $550</option>
  449.                       <option value='551' style="display:none">$551 - $600</option>
  450.                       <option value='600' style="display:none">$600 - $650</option>
  451.                       <option value='700' style="display:none">$700 - $750</option>
  452.                         <!--    Persianas      -->
  453.                       <option value='1000' style="display:none">$1000 - $1500</option> <!--18-->
  454.                       <option value='1501' style="display:none">$1501 - $2001</option>
  455.                       <option value='2002' style="display:none">$2002 - $2502</option>
  456.                       <option value='2503' style="display:none">$2503 - $3003</option>  
  457.                     </select>
  458.                 </div>
  459.  
  460.                 <div id="div_est_pasto" style="display:none" class="form-group">
  461.                     <label>Estilo </label>
  462.                     <select class='form-control' required id="estiloP"  name='estiloP' ">
  463.                       <option value=''>-- Selecciona --</option>
  464.                        <!--      Pasto Sintético       -->  
  465.                       <option value='R21' style="display:none">R21 (Bajo pedido)</option>
  466.                       <option value='G32' style="display:none">G32 (Bajo pedido)</option>
  467.                      <!--3-->
  468.                       <option value='Bermuda' style="display:none">Bermuda</option>
  469.                     </select>
  470.                 </div>
  471.  
  472.                 <div id="div_calidad" class="form-group">
  473.                     <label>Calidad</label>
  474.                      <select class='form-control' id ="calidad" required name='calidad'>
  475.                       <option value=''>-- Selecciona --</option>
  476.                              <!--      Calidad Alfombra (Tráfico Pesado)       -->
  477.                       <option value='Sprint' style="display:none">Guerrero-Sprint</option> <!--1-->
  478.                       <option value='Gladiador' style="display:none">Gladiador</option>
  479.                       <option value='Gladiador' style="display:none">Curator</option>
  480.                       <option value='Curator' style="display:none">Olefina(Bajo Pedido)</option>
  481.                              <!--      Calidad Alfombra (Residencial)       -->
  482.                       <option value='Sprint' style="display:none">Montreal</option> <!--5-->
  483.                       <option value='Gladiador' style="display:none">Venus</option>
  484.                       <option value='Curator' style="display:none">Castelo, Ejecutiva</option>
  485.                       <option value='Olefina' style="display:none">Ejecutiva</option>
  486.                       <option value='Olefina' style="display:none">Montecarlo</option>
  487.                       <option value='Olefina' style="display:none">Castelo</option>
  488.                       <option value='Olefina' style="display:none">Glam</option>
  489.                                    <!--     Piso Laminado       -->
  490.                       <option value='Sprint' style="display:none">Casual</option> <!--12-->
  491.                       <option value='Ambienta' style="display:none">Ambienta</option>
  492.                       <option value='Gladiador' style="display:none">Trend</option>
  493.                       <option value='Curator' style="display:none">Style</option>
  494.                       <option value='Olefina' style="display:none">Splendor</option>
  495.                       <option value='Sprint' style="display:none">Hickory</option>
  496.                       <option value='Gladiador' style="display:none">Grand Walnut</option>
  497.                       <option value='Curator' style="display:none">Mammut Plus</option>  
  498.                     </select>
  499.                 </div>
  500.                 <div id="div_color_pers" style="display: none" class="form-group">
  501.                     <label>Color</label>
  502.                      <select class='form-control' id ="colorPers" required name='colorPers'>
  503.                       <option value=''>-- Selecciona --</option>
  504.                              <!--      Color para Persianas       -->
  505.                       <option value='rojo' style="display:none">Rojo</option> <!--1-->
  506.                       <option value='negro' style="display:none">Negro</option>
  507.                       <option value='azul' style="display:none">Azul</option>
  508.                       <option value='gris' style="display:none">Gris</option>
  509.                       <option value='blanco' style="display:none">Blanco</option>
  510.                       <option value='plateado' style="display:none">Plateado</option>
  511.                       <option value='dorado' style="display:none">Dorado</option>
  512.                       <option value='esmeralda' style="display:none">Esmeralda</option>
  513.                     </select>
  514.                 </div>
  515.                                      
  516.                                    
  517.                                      
  518.                                   </div>
  519.                                  
  520.                                    
  521.                                 </div>
  522.                             </div>
  523.                             <div class="tab-pane" id="address">
  524.                                  <div class="row">
  525.                                     <div class="col-sm-12">
  526.                                         <h4 class="info-text"> Características del Producto </h4>
  527.                                     </div>
  528.                                     <div id="color" class="col-sm-6">
  529.                                          <div class="form-group">
  530.                                           <label>Color</label><br>
  531.                                           <select name="exterior" class="form-control" >
  532.                                               <option value="">-- Selecciona --</option>
  533.                                               <option value="AF">Rojo</option>
  534.                                               <option value="AX">Azul</option>
  535.                                           </select>
  536.                                         </div>
  537.                                   </div>
  538.                    
  539.                                   <div class="col-sm-3">
  540.                                       <div class="form-group">
  541.                                         <label>Cantidad</label>
  542.                                         <input name="cantidad" type="cantidad" class="form-control" placeholder="3...">
  543.                                       </div>
  544.                                   </div>
  545.                                   <div id="mExterior" class="col-sm-6" style="display:none">
  546.                                       <div class="form-group">
  547.                                         <label>Marco Exterior</label><br>
  548.                                         <select name="exterior" class="form-control" >
  549.                                           <option value="">-- Selecciona --</option>
  550.                                                             <option value="AF">Sí</option>
  551.                                                             <option value="AX">No</option>
  552.                                         </select>
  553.                                       </div>
  554.                                   </div>
  555.                                   <div id="mInterior" class="col-sm-6" style="display:none">
  556.                                          <div class="form-group">
  557.                                             <label>Marco Interior</label><br>
  558.                                              <select name="interior" class="form-control" >
  559.                                                 <option value="">-- Selecciona --</option>
  560.                                                                         <option value="AF">Sí</option>
  561.                                                                         <option value="AX">No</option>
  562.                                             </select>
  563.                                           </div>
  564.                                     </div>
  565.                                 </div>
  566.                             </div>
  567.                         </div>
  568.                         <div class="wizard-footer">
  569.                         <div id='result'></div>
  570.                         <hr>
  571.                             <div class="pull-right">
  572.                                 <input type='button' class='btn btn-next btn-fill btn-warning btn-wd btn-sm' name='next' value='Siguiente' />
  573.                                 <input type='submit' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='finish' value='Finalizar' />
  574.                                
  575.        
  576.                             </div>
  577.                            
  578.                             <div class="pull-left">
  579.                                 <input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous' value='Anterior' />
  580.                             </div>
  581.                                
  582.                             <div class="clearfix"></div>
  583.                         </div> 
  584.                     </form>
  585.                 </div>
  586.             </div> <!-- wizard container -->
  587.         </div>
  588.         </div><!-- end row -->
  589.  
  590.         <!--Mensaje: Alfombras bajo pedido-->
  591.         <div id="msg-pedido" class="modal fade">
  592.           <div class="modal-dialog " >
  593.             <div class="modal-content">
  594.               <div class="modal-header">
  595.                 <button tyle="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  596.                 <h4 class="modal-title">Atenci&oacuten:</h4>
  597.               </div>
  598.               <div class="modal-body">
  599.                 <p>Todas las alfombras Residenciales son bajo pedido.</p>
  600.               </div>
  601.               <div class="modal-footer">
  602.                   <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
  603.               </div>
  604.             </div>
  605.           </div>
  606.         </div>
  607.    
  608.     </div> <!--  big container -->
  609.    
  610.    
  611.     <div class="footer">
  612.        
  613.     </div>
  614.  
  615. </div>
  616.  
  617. </body>
  618.  
  619.     <script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
  620.     <script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
  621.        
  622.     <!--   plugins   -->
  623.     <script src="assets/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>
  624.    
  625.     <!--  More information about jquery.validate here: http://jqueryvalidation.org/  -->
  626.     <script src="assets/js/jquery.validate.min.js"></script>
  627.    
  628.     <!--  methods for manipulating the wizard and the validation -->
  629.     <script src="assets/js/wizard.js"></script>
  630.     <script>
  631.         var form1 = $( "#estimate" );
  632.         form1.validate();
  633.         $( "#estimate" ).submit(function( event ) {
  634.             if (form1.valid()==true){
  635.           var parametros = $(this).serialize();
  636.               $.ajax({
  637.                 type: "POST",
  638.                 url: "process.php",
  639.                 data: parametros,
  640.                  beforeSend: function(objeto){
  641.                     $("#result").html("Mensaje: Cargando...");
  642.                   },
  643.                 success: function(datos){
  644.                 $("#result").html(datos);
  645.                
  646.               }
  647.             });
  648.           event.preventDefault();
  649.             }  
  650.         });
  651.     </script>
  652.  
  653. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!