1

Buenas estoy haciendo un formulario sencillo en el cual quiero introducir unos datos de un producto de una lista desplegable fija y a su vez un text field que por ejemplo asigne un numero de identificación único para ese producto.

El formulario tiene la sencilla estructura de una LABEL, LISTA DESPLEGABLE y un TEXTFIELD para poner los datos apropiados según la lista.

El caso es que dependiendo del caso necesito tan sólo añadir una vez dato o repetir el mismo paso generando otro formulario como ese en la misma pagina.

No tengo ni idea de como plantear el tema, alguna ayuda?

Adjunto imagen con el ejemplo basico de la idea.

Muchas Gracias

Diseño basico ejemplo

1 respuesta 1

4

yo te recomendaría una función de js como esta:

function nota ()
{
	var div = document.createElement('div');//Crea un div
	div.setAttribute('class', 'block');//Da classe block al div
	div.textContent="Esta es una nueva nota creada con js"//contenido del div
	document.getElementById("columna").appendChild(div);//Donde aparece el div
}
.bordes
{
	border-left: 2px solid #5d56d9;
	border-right: 2px solid #5d56d9;
	width: 300px;
	height: 600px;
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: 50px;
}

.bordes h4
{
	text-align: left;
	font-family: Arial;
	margin-left: 10px;
	margin-left: 10px;
	margin-bottom: 20px;
	margin-top: 0px;
	width: 250px;
	height: 20px;
	border-bottom: 1px solid grey;
}

.block
{
	width: 250px;
	height: auto;
	border:2px solid grey;
	border-radius: 3px;
	margin:  auto;
	margin-top: 20px;
	justify-content: left;
	background: #c2c2c2;
	float: none;
	display: block;
	box-shadow: 2px 2px 2px 2px black;
}

.block h5
{
	text-align: left;
	margin-left: 3px;
	margin-bottom: 0px;
	margin-top: 5px;
	font-family: Arial;
}

.nota p
{
	margin-right: 5px;
	margin-left: 5px;
	margin-top: 10px;
	text-align: justify;
	font-family: Arial;
	font-size: 0.95rem;
}
<!DOCTYPE html>
<html>
<head>
	<title>DECK</title>
	<link rel="stylesheet" type="text/css" href="css/estilos.css">
	<script type="text/javascript" src="js/funciones.js"></script>
</head>
<body>
<div class="bordes" id="columna">
<h4>Home</h4>
	<div class="block">
			<h5>Titulo</h5>
				<div class="nota">
					<p>Hola que tal</p>
				</div>
	</div>
	<div class="block" id="block">
			<h5>Titulo</h5>
			<div class="nota">
				<p>Hola esto es un texto de prueba.Hola esto es un texto de pruebaHola esto es un texto de pruebaHola esto es un texto de pruebaHola esto es un texto de pruebaHola esto es un texto de pruebaHola esto es un texto de pruebaHola esto es un texto de prueba</p>
			</div>
	</div>
</div>
</div>
<div calss="boton">
	<button type="button" onclick="nota()">Nueva nota</button>
</div>
</body>
</html>
Solo tendrías que cambiar que en vez de generar un div genere lo que tu quieras, como un campo de formulario.

2
  • Genial muchas gracias! Estoy empezando con esto y no habia pensado que se podia realizar asi! Muy util
    – Surek
    Commented el 15 feb. 2020 a las 14:57
  • Si te sirve puedes marcar la respuesta como valida o cerrada y votarla para ayudarme y ayudar a la comunidad! De nada Commented el 15 feb. 2020 a las 19:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.