Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Campos requeridos segun ¿seleccion/opcion?

 Estas en el tema de Campos requeridos segun ¿seleccion/opcion? en el foro de Javascript en Foros del Web. buenas gente, estoy comenzando con javascript y la cuestion es la siguiente. tengo un formulario el cual se procesara por php al enviarse, pero el ...
  #1 (permalink)  
Antiguo 13/04/2015, 09:44
Avatar de ignacio85r  
Fecha de Ingreso: mayo-2010
Ubicación: mar del plata
Mensajes: 155
Antigüedad: 13 años, 11 meses
Puntos: 0
Pregunta Campos requeridos segun ¿seleccion/opcion?
buenas gente, estoy comenzando con javascript y la cuestion es la siguiente.

tengo un formulario el cual se procesara por php al enviarse, pero el formulario dependiendo si el user selecciona si va a realizar una Emision u Cotizacion debe requerir ciertos campos.

me explico?

al comienzo del formulario tendra una opcion para seleccionar si es Emision o Cotizacion ya que los datos para una cotizacion son menos cantidad que los requeridos para emision.

desde ya muchas gracIAS!!
__________________
Los manuales existen por un motivo... explicar el funcionamiento de algo. ;-)
  #2 (permalink)  
Antiguo 13/04/2015, 09:53
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 10 años, 1 mes
Puntos: 67
Respuesta: Campos requeridos segun ¿seleccion/opcion?
Podrias mostrarnos lo que tienes echo hasta ahora para poder ayudarte mejor.

Saludos.
__________________
No te preocupes si tu código no funciona bien. Si todo lo hiciera, no tendrías trabajo.
  #3 (permalink)  
Antiguo 13/04/2015, 21:44
Avatar de ignacio85r  
Fecha de Ingreso: mayo-2010
Ubicación: mar del plata
Mensajes: 155
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Campos requeridos segun ¿seleccion/opcion?
perdon, si. esto es lo que tengo.. eso si aun no tengo nada en Js.
la idea es poner un selsctor u opcion para que el user elija si desea enviar una propuesta de cotizacion o de emision antes de completar el formulario... es posible??

Código HTML:
<!DOCTYPE HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Organizacion CAM - Emision Automotores</title>
	<!-- Latest <compiled></compiled> and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/main.css" />
	<script src="main.js" language="javascript" type="text/javascript"></script>
</head>
<body>
	<div class="container fondo-header">
		<div class="row">
			<div class="col-md-12 fondo-claro">
				<header class="">
					<img src="img/logo-cam.gif" width="500px" alt="" />
					<h2>Herramientas para Productores</h2>
				</header>
			</div>
		</div>
			<div class="row cabecera-auto fondo-claro">
				<div class="col-md-12">
					<hgroup>
						<h3>Cotizacion Automotores</br><small>Formulario para solicitud de cotización</small></h3>
					</hgroup>
				</div>
			</div>
			<div class="row">
				<form action="" method="POST" class="form-horizontal">
					<div class="col-xs-12 col-md-5"> <!-- Columna Tomador -->
						<div class="form-group">
							<label class="control-label col-xs-3">Nombre:</label>
							<div class="col-xs-9">
								<input type="text" class="form-control" placeholder="Nombre del tomador">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3">Dni:</label>
							<div class="col-xs-9">
								<input type="number" class="form-control" placeholder="Dni/Cuit/Cuil">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3">Fecha de Nacimiento:</label>
							<div class="col-xs-5">
								<input type="date" class="form-control" placeholder="">
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3">Genero:</label>
							<div class="col-xs-2">
								<label class="radio-inline">
									<input type="radio" name="genderRadios" value="male"> Maculino
								</label>
							</div>
							<div class="col-xs-2">
								<label class="radio-inline">
									<input type="radio" name="genderRadios" value="female"> Femenino
								</label>
							</div>
						</div>
					     <div class="form-group">
							<label class="control-label col-xs-3">Dirección:</label>
							<div class="col-xs-9">
								<textarea rows="2" class="form-control" placeholder="Dirección completa y codigo postal."></textarea>
							</div>
						</div>
						    <div class="form-group">
							<label class="control-label col-xs-3" >Telefono:</label>
							<div class="col-xs-5">
								<input type="tel" class="form-control" placeholder="Telefono">
							</div>
						</div>
					</div><!-- Fin de Columna 1 Tomador -->
					<div class="col-xs-12 col-md-7"><!-- Columna 2 Bien-->
						<div class="form-group">
							<label class="control-label col-xs-3">Vehiculo:</label>
							<div class="col-xs-3">
								<input type="text" class="form-control" placeholder="Marca">
							</div>
							<div class="col-xs-4">
								<input type="text" class="form-control" placeholder="Modelo">
							</div>
							<div class="col-xs-2">
								<input type="text" class="form-control" placeholder="Año">
						  </div>
						</div>
						<div class="form-group">
						<label class="control-label col-xs-3"></label>
						  <div class="col-xs-2">
							<input type="text" class="form-control" placeholder="Dominio">
						  </div>
						  <div class="col-xs-3">
							<input type="text" class="form-control" placeholder="Motor">
						  </div>
						  <div class="col-xs-4">
							<input type="text" class="form-control" placeholder="Chasis">
						  </div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3">Cobertura:</label>
							<div class="col-xs-9">
								<textarea rows="2" class="form-control" placeholder="Especifique la coertura."></textarea>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3">Medio de pago:</label>
							<div class="col-xs-9">
								<select class="form-control">
								  <option>Tarjeta de credito</option>
								  <option>Debito en cuenta</option>
								  <option>Efectivo</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3">Numero:</label>
							<div class="col-xs-9">
								<textarea rows="2" class="form-control" placeholder="Especifique la cobertura."></textarea>
								<span class="help-block">*Completar caso de que la forma de pago sea tarjeta de credito o debito en cuenta.</span>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-offset-3 col-xs-9">
								<input type="submit" class="btn btn-primary" value="Enviar">
								<input type="reset" class="btn btn-default" value="Limpiar">
							</div>
						</div>
					</div><!-- Fin columna 2 Bien -->
				</form>
			</div>
		<footer  class="margen-superior">
			<div class="row fondo-footer">
				<div class="col-md-4">
					<ul>
						<li><a class="fondo-footer" href="http://www.canalzurich.com.ar" target="new">Canal Zurich</a></li>
						<li><a class="fondo-footer" href="https://web-ceibo.gruposancorseguros.com/productorA/Authentication/Login?ReturnUrl=%2fproductorA%2f" target="new">Ceibo</a></li>
					</ul>
				</div>
					<div class="col-md-4">
					<ul>
						<li>Instructivos</li>
						<li>Preguntas Frecuentes</li>
					</ul>
					</div>
				<div class="col-md-4">
					<ul>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</footer>
	</div>				
</body>
</html>
__________________
Los manuales existen por un motivo... explicar el funcionamiento de algo. ;-)
  #4 (permalink)  
Antiguo 14/04/2015, 02:10
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Campos requeridos segun ¿seleccion/opcion?
No será la solución más elegante ni la mejor, pero podrías tener dos formularios, un combo con dos opciones o bien dos radio button y un botón que al ser pulsado, verifique el valor de la opción seleccionada y según sea este, envíe los datos de uno u otro formulario, para lo cual utilizarías el método submit.

Código HTML: 
Ver original
  1. <select id = "foo">
  2.     <option value = "1">Primer formulario</option>
  3.     <option value = "2">Segundo formulario</option>
  4. </select>

Código Javascript: 
Ver original
  1. document.querySelector("#id del botón").addEventListener("click", function(){
  2.     if (document.querySelector("#id del combo").value == 1){
  3.         document.querySelector("#id del primer formulario").submit();
  4.     }
  5.     else{
  6.         document.querySelector("#id del segundo formulario").submit();
  7.     }
  8. }, false);

Coloca este código justo antes de la etiqueta </body> para que surta efecto.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #5 (permalink)  
Antiguo 17/04/2015, 05:46
Avatar de ignacio85r  
Fecha de Ingreso: mayo-2010
Ubicación: mar del plata
Mensajes: 155
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Campos requeridos segun ¿seleccion/opcion?
quedaria asi?? es correcto?

Código: 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<select id = "foo">
    <option value = "1">Primer formulario</option>
    <option value = "2">Segundo formulario</option>
</select>
    <div class="container">
            <div id="formularios" class="row">
        <form id="cotizacion" action="">
                <div class="col-md-4">
                <input class="form-control input-lg" type="text" placeholder="cotizacion d1">
                <input class="form-control" type="text" placeholder="cotizacion d2">
                <input class="form-control input-sm" type="text" placeholder="cotizacion d3">
                </div>
        </form>
        <form action="" id="emision">
            <div class="col-md-4">
            <input class="form-control input-lg" type="text" placeholder="emision d1">
            <input class="form-control" type="text" placeholder="emision d2">
            <input class="form-control input-sm" type="text" placeholder="emision d3">
            <button id="enviar" type="submit" class="btn btn-default">Enviar</button>
                </div>
                <div class="col-md-4">
                </div>
        </form>
            </div>
    </div>
    <script type="text/javascript">
    document.querySelector("enviar").addEventListener("click", function(){
    if (document.querySelector("#formularios").value == 1){
        document.querySelector("#cotizacion").submit();
    }
    else{
        document.querySelector("#emision").submit();
    }
}, false); 
    </script>
</body>
</html>
__________________
Los manuales existen por un motivo... explicar el funcionamiento de algo. ;-)
  #6 (permalink)  
Antiguo 17/04/2015, 05:50
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 10 años, 1 mes
Puntos: 67
Respuesta: Campos requeridos segun ¿seleccion/opcion?
Cita:
Iniciado por ignacio85r Ver Mensaje
quedaria asi?? es correcto?

Código: 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<select id = "foo">
    <option value = "1">Primer formulario</option>
    <option value = "2">Segundo formulario</option>
</select>
    <div class="container">
            <div id="formularios" class="row">
        <form id="cotizacion" action="">
                <div class="col-md-4">
                <input class="form-control input-lg" type="text" placeholder="cotizacion d1">
                <input class="form-control" type="text" placeholder="cotizacion d2">
                <input class="form-control input-sm" type="text" placeholder="cotizacion d3">
                </div>
        </form>
        <form action="" id="emision">
            <div class="col-md-4">
            <input class="form-control input-lg" type="text" placeholder="emision d1">
            <input class="form-control" type="text" placeholder="emision d2">
            <input class="form-control input-sm" type="text" placeholder="emision d3">
            <button id="enviar" type="submit" class="btn btn-default">Enviar</button>
                </div>
                <div class="col-md-4">
                </div>
        </form>
            </div>
    </div>
    <script type="text/javascript">
    document.querySelector("enviar").addEventListener("click", function(){
    if (document.querySelector("#formularios").value == 1){
        document.querySelector("#cotizacion").submit();
    }
    else{
        document.querySelector("#emision").submit();
    }
}, false); 
    </script>
</body>
</html>
Si, así sería correcto. Lo has probado para si te realiza correctamente lo que quieres?

Saludos.
__________________
No te preocupes si tu código no funciona bien. Si todo lo hiciera, no tendrías trabajo.
  #7 (permalink)  
Antiguo 17/04/2015, 06:11
Avatar de ignacio85r  
Fecha de Ingreso: mayo-2010
Ubicación: mar del plata
Mensajes: 155
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Campos requeridos segun ¿seleccion/opcion?
hay algo que no me funciona. lo voy a revisar tranquilo en casa mas tarde.

graciasMaNux0218! ;)
__________________
Los manuales existen por un motivo... explicar el funcionamiento de algo. ;-)
  #8 (permalink)  
Antiguo 17/04/2015, 10:06
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Campos requeridos segun ¿seleccion/opcion?
Te está faltando el # en document.querySelector("enviar"), pero además, sería bueno que ese botón sea un <button> y no un <input type = "submit" /> y que esté por fuera del segundo formulario (y, obviamente, del primero) ya que la idea es que sea un botón independiente a ambos formularios y pueda tomar una decisión más imparcial.

No será lo más semánticamente correcto, pero es una forma de solucionar el problema. También podrías usar un <label> o un <span>, aplicarle estilos para que tome la apariencia de un botón y usarlo en lugar de un <button>. Semánticamente, sería mejor hacerlo así.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #9 (permalink)  
Antiguo 20/04/2015, 20:07
Avatar de ignacio85r  
Fecha de Ingreso: mayo-2010
Ubicación: mar del plata
Mensajes: 155
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Campos requeridos segun ¿seleccion/opcion?
alexis. desde ya muchas gracias por tu ayuda. estuve probando lo que me indicaste y va bien, solo que me encuentro con un problema...
tanto el formulario 1 como el formulario 2 tienen campos en comun, es asi::
el user puede elegir entre cotizar o emitir. para cotizar se requieren datos minimos(edad, ubicacion, etc) pero para emitir, serian esos mismos datos mas otros, es decir deberia repetir los datos del primer formulario(cotizacion) y segun lo que veo no puedo tenerlos a ambos a la vez ya que se mostrara uno u otro.
por ende, aplicando la solucion que me ofreces tendria que rediseñar todos los formularios.
se puede llamar a un elemento en javascript por clases? ya que por id no puedo repetir elementos.
__________________
Los manuales existen por un motivo... explicar el funcionamiento de algo. ;-)
  #10 (permalink)  
Antiguo 20/04/2015, 22:34
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Campos requeridos segun ¿seleccion/opcion?
Claro que se puede, solo tendrías que cambiar el # por un punto.

Código Javascript: 
Ver original
  1. document.querySelector(".tuClase");

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #11 (permalink)  
Antiguo 27/04/2015, 15:50
Avatar de ignacio85r  
Fecha de Ingreso: mayo-2010
Ubicación: mar del plata
Mensajes: 155
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Campos requeridos segun ¿seleccion/opcion?
perfecto alexis. lo pude hacer de otra forma que me parece que es mas prolijo.

y anda :P

Código Javascript: 
Ver original
  1. function toggle(elemento) {
  2.           if(elemento.value=="a") {
  3.               document.getElementById("emision").style.display = "none";
  4.               document.getElementById("cotizacion").style.display = "none";
  5.            }else{
  6.                if(elemento.value=="b"){
  7.                    document.getElementById("emision").style.display = "block";
  8.                    document.getElementById("cotizacion").style.display = "none";
  9.                }else{
  10.                    if(elemento.value=="c"){
  11.                         document.getElementById("emision").style.display = "none";
  12.                         document.getElementById("cotizacion").style.display = "block";
  13.                     }  
  14.                 }
  15.             }
  16.         }
la cuestion es que siempre que ingreso a la pagina me muestra el contenido y yo solo quisiera que me muestre nada mas que los botones. deberia modificar este codigo pero no me doy cuenta como..
__________________
Los manuales existen por un motivo... explicar el funcionamiento de algo. ;-)
  #12 (permalink)  
Antiguo 27/04/2015, 20:35
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Campos requeridos segun ¿seleccion/opcion?
Oculta el contenido desde una hoja de estilos y listo. Lo volverás a mostrar pulsando uno de los botones.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand
  #13 (permalink)  
Antiguo 28/04/2015, 09:16
Avatar de ignacio85r  
Fecha de Ingreso: mayo-2010
Ubicación: mar del plata
Mensajes: 155
Antigüedad: 13 años, 11 meses
Puntos: 0
Respuesta: Campos requeridos segun ¿seleccion/opcion?
ocea creando una clase directamente en la hoja de estilos, luego al pulsar el boton se reemplaza el estilo que se aplica desde la hoja por el definido en el .js??
__________________
Los manuales existen por un motivo... explicar el funcionamiento de algo. ;-)
  #14 (permalink)  
Antiguo 28/04/2015, 10:07
Avatar de Alexis88
Philosopher
  
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Campos requeridos segun ¿seleccion/opcion?
Así es. Como con JS puedes modificar estilos, solo tendrías que hacer el cambio, el cual puede ser de una propiedad específica o de todo el conjunto de estilos.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

― Ayn Rand

Etiquetas: campos, formulario, javascript+html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:20.