CSS - Abrir formulario en la misma pagina

 
Vista:
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por Robokick (21 intervenciones) el 07/11/2020 00:33:38
HOLA AMIGOS ESPERO ESTAR EN EL FORO CORRECTO DE ESTA PAGINA

ESTOY APRENDIENDO A CREAR MARCOS YA EH PODIDO CREAR UN MARCO A LA IZQUIERDA QUE QUIERO QUE SEA EL MENU DE TODOS LOS ACCESOS A LOS FORMULARIOS COMO REGISTRO DE CLIENTES ACTUALIZACION DE CLIENTES ETC

Y LOQ QUE QUIERO HACER ES QUE CADA FORMULARIO ME APAREZCA EN LA MSMA PAGINA Y NO SE ESTE ABRIENDO OTRAS VENTANAS O PESTAÑAS

COMO ESTUVE INVESTIGANDO ENCONTRE UN CODIGO SIMPRE Y ESTOY TRATANDO DE ADAPTARLO ADJUNTO MI CODIGO ESPERO ME PUEDEN AYUDAR CON ESTO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Menú Principal</title>
	<link rel="stylesheet" type="text/css" href="estilo.css" />
		<style>
			div#columna {
			border: solid 1px #ccc;
			position: absolute;
			left: 30px;
			top: 80px;
			width: 150px;
			height: 350px;
			}
 
			div#contenido {
				border: solid 1px #ccc;
				position: absolute;
				overflow: hidden;
				left: 200px;
				top: 80px;
				width: 580px;
				height: 350px;
				padding: 0 20px;
			}
			div#registro div#marco2 {
				height: 100%;
				width: 100%;
			}
 
		</style>
<head>
<body>
<h1>Sistema Anco</h1>
 
<div id="columna">
	<h2>Menu Principal</h2>
		<ul>
<!--<li><a href="http://localhost/sistema/anco/regcliente/formcliente.php">Registro de Cliente</a></li>-->
		<li><a href="#registro">Registro de Clientes</a></li>
		<li><a href="#marco2">Marco 2</a></li>
		</ul>
</div>
 
<div id="contenido">
<div id="registro">
<a href="http://localhost/sistema/anco/regcliente/formcliente.php">ssss</a>
</div>
 
<div id="marco2">
<p>Nam urna nisl, blandit vitae molestie id, mattis ut augue. Ut sit amet libero felis, at scelerisque neque. Nulla luctus porta sapien, vel imperdiet odio euismod et. Donec id adipiscing felis. Nam pellentesque mollis pellentesque. Aliquam vel diam nec ante consectetur auctor sed vitae augue. Fusce erat massa, volutpat ac
</p>
 
</div>
</div>
 
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por joel (252 intervenciones) el 07/11/2020 09:52:13
Hasta donde yo se, para ello tienes que utilizar javascript.

Aquí te he modificado tu código con una manera de hacerlo... espero que te sirva.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Menú Principal</title>
	<link rel="stylesheet" type="text/css" href="estilo.css" />
    <style>
        div#columna {
        border: solid 1px #ccc;
        position: absolute;
        left: 30px;
        top: 80px;
        width: 150px;
        height: 350px;
        }
 
        div#contenido {
            border: solid 1px #ccc;
            position: absolute;
            overflow: hidden;
            left: 200px;
            top: 80px;
            width: 580px;
            height: 350px;
            padding: 0 20px;
        }
        div#registro div#marco2 {
            height: 100%;
            width: 100%;
        }
 
        .hide {display:none;}
    </style>
<head>
<body>
<h1>Sistema Anco</h1>
 
<div id="columna">
	<h2>Menu Principal</h2>
		<ul>
            <!--<li><a href="http://localhost/sistema/anco/regcliente/formcliente.php">Registro de Cliente</a></li>-->
            <li><a href="#" data-id="registro">Registro de Clientes</a></li>
            <li><a href="#" data-id="marco2">Marco 2</a></li>
		</ul>
</div>
 
