Ejercicio de práctica: Carrito de compras en JS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Asoc. de Apoyo a los Animales Callejeros: Venta de Productos / Disfraces.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--Estilos CSS -->
<link rel="stylesheet" href="Se1.css" type="text/css" style="stylesheet" media="screen" />
<!--Insertar Favorite icon de 16 x 16 px -->
<link href="favicon.ico" rel="shortcut icon"/>
<script language="JavaScript" type="text/javascript">
var i = 0;
function md(){
if (i > -250){
window.i = window.i - 25;
document.getElementById("imagentiraI").style.left = String(i) + "px";
document.getElementById("imagentiraII").style.left = String(i) + "px";
document.getElementById("imagentiraIII").style.left = String(i) + "px";
document.getElementById("imagentiraIV").style.left = String(i) + "px";
document.getElementById("imagentiraV").style.left = String(i) + "px";
document.getElementById("imagentiraVI").style.left = String(i) + "px";
document.getElementById("imagentiraVII").style.left = String(i) + "px";
document.getElementById("imagentiraVIII").style.left = String(i) + "px";
document.getElementById("imagentiraIX").style.left = String(i) + "px";
} /* fin if */
}/* fin función md */
function mi(){
if (i < 0 ){
window.i = window.i + 25;
document.getElementById("imagentiraI").style.left = String(i) + "px";
document.getElementById("imagentiraII").style.left = String(i) + "px";
document.getElementById("imagentiraIII").style.left = String(i) + "px";
document.getElementById("imagentiraIV").style.left = String(i) + "px";
document.getElementById("imagentiraV").style.left = String(i) + "px";
document.getElementById("imagentiraVI").style.left = String(i) + "px";
document.getElementById("imagentiraVII").style.left = String(i) + "px";
document.getElementById("imagentiraVIII").style.left = String(i) + "px";
document.getElementById("imagentiraIX").style.left = String(i) + "px";
} /* fin if */
} /* fin función mi */
/* Descripción del producto */
var codigo = ["imagentiraI", "imagentiraII", "imagentiraIII", "imagentiraIV", "imagentiraV", "imagentiraVI", "imagentiraimagentiraVII", "imagentiraVIII", "imagentiraIX"];
var descripcion=["Pirata Morgan", "Dino Pica Piedra", "Diablito", "Roquero", "Florcita Perfumada", "Oruga", "Perra Maravilla", "Araña"];
var colores = ["Rojo", "Negro", "Blanco", "Rosado", "Fuscia", "Violeta", "Turquesa", "Verde", "Amarillo"];
var talles = [25, 40, 55, 65];
var precio = [45, 65, 95, 125];
/* Ampliar foto y mostrar codigo y descripcion */
function ampliar(objeto, j){
window.document.getElementById("imagenampliada").src= objeto;
j= parseInt(j);
window.document.getElementById("descripcionimagen").value = descripcion[j];
window.document.getElementById("modeloelegido").value = codigo[j];
/* Cantidad la carga el operador */
}
/* Obtener precio según talle */
function determinarprecio(j){
j= parseInt(j);
window.document.getElementById("precioimagen").value = precio[j];
}
/*Obtener color según selección */
function determinarcolor(j){
j= parseInt(j);
window.document.getElementById("colorelegido").value = colores[j];
}
/*Obtener medida / talle según selección */
function determinartalle(j){
determinarprecio(j);
j= parseInt(j);
window.document.getElementById("talleelegido").value = talles[j] + "cm";
}
/* Comprar: hasta 10 artículos por producto */
function sumar(){
var cantidad= parseInt(window.document.getElementById("cantidadelegida").value);
if(cantidad < 10){
cantidad ++;
window.document.getElementById("cantidadelegida").value = cantidad;
}else{
alert("Llegaste al tope! \nRecuerda que puedes comprar hasta \n10 artículos por producto!");
}
window.document.getElementById("cantidadelegida").value = " " + String(cantidad);
}
/* Eliminar uno a línea de pedido activa*/
function restar(){
var cantidad= parseInt(window.document.getElementById("cantidadelegida").value);
if (cantidad > 0){
cantidad --;
window.document.getElementById("cantidadelegida").value = cantidad;
} else {
alert("Llegaste al mínimo! \nTu orden de pedido fue anulada.");
}
window.document.getElementById("cantidadelegida").value = " " + String(cantidad);
}
<!-- Paso 1: Crear el / los método /s del objeto (1 función por cada método) -->
var productoscomprados = 1;
var subtotal = 0;
var lineatotal; /* ---- */
var totalcomprado = 0; /* ---- */
function mostraroperacion() {
/* Ocultar la capa que contiene la tabla con los títulos. NO OLVIDAR RECORDAR EN CLASE las diferencias entre visibility y display. */
document.getElementById("articuloscomprados").style.visibility = "visible";
document.getElementById("datosenvio").style.visibility = "visible";
document.getElementById("datostransporte").style.visibility = "visible";
var linea = document.getElementById("tablacarrito");
/* Control de carga de cantidad comprada y talle elegido */
if (this.cantidadOp > 0 && parseInt(window.document.getElementById("talleelegido").value) > 0){
/* Hasta 10 artículos por producto, hasta 10 productos */
if (productoscomprados < 11){
productoscomprados ++;
subtotal = this.cantidadOp * this.precioOp;
linea.innerHTML = linea.innerHTML + "<tr> <td> " + this.codigoOp + " </td> <td> " + this.descripcionOp + " </td> <td>" + this.colorOp + " </td> <td> " + this.talleOp + " </td> <td>" + this.cantidadOp + "</td> <td> " + this.precioOp + " </td> <td> " + subtotal + "</td> <td style='width: 70px; height: 30pxS'> <input type='button' value='Eliminar' onclick='javascript: eliminar(this); ' /> </tr>";
/* Calcular total gastado */
var c= document.getElementById("tablacarrito").rows.length;
totalcomprado = 0; /* ---- */
lineatotal = document.getElementById("totalgeneral"); /* ----*/
/* Recorre desde la 2 a la última cargada - Descarta la fila 1 y 10 con títulos y subtítulos */
for (var f = 1; f < c -1; f++){
/* Las filas se numeran de cero a n */
/*alert("Aqui" + parseInt(document.getElementById("tablacarrito").rows[f].cells[6].innerText)); */
totalcomprado = totalcomprado + parseInt(document.getElementById("tablacarrito").rows[f].cells[6].innerText);
lineatotal.innerHTML = "<tr> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> TOTAL $</th> <th>" + totalcomprado + "</tfh> <th> </th> </tr>";
} /* Fin bucle for */
} else{
alert("Superó el máximo de artículos comprados! \nRecuerde que puede adquirir hasta 10 productos \npor cada transacción.");
} /* Fin productos comprados */
} else {
alert("Selecciona el talle según el largo de columna de tu mascota. \nCarga al menos un artículo! \nHaz click en comprar.");
} /* Fin cantidad > 0 */
window.document.getElementById('talleelegido').value = 0;
window.document.getElementById('cantidadelegida').value = 0
} /* Fin función mostrar operación */
<!-- Paso 2: Crear una clase de objeto con las propiedades del pedido y el / los método /s asociado /s -->
function ordenpedido() {
this.codigoOp = window.document.getElementById('modeloelegido').value;
this.descripcionOp = window.document.getElementById('descripcionimagen').value;
this.colorOp = window.document.getElementById('colorelegido').value;
this.talleOp = window.document.getElementById('talleelegido').value;
this.cantidadOp = window.document.getElementById('cantidadelegida').value;
this.precioOp = window.document.getElementById('precioimagen').value;
this.mostraroperacion = mostraroperacion;
}
<!-- Paso 3: Crear variables (instanciar objetos) de esa clase -->
function cargarorden(){
pedidodisfraz = new ordenpedido(); /* Crear instancia */
pedidodisfraz.mostraroperacion(); /* Ejecutar método */
}
/* Eliminar producto del carrito */
var totalcomprado = 0;
function eliminar(objeto){
var celda = objeto.parentNode;
var fila = celda.parentNode;
var tabla = fila.parentNode;
tabla.removeChild(fila);
/* Actualizar total comprado */
var c= document.getElementById("tablacarrito").rows.length;
totalcomprado = 0;
var lineatotal = document.getElementById("totalgeneral");
productoscomprados = productoscomprados -1;
/* Recorre desde la 2 a la última cargada - Descarta la fila 1 y 10 con títulos y subtítulos */
for (var f = 1; f < c -1; f++){
/* Las filas se numeran de cero a n */
totalcomprado = totalcomprado + parseInt(document.getElementById("tablacarrito").rows[f].cells[6].innerText);
lineatotal.innerHTML = "<tr> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> TOTAL $</th> <th>" + totalcomprado + "</tfh> <th> </th> </tr>";
}
/* Eliminar el total de prod. comprados si borra la última operación */
if (c == 2){
totalcomprado = 0;
lineatotal.innerHTML = "<tr> <th> </th> <th> </th> <th> </th> <th> </th> <th> </th> <th> TOTAL $</th> <th>" + 0 + "</tfh> <th> </th> </tr>";
document.getElementById("datosenvio").style.visibility = "hidden";
document.getElementById("datostransporte").style.visibility = "hidden";
}
}
/* Prepara variables de salida para el envío del pedido por correo electronico*/
function cargarpedido(){
/* Calcular cantidad lineas de producto a cargar */
var c= document.getElementById("tablacarrito").rows.length;
/* Armar línea de producto */
/* Recorrer desde la fila2 a la última cargada - Descartar la fila 1 y 10 con títulos y subtítulos */
var pedidosalida;
document.getElementById("pedido").value = ""; /* Inicializar línea en caso de eliminación de un producto */
for (var f = 1; f < c -1; f++){
var codigosalida = document.getElementById("tablacarrito").rows[f].cells[0].innerHTML; /* En fila 0 se encuentra detallados los títulos */
var descripcionsalida= document.getElementById("tablacarrito").rows[f].cells[1].innerHTML;
var colorsalida= document.getElementById("tablacarrito").rows[f].cells[2].innerHTML;
var tallesalida= document.getElementById("tablacarrito").rows[f].cells[3].innerHTML;
var cantidadsalida= document.getElementById("tablacarrito").rows[f].cells[4].innerHTML;
var preciosalida= document.getElementById("tablacarrito").rows[f].cells[5].innerHTML;
/* Cargar el p´roducto a la linea de pedido */
pedidosalida = document.getElementById("pedido").value;
pedidosalida = pedidosalida + "LINEA PEDIDO " + f + ": "+ codigosalida + descripcionsalida + colorsalida + tallesalida + cantidadsalida + preciosalida;
document.getElementById("pedido").value = pedidosalida;
}
}
/* Ver / Ocultar datos del envío */
function desaparecer(){
// Obtener la referencia a la lista
var lista = document.getElementById("openvio");
// Obtener el índice de la opción que se ha seleccionado
var indice = lista.selectedIndex;
// Con el índice y el array "options", obtener la opción seleccionada
var opcionseleccionada = lista.options[indice];
// Obtener el valor y el texto de la opción seleccionada
var seleccion = opcionseleccionada.value;
if (seleccion == "personalmente"){
document.getElementById("datostransporte").style.visibility = "hidden";
}else{
document.getElementById("datostransporte").style.visibility = "visible";
}
}
/*Contol de datos durante la captura: función duplicada en página contáctanos - llevar a un *.js */
function controlcaptura(objeto) {
/* Inicio condición */
if (objeto.value == "" || objeto.value == null ){
alert("Complete los datos solicitados antes del envío! \nPara el envío de la consulta sus datos personales deben estar completos y correctos.");
objeto.focus();
}
}
/* Validar Email para enviar aviso de recepción de pedido */
function validarEmail(valor) {
if (/[\w-\{1,}.]@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/.test(valor)){
return (true)
} else {
alert("La dirección de email es incorrecta. \nRecuerde que para el nombre del correo o del servidor puede \ncargar cualquier caracter alfanumérico, \nincluído el guión bajo, en mayúsculas o minúsculas. \nDebe evitar los espaciosen blanco.");
document.getElementById("idemail").value="correo@servidor.com";
document.getElementById("idemail").focus();
return (false);
}
}
/* Resetear el formulario */
function limpiar(){
document.forms["fc"].reset();
document.getElementById("datostransporte").style.visibility = "visible";
}
/* Enviar el pedido a dirección de correo */
function enviar(){
if(totalcomprado !== 0 && document.getElementById("pedido").value !== ""){
/* Enviar */
document.forms["fc"].submit(); /* fc es el id del formulario */
document.getElementById("pedido").value = "";
document.history.back();
}else{
if (totalcomprado == 0){
alert("Compre nuestros productos! Elija un modelo de la tira, el color, el talle y la cantidad \nluego haga click en Autorizar Venta y luego en \n Enviar Pedido");
document.location.href="#arriba";/* Repetir el proceso: enlace vacío en la misma página */
return; /* salir de la función */
}
if (document.getElementById("pedido").value == ""){
alert("Haz click en Autorizar Venta y luego en \n Enviar Pedido");
}
/*alert("Compre nuestros productos! \nHaga click en Autorizar Venta y luego en \n Enviar Pedido");
document.location.href="#arriba";<!-- Repetir el proceso: enlace vacío en la misma página --><!-- Ir arriba --> */
}
}
</script>
</head>
<body >
<!--Inicio Contenedor-->
<div id="contenedor">
<!--Inicio Cabecera -->
<div id="cabecera"> <img src="CabeceraSE1.JPG"/>
<!--Inicio Título-->
<div id= "titulo"> ASOCIACION DE APOYO A LOS <br/>
ANIMALES CALLEJEROS </div>
<!--fin titulo -->
<!--Inicio Subtítulo-->
<div id="subtitulo"> juntos podemos ayudar! </div>
<!--fin subtitulo -->
</div>
<!--fin cabecera -->
<!--Inicio Cuerpo -->
<div id="cuerpo">
<!--Inicio Menu -->
<div id="menu">
<ul>
<li><a href="file:///C:/escuela2012/plantillas/se1/index.html" target="_self" >Inicio</a>
</li>
<li>|</li>
<li><a href="file:///C:/escuela2012/plantillas/se1/carrito.htm" target="_self">Compra
Nuestros Productos</a></li>
<li>|</li>
<li><a href="#" title="Vínculo en construcción: Preguntas frecuentes / Mecanismo de compra / Proceso de envío / Políticas de devolución y cambios" target="_self">Despeja Tus Dudas</a></li>
<li>|</li>
<li><a href="#" target="_self" title="Vínculo en construcción: Opiniones / Comentarios">Califícanos</a></li>
<li>|</li>
<li><a href="file:///C:/escuela2012/plantillas/se1/contacto.htm" target="_self">Contáctanos</a></li>
</ul>
</div>
<!--fin menu -->
<!--Inicio Contenido-->
<div id="contenido" style="overflow-x:hidden; overflow-y:scroll;"> <a name="arriba"></a>
<div id="tira" style="overflow: hidden; border-bottom: 2px solid #666666;">
<img id="imagentiraI" class="imagentira" src="disfrazI.JPG" onclick="ampliar('C:/Escuela2012/Plantillas/SE1/disfrazI.JPG', 0);" />
<!-- onmouseover="javascript: agrandar(this);" -->
<img id="imagentiraII" class="imagentira" src="disfrazII.JPG" onclick="ampliar('C:/Escuela2012/Plantillas/SE1/disfrazII.JPG', 1);"/>
<img id="imagentiraIII" class="imagentira" src="disfrazIII.JPG" onclick="ampliar('C:/Escuela2012/Plantillas/SE1/disfrazIII.JPG', 2);"/>
<img id="imagentiraIV" class="imagentira" src="disfrazIV.JPG" onclick="ampliar('C:/Escuela2012/Plantillas/SE1/disfrazIV.JPG', 3);"/>
<img id="imagentiraV" class="imagentira" src="disfrazV.JPG" onclick="ampliar('C:/Escuela2012/Plantillas/SE1/disfrazV.JPG', 4);"/>
<img id="imagentiraVI" class="imagentira" src="disfrazVI.JPG" onclick="ampliar('C:/Escuela2012/Plantillas/SE1/disfrazVI.JPG', 5);"/>
<img id="imagentiraVII" class="imagentira" src="disfrazVII.JPG" onclick="ampliar('C:/Escuela2012/Plantillas/SE1/disfrazVII.JPG', 6);"/>
<img id="imagentiraVIII" class="imagentira" src="disfrazVIII.JPG" onclick="ampliar('C:/Escuela2012/Plantillas/SE1/disfrazVIII.JPG', 7);"/>
<img id="imagentiraIX" class="imagentira" src="disfrazIX.JPG" onclick="ampliar('C:/Escuela2012/Plantillas/SE1/disfrazIX.JPG', 8);"/>
</div>
<!--Botones de desplazamiento-->
<div id="botones" style="left:565px; width: 228px;">
<input type="button" style="width:45px;" value="Ver +" onclick="javascript:md();" />
|
<input type="button" style="width:150px;" value="Ir a la primer imagen" onclick="javascript:mi();" />
</div>
<!--Fin Botones de desplazamiento-->
<div id="lateralizq" style="top: 220px; width: 260px; padding: 0px;">
<!--Posición de la imagen ampliada -->
<!-- Posición de la imagen ampliada -->
<!--Idem inicio, mira nuestro trabajo, etc. / Imagen ampliada -->
<img id="imagenampliada" src="file:///C:/Escuela2012/Plantillas/SE1/DisfrazI.JPG" />
</div>
<!--División datos del carrito -->
<div id="centro" style="top: 170px; left: 280px; width: 470px; height: 450px;">
<div>Descripción:
<input id="descripcionimagen" type="text" value="Pirata Morgan" disabled= "disabled" style="width: 150px; font: bold 14px arial; border:none; background-color: white"/></br>
</div>
<div> Colores disponibles: </br></br> <img src="file:///C:/Escuela2012/Plantillas/SE1/Rojo.JPG" class="bordeimagencarrito" onclick="determinarcolor(0);"/>
<img src="file:///C:/Escuela2012/Plantillas/SE1/Negro.JPG" class="bordeimagencarrito" onclick="determinarcolor(1);"/>
<img src="file:///C:/Escuela2012/Plantillas/SE1/Blanco.JPG" class="bordeimagencarrito" onclick="determinarcolor(2);" />
<img src="file:///C:/Escuela2012/Plantillas/SE1/Rosado.JPG" class="bordeimagencarrito" onclick="determinarcolor(3);"/>
<img src="file:///C:/Escuela2012/Plantillas/SE1/Fucsia.JPG" class="bordeimagencarrito" onclick="determinarcolor(4);"/>
<img src="file:///C:/Escuela2012/Plantillas/SE1/Violeta.JPG" class="bordeimagencarrito" onclick="determinarcolor(5);"/>
<img src="file:///C:/Escuela2012/Plantillas/SE1/Turquesa.JPG" class="bordeimagencarrito" onclick="determinarcolor(6);"/>
<img src="file:///C:/Escuela2012/Plantillas/SE1/Verde.JPG" class="bordeimagencarrito" onclick="determinarcolor(7);"/>
<img src="file:///C:/Escuela2012/Plantillas/SE1/Amarillo.JPG" class="bordeimagencarrito" onclick="determinarcolor(8);"/> </br></br>
</div>
Talles disponibles: </br></br> <img id="t1" src="file:///C:/Escuela2012/Plantillas/SE1/Talle1.JPG" class="bordeimagencarrito" onclick="javascript: determinartalle(0);"/>
<img id="t2" src="file:///C:/Escuela2012/Plantillas/SE1/Talle2.JPG" class="bordeimagencarrito" onclick="javascript: determinartalle(1);"/>
<img id="t3" src="file:///C:/Escuela2012/Plantillas/SE1/Talle3.JPG" class="bordeimagencarrito" onclick="javascript: determinartalle(2);"/>
<img id="t4" src="file:///C:/Escuela2012/Plantillas/SE1/Talle4.JPG" class="bordeimagencarrito" onclick="javascript: determinartalle(3);"/>
<div>
<div>Precio $:
<input id="precioimagen" type="text" value="A determinar" disabled= "disabled" style="width: 100px;font: bold 14px arial; border: none; background-color: white"/></br></br>
</div>
<br/>
<!--Orden de pedido -->
<div id="ordenpedido"> </br> Orden de pedido: </br> Modelo:
<input id="modeloelegido" type="text" value="imagentiraI"disabled= "disabled" style="width: 100px; font: bold 12px arial; border:none; background-color: white"/></br>
Color:
<input id="colorelegido" type="text" value="Negro" disabled= "disabled" style="width: 100px; font: bold 12px arial; border:none; background-color: white"/></br>
Talle:
<input id="talleelegido" type="text" value="0 cm" disabled= "disabled" style="width: 100px; font: bold 12px arial; border:none; background-color: white"/></br>
Cantidad:
<input id="cantidadelegida" type="text" maxlength="2" value=" 0" disabled= "disabled" style="width: 100px; font: bold 12px arial; border: none; background-color: white"/></br>
</div>
<!-- Fin Orden de pedio -->
<div id="botonescarrito">
<!---- Aqui ---->
<input type="image" class= "menucompras" src="file:///C:/Escuela2012/Plantillas/SE1/Comprar.JPG" title="Comprar" onclick="javascript: sumar();" />
<input type="image" class= "menucompras" src="file:///C:/Escuela2012/Plantillas/SE1/Eliminar.JPG" title="Eliminar" onclick="javascript: restar();;" />
<input type="image" class= "menucompras"src="file:///C:/Escuela2012/Plantillas/SE1/Agregar.JPG" title="Agregar al carrito" onclick="javascript: cargarorden(); " />
</div>
<!--Fin datos del carrito -->
</div>
<!--Idem inicio -->
</div>
<!--Listado de artículos comprados -->
<div id="articuloscomprados" style="visibility: hidden;">
<!--División oculta hasta comprar un artículo -->
<table id="tablacarrito" >
<caption style="font: bold 16px arial ; text-align: center; margin-top: 15px; margin-bottom: 10px;">
Listado de productos
</caption>
<thead>
<tr>
<th>CODIGO</th>
<th>DESCRIPCION</th>
<th>COLOR</th>
<th>TALLE</th>
<th>CANTIDAD</th>
<th>PRECIO</th>
<th>SUBTOTAL</th>
<th> </th>
</tr>
</thead>
<tfoot id="totalgeneral">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th>TOTAL html $</th>
<th> </th>
<!-- Total Columna -->
<th id="calculototalgeneral"> </th>
</tr>
</tfoot>
<!-- Insertar filas por cada compra -->
</table>
<br/>
<!--Datos del envío -->
<div id="datosenvio" style="visibility:hidden;">
<p>datos para el envío</p>
<!--Inicio campos del Formulario ******************************************** -->
<form id="fc" action="mailto:all@cablenet.com.ar?subject=Pedido%20Web" enctype="text/plain" method="post" name="formularioconsulta">
<!-- <form action="mailto:all@cablenet.com.ar" enctype="multipat/form-data" method="post" name="formularioconsulta" > -->
<div id="lateralizq" style="width: 430px; height: 160px; margin-left: -5px; padding: 0px;">
<div>
<label for="apynom">Apellido y Nombre:</label>
<input name="textoapynom" type="text" id="idapynom" value="Nnnnnn Aaaaaaa" width="30" maxlength="40" title="Longitud: 40 caracteres." size="30" onclick="seleccionar(this);" onblur="javascript: controlcaptura(this);"/>
</div>
<div>
<label for="direccion">Domicilio de Envío:</label>
<input name="direccion" type="text" id="iddireccion" value="calle nro. - (CP) - ciudad - provincia - país" width="50" size="50px" maxlength="50" title="Longitud: 50 caracteres." onclick="seleccionar(this);" onblur="javascript: controlcaptura(this);"/>
<br/>
</div>
<div>
<label for="telefono">Teléfono/Fax:</label>
<input name="telefono" type="text" id="idtelefono" value="(característica) - (teléfono / fax)" width="50" size="50px" maxlength="25" title="Longitud: 25 caracteres." onclick="seleccionar(this);" onblur="javascript: controlcaptura(this);"/>
<br/>
</div>
<div>
<label for="email">Correo electrónico:</label>
<input name="email" type="text" id="idemail" value="correo@servidor.com" width="40" size="40px" maxlength="50" title="Longitud: 50 caracteres." onclick="seleccionar(this);" onblur="validarEmail(this.form.email.value);;"/>
</div>
<div id="informacion" style="position: relative; top: 5px; left: 42px;">
<input name="informacion" id="idinformacion" type="checkbox" value="enviar catálogo electrónico" checked="checked" />
<p id="enviarinformacion">Deseo recibir el catálogo electrónico
de <br/>
productos</p>
<input name="pedidofinal" id="pedido" type="hidden" value="" />
</div>
</div>
<!-- Fin división lateral izquierdo -->
<div id="centro" style="left: 430px; width: 300px; height: 150px;">
<!-- División centro -->
<div>
<label for="formaevio">Forma de envío del pedido:</label>
<select name="opcionesenvio" id="openvio" style="position: relative; left: 0px; padding-top: 5px; font: normal 11px arial;" onchange="javascript: desaparecer();">
<option value="personalmente">Personalmente</option>
<option value="comisionista" selected="selected">Comisionista</option>
<option value="expreso">Expreso</option>
</select>
<br/>
</div>
<!--Datos del comisionista o transporte: ocultos, disponibles sólo si el operador elige 1 de las dos últimas opcionesde la lista -->
<div id="datostransporte">
<div style="position: relative; top: 5px;">
<label for="razonsoc" >Razón Social: </label>
<input name="razonsocial" type="text" id="idrz" value="Nnnnnnnnnnnnnnnn / Sin completar: retira personalmente"" maxlength="25" title="Longitud: 25 caracteres." style="width: 125px;" onclick="seleccionar(this);" onblur="javascript: controlcaptura(this);"/>
</div>
<div style="position: relative; top: 9px;">
<label for="direcciontrans">Domicilio del Transporte:</label>
<input name="direcciontransporte" type="text" id="iddt" value="calle nro. - (CP) / Sin completar: retira personalmente" style="width: 125px;" size="50px" maxlength="50" title="Longitud: 50 caracteres." onclick="seleccionar(this);" onblur="javascript: controlcaptura(this);"/>
<br/>
</div>
<div style="position: relative; top: 9px;">
<label for="telefonotrans">Teléfono/Fax:</label>
<input name="telefonotransporte" type="text" id="idtt" value="(caract.) - (teléfono / fax) / Sin completar: retira personalmente" style="width: 125px;" size="50px" maxlength="25" title="Longitud: 25 caracteres." onclick="seleccionar(this);" onblur="javascript: controlcaptura(this);"/>
<br/>
</div>
</div>
<!-- Fin datos transporte -->
</div>
<!-- Fin división centro -->
<div id="botonesenvio">
<input type="button" value="Autorizar venta" style="width: 100px;" title="Cargar el pedido" onclick="javascript: cargarpedido();"/>
|
<input type="button" style="width: 85px;" value="Borrar datos" title="Elimnar los datos del solicitante del pedido a cargar" onclick="javascript: limpiar();"/>
|
<input id="envioautorizado" type="button" style="width: 90px;" value="Enviar pedido" title="Enviar por correo el pedido realizado" onclick="javascript: enviar();"/>
</div>
</form>
</div>
<!-- Fin datos del envío -->
</div>
<!-- Fin División oculta hasta comprar un artículo -->
</div>
<!--fin contenido -->
</div>
<!--fin cuerpo -->
<!--Inicio Pie-->
<div id ="pie">
<p>Contacto: calle nro.- dpto - piso / ciudad / provincia | Tel.:(0000)- 99999
| correo@servidor.com | <a href="politicaprivacidad.htm" target="_self">Política
de Privacidad</a></p>
</div>
<!--fin pie -->
</div>
<!-- fin contenedor-->
</body>
</html>