Añadir link a partir de form

canolucas · #1 (**permalink**) 26/01/2009, 11:28

Buenas, soy nuevo aqui!
Antes que nada Hola a Todos!

Bueno, ando liado con una pagina, asi que paso a explicar mi problema:

Tengo un menu con varios links. El ultimo dice "Añadir Link".

Lo que deseo hacer es que cuando se presione ese link se abra una ventana de alerta con dos casillas para insertar texto. una que diga nombre y la otra, URL.
Al darle ok al formulario se debe añadir el link al menu, justo arriba de donde dice "Añadir link". Asi el usuario podra añadir los links que desee al menu y "Añadir Link" siempre quedará ultimo.

Saludos y muchas gracias por cualquier ayuda que puedan brindarme.

trasgukabi · #2 (**permalink**) 26/01/2009, 17:05

con usuarios registrados? te refieres a un menú personal....para siempre? eso tendrías que hacerlo con una base de datos si quieres que sea permanente, o con cookies.

canolucas · #3 (**permalink**) 26/01/2009, 17:08

sin usuarios registrados. estaria bien lo de la cookie.
estaba pensando en algo asi: xq no funciona?

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
function toggle_layers() {
	
for (i = 0, i_length = arguments.length; i < i_length; i++) {
obj_layer = document.getElementById(arguments[i]);
if (obj_layer.style.display == 'block') {
obj_layer.style.display = 'none';
var s_msie = 'visible';
}
else {
obj_layer.style.display = 'block';
var s_msie = 'hidden';
}
}
	
if (navigator.userAgent.indexOf('MSIE') > -1)	{
obj_selects = document.getElementsByTagName('select');
for(i = 0; i < obj_selects.length; i++) {
obj_selects[i].style.visibility = s_msie;
}
}
}
</script>

<script type="text/javascript">
function html_inject()
{
var nombre = document.forms[0].nombre.value;
var url = document.forms[0].url.value;
document.getElementById('links').innerHTML = document.getElementById('links').innerHTML+'<a href="'+url+'">'+nombre+'</a><br />';
}
</script>

</head>

<body>
<div id="links" style="position:relative;"></div>
<input type="button" onclick="toggle_layers('blur', 'form');" value="Añadir Link"></input>

<div id="blur" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;">
<div style="position: absolute; top: 0; left: 0; background: #eee; opacity: .85; filter: alpha(opacity=85); width: 100%; height: 100%;">
</div></div>

<div id="form" style="display: none; position: absolute; top: 200px; left: 380px; background: #fff; border: 1px solid #000; padding: 10px; width: 150px;">
<form action="" method="get" onsubmit="toggle_layers('blur', 'form'); html_inject();">
<label for="nombre"><input type="text" id="nombre"></input></label><br />
<label for="url"><input type="text" id="url"></input></label><br /><br />
<input type="submit" style="float: right;" value="ok"></input>
</form>
</div>
</body>
</html>

trasgukabi · #4 (**permalink**) 26/01/2009, 17:29

en realidad funciona. Lo que pasa es que envías el formulario y la página se carga otra vez. tendrías que cargarlo en el evento onclick del botón (y cambiarle el type a button para que el formulario no se envíe)
Pero esto no vale para nada. en cuanto el usuario se marche, adiós menú.

canolucas · #5 (**permalink**) 26/01/2009, 17:43

bien, entonces ahora sí funciona, gracias!
Ahora lo que necesito es:
1) que cuando presione "ok" (en el evento onclick) se guarde una cookie con los datos nombre y url. podria usar otro javascript.
2) cargar los datos de la cookie dentro del div de id "links" para que se vean los links personalizados al cargar la pagina.

como podria hacer estas dos cosas?

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
function toggle_layers() {
	
for (i = 0, i_length = arguments.length; i < i_length; i++) {
obj_layer = document.getElementById(arguments[i]);
if (obj_layer.style.display == 'block') {
obj_layer.style.display = 'none';
var s_msie = 'visible';
}
else {
obj_layer.style.display = 'block';
var s_msie = 'hidden';
}
}
	
if (navigator.userAgent.indexOf('MSIE') > -1)	{
obj_selects = document.getElementsByTagName('select');
for(i = 0; i < obj_selects.length; i++) {
obj_selects[i].style.visibility = s_msie;
}
}
}
</script>

<script type="text/javascript">
function html_inject()
{
var nombre = document.forms[0].nombre.value;
var url = document.forms[0].url.value;
document.getElementById('links').innerHTML = document.getElementById('links').innerHTML+'<a href="'+url+'">'+nombre+'</a><br />';
}
</script>

</head>

<body>
<div id="links" style="position:relative;"></div>
<input type="button" onclick="toggle_layers('blur', 'form');" value="Añadir Link"></input>

<div id="blur" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;">
<div style="position: absolute; top: 0; left: 0; background: #eee; opacity: .85; filter: alpha(opacity=85); width: 100%; height: 100%;">
</div></div>

<div id="form" style="display: none; position: absolute; top: 200px; left: 380px; background: #fff; border: 1px solid #000; padding: 10px; width: 150px;">
<form action="" method="get">
<label for="nombre"><input type="text" id="nombre"></input></label><br />
<label for="url"><input type="text" id="url"></input></label><br /><br />
<input type="button" style="float: right;" value="ok" onclick="toggle_layers('blur', 'form'); html_inject();"></input>
</form>
</div>
</body>
</html>

trasgukabi · #6 (**permalink**) 26/01/2009, 20:05

buscando en el foro o google. Lo siento, pero por programar cobro.
y, total, para hacer lo que iba a hacer que es BUSCAR EN GOOGLE y poner aquí algún enlace, mejor lo haces tú.
Sin malos rollos. Pero date cuenta que incluso será más rápido para tí así..