<div id="contenido">
    <div id="registro">
        <a href="http://localhost/sistema/anco/regcliente/formcliente.php">ssss</a>
    </div>
 
    <div id="marco2" class='hide'>
        <p>Nam urna nisl, blandit vitae molestie id, mattis ut augue. Ut sit amet libero felis, at scelerisque neque. Nulla luctus porta sapien, vel imperdiet odio euismod et. Donec id adipiscing felis. Nam pellentesque mollis pellentesque. Aliquam vel diam nec ante consectetur auctor sed vitae augue. Fusce erat massa, volutpat ac
        </p>
    </div>
</div>
 
</body>
</html>
 
<script>
// creamos el evento click
document.querySelectorAll("#columna li a").forEach(el => el.addEventListener("click", menu));
function menu() {
    // marcamos todos como oculos
    document.querySelectorAll("#contenido>div").forEach(el => el.classList.add("hide"));
    // eliminamos el oculto al que se ha hecho click
    document.getElementById(this.dataset.id).classList.remove("hide");
}
</script>

Si tienes cualquier duda...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por Robokick (21 intervenciones) el 07/11/2020 13:43:55
Hola wolww lo malo q java script todavía desconozco y bueno el formulario que encontré no usa java script la diferencia es que el que encontré no llama a un link sino a un párrafo creado en el mismo archivo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por joel (252 intervenciones) el 07/11/2020 14:50:09
nos puedes mostrar el formulario que encontraste? haber como lo hace?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por Robokick (21 intervenciones) el 07/11/2020 15:08:28
CLARO ACA ESTA EL FORMULARIO QUE ENCONTRE ADJUNTO TAMBIEN LA IMAGEN DE MI FORMULARIO Y LO QUE YO QUIERO QUE MI FORMULARIO FORMCLIENTE.PHP ME APAREZCA DONDE ESTA EL BORDE VACIO O TAMBIEN PUEDO SACAR ESE BORDE PERO QUE ME APAREZCA EN ESA AREA

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
 
<head>
  <title>Ejemplo</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
	<style>
			html  {
  font: normal 13px arial,helvetica,sans-serif;
  }
 
h1  {
  text-align: center;
  color: #987;
  }
 
h2  {
  text-align: center;
  color: #777;
  }
 
ul {
  list-style: circle;
  color: #888;
  }
 
ul li a {
  color: #888;
  text-decoration: none;
  font-weight: bold;
  }
 
ul li a:hover {
  color: #f00;
  }
 
p {
  color: #456;
  }
 
/* Capas del ejemplo  */
 
div#columna {
  border: solid 1px #ccc;
  position: absolute;
  left: 30px;
  top: 80px;
  width: 150px;
  height: 350px;
}
 
div#contenido {
  border: solid 1px #ccc;
  position: absolute;
  overflow: hidden;
  left: 200px;
  top: 80px;
  width: 580px;
  height: 350px;
  padding: 0 20px;
}
 
div#marco1, div#marco2 {
  height: 100%;
  width: 100%;
}
 
 
	</style>
<body>
<h1>Ejemplo de simulación de marcos o frames</h1>
 
<div id="columna">
<h2>Menú</h2>
<ul>
  <li><a href="#marco1">Marco 1</a></li>
  <li><a href="#marco2">Marco 2</a></li>
</ul>
</div>
 
<div id="contenido">
<div id="marco1">
<h2>Contenido 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper sem quis felis pulvinar laoreet. Donec euismod erat semper diam sodales non vehicula mauris elementum. Aliquam commodo sollicitudin nisl, eget consequat turpis tempor vitae. Suspendisse rhoncus erat nec tellus vulputate ac egestas nulla tristique. Mauris nisl enim, fringilla non dapibus ac, tincidunt ullamcorper ligula. Etiam ut tellus eros. Donec congue dignissim feugiat. Aenean pellentesque convallis leo ut facilisis. Vestibulum ac turpis quis felis vestibulum vulputate a ac eros. Aenean ultricies sapien quis sapien congue nec rhoncus ligula consectetur. Nam dolor orci, feugiat vel vestibulum sit amet, pellentesque quis sem. Proin tempus mauris quis lacus tempus fringilla. Cras ut justo nec nunc porta hendrerit.</p>
<p>Nulla turpis nunc, posuere at varius a, fermentum non orci. Aenean condimentum erat vel justo luctus consequat. Donec vehicula erat in risus pretium faucibus. Curabitur tempus vehicula libero non commodo. Nullam eu mauris a nulla molestie sodales eu vitae ligula. Nulla elementum sem quis dolor tincidunt nec pellentesque mauris ultrices. Maecenas imperdiet, erat ac porta rutrum, metus elit lacinia lectus, sit amet pulvinar risus metus quis tortor. Morbi sed nisi turpis, sit amet convallis nulla. Fusce quis ullamcorper mauris. Integer commodo semper posuere. Fusce elementum nisl ac augue consequat nec pulvinar dolor laoreet. Mauris nulla tortor, mollis quis imperdiet vel, rhoncus quis erat. Aliquam lectus metus, consectetur vitae feugiat vel, tincidunt nec velit. </p>
</div>
 
<div id="marco2">
<h2>Contenido 2</h2>
<p>Nam urna nisl, blandit vitae molestie id, mattis ut augue. Ut sit amet libero felis, at scelerisque neque. Nulla luctus porta sapien, vel imperdiet odio euismod et. Donec id adipiscing felis. Nam pellentesque mollis pellentesque. Aliquam vel diam nec ante consectetur auctor sed vitae augue. Fusce erat massa, volutpat ac vulputate ac, dictum non arcu. Phasellus suscipit bibendum massa vel iaculis. Nullam bibendum viverra orci id aliquet. Duis consequat neque id lectus aliquet sed feugiat nisl adipiscing. Nunc suscipit est nec purus faucibus ultrices. </p>
<p>Mauris at velit nulla, id bibendum neque. Nullam et augue id elit convallis fringilla vel non urna. Nulla lectus ante, fermentum nec dapibus vitae, tincidunt vel lectus. Pellentesque luctus quam a mi mollis gravida. Curabitur est lorem, aliquam sed varius nec, adipiscing vel sapien. Donec at tortor tellus. Suspendisse vitae neque vitae odio mollis ultricies ac sed mi. Aenean et nisl non mauris molestie tempor et sed eros. Maecenas scelerisque placerat eros et bibendum. Mauris venenatis, enim sodales elementum consectetur, tellus nisi euismod sem, dapibus pulvinar lectus lorem nec enim. Quisque auctor fermentum scelerisque. Etiam sed nulla quis eros pellentesque convallis sit amet eu neque. Aenean mattis placerat vehicula. Cras eget lacus odio. Cras commodo fringilla pharetra. In eget lacus metus, dignissim rutrum diam. Fusce sed magna ut nulla cursus feugiat. Fusce fringilla quam id quam auctor feugiat. Nulla tincidunt venenatis diam, in varius libero imperdiet vitae. </p>
</div>
</div>
 
</body>
</html>
Sin-titulo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por joel (252 intervenciones) el 09/11/2020 08:16:38
Que bueno Robokick, esta muy bien pensado!!! Lo que hace es posicionar el anchor dentro de un div... pero has visto que pasa si el contenido es mas grande que el contenedor? no aparece... aunque creo que se podria solucionar con otro div scroll!!!

Muchas gracias por mostrarlo!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por Robokick (21 intervenciones) el 09/11/2020 16:16:53
Osea no hay solución para lo que quiero implementar??
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por joel (252 intervenciones) el 09/11/2020 20:31:59
Si, si, claro... aqui lo tienes con tu código...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Menú Principal</title>
    <style>
        #columna {
        border: solid 1px #ccc;
        position: absolute;
        left: 30px;
        top: 80px;
        width: 150px;
        height: 350px;
        }
 
        #contenido {
            border: solid 1px #ccc;
            position: absolute;
            overflow: hidden;
            left: 200px;
            top: 80px;
            width: 580px;
            height: 350px;
            padding: 0 20px;
        }
        #contenido>div {
            height: 100%;
            width: 100%;
        }
    </style>
<head>
<body>
<h1>Sistema Anco</h1>
 
<div id="columna">
	<h2>Menu Principal</h2>
		<ul>
            <!--<li><a href="http://localhost/sistema/anco/regcliente/formcliente.php">Registro de Cliente</a></li>-->
            <li><a href="#registro">Registro de Clientes</a></li>
            <li><a href="#marco2">Marco 2</a></li>
		</ul>
</div>
 
<div id="contenido">
    <div id="registro">
        <a href="http://localhost/sistema/anco/regcliente/formcliente.php">ssss</a>
    </div>
 
    <div id="marco2">
        <p>Nam urna nisl, blandit vitae molestie id, mattis ut augue. Ut sit amet libero felis, at scelerisque neque. Nulla luctus porta sapien, vel imperdiet odio euismod et. Donec id adipiscing felis. Nam pellentesque mollis pellentesque. Aliquam vel diam nec ante consectetur auctor sed vitae augue. Fusce erat massa, volutpat ac
        </p>
    </div>
</div>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por Robokick (21 intervenciones) el 09/11/2020 22:11:58
Claro pero yo quiero que el http://........
Se abra pero aun así pueda ver mi columna Menú Principal seguir en la misma página
Donde declaró el #registro????
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por Robokick (21 intervenciones) el 09/11/2020 22:53:25
Joel ok ya voy entendiendo el codigo y en el bod que es la clase #contenido ahi si se visualiza el parrafo que este marco2 pero no hay forma que en esa misma clase me aparezca el formulario que esta creado para registrar clientes ???

como te comento yo busco que me carghe el formulario en la clase contenido al igual que carga ahi marco2 y poder ver la columna de la izquirda que es el menu principal que corresponde a la clase #columna
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por joel (252 intervenciones) el 10/11/2020 07:08:10
No se a que formulario haces referencia, pero si lo haces como el #registro o #marco2 te funcionara sin problema.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por Robokick (21 intervenciones) el 10/11/2020 14:13:24
Claro funciona pero el registro que es un formulario. Php y arribista pongo el enlace ese formulario me abre en otra ventana y yo busco que abra en la misma ventana principal marco si se ve en la misma ventana pero registro que es un link abre en otra ventana y yo quiero que todo se abra en la isma ventana
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por joel (252 intervenciones) el 10/11/2020 17:32:26
Solo tienes que añadirlo debajo.... mira este ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Menú Principal</title>
    <style>
        #columna {
        border: solid 1px #ccc;
        position: absolute;
        left: 30px;
        top: 80px;
        width: 150px;
        height: 350px;
        }
 
        #contenido {
            border: solid 1px #ccc;
            position: absolute;
            overflow: hidden;
            left: 200px;
            top: 80px;
            width: 580px;
            height: 350px;
            padding: 0 20px;
        }
        #contenido>div {
            height: 100%;
            width: 100%;
        }
    </style>
<head>
<body>
<h1>Sistema Anco</h1>
 
<div id="columna">
	<h2>Menu Principal</h2>
		<ul>
            <!--<li><a href="http://localhost/sistema/anco/regcliente/formcliente.php">Registro de Cliente</a></li>-->
            <li><a href="#registro">Registro de Clientes</a></li>
            <li><a href="#marco2">Marco 2</a></li>
		</ul>
</div>
 
<div id="contenido">
    <div id="registro">
        <a href="#formulario">ssss</a>
    </div>
 
    <div id="marco2">
        <p>Nam urna nisl, blandit vitae molestie id, mattis ut augue. Ut sit amet libero felis, at scelerisque neque. Nulla luctus porta sapien, vel imperdiet odio euismod et. Donec id adipiscing felis. Nam pellentesque mollis pellentesque. Aliquam vel diam nec ante consectetur auctor sed vitae augue. Fusce erat massa, volutpat ac
        </p>
    </div>
 
    <div id="formulario">
        <p>Aqui va mi formulario
        </p>
    </div>
 
</div>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por Robokick (21 intervenciones) el 10/11/2020 18:39:29
Donde pones aquí va mi formulario debo de colocar el link que abre el formulario. Php???? O debo poner todo mi código php y html que genera ese formulario???
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por joel (252 intervenciones) el 10/11/2020 18:51:44
Tienes que poner el codigo... lo que quieres que muestre
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 60
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Abrir formulario en la misma pagina

Publicado por Robokick (21 intervenciones) el 10/11/2020 18:54:59
Voy a probar y t cuento a ver que pasa
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar