cambiar value de un input una vez cargado el DOM

Dundee · #1 (**permalink**) 30/11/2011, 04:54

Hola gente, tengo que decir , que tal como tengo el código ahora , funciona en Mozilla perfectamente, el problema es con IE (como no).

Tengo dos sencillas funciones, una llamada init que recoge a traves de otra función get_param() el nombre de un dominio por url. Y una segunda domain_name que lo que hace es cambiar el valor por defecto del campo con ese nombre tan largo.

Código:

<script language="javascript">
function init() {
var domain=get_param();
domain_name(domain);
}
function domain_name(domain) {
var campo = new Array() 
campo=document.getElementsByName('_f62c2f350236285eab8d9a77e0fbaf24');
campo[0].defaultValue = "www."+domain;
alert('Dominio solicitado: '+campo[0].defaultValue);
}
</script>

Por último las cargo una vez cargado el DOM, para asegurarme que el formulario ya esta creado en el DOM.

Código:

<script type="text/javascript" >

window.onload = init; 
</script>

Alguna idea de porque no funciona con IE?.
Gracias de antemano.

Raziel_Ravenheart · #2 (**permalink**) 30/11/2011, 11:11

Tu problema podría estar en la función getElementsByName, ya que internet explorer y opera, recorren todos los elementos que tengan el valor buscado tanto en el atributo id como en el atributo name

Cita:

The getElementsByName method works differently in different browsers.

* In Internet Explorer and Opera, it searches and returns the elements matched by id and name attributes.
* In Firefox, Google Chrome and Safari, only elements with matching name attributes are returned.

Tomado de: getElementsByName method

Por otro lado, esa función get_param(), es de jQuery, o de donde la implementaste? me gustaríe hecharle una ojeada a ver que código incompatible con IE encontramos ahí

Dundee · #3 (**permalink**) 30/11/2011, 13:08

Cita:

Iniciado por Raziel_Ravenheart

Por otro lado, esa función get_param(), es de jQuery, o de donde la implementaste? me gustaríe hecharle una ojeada a ver que código incompatible con IE encontramos ahí

No, no es de Jquery , es una función normalita javascript que recoge los parámetros pasados por url, pero no la he puesto porque funciona perfectamente, la he probado con alert() y funciona en IE.
Aún así , ahí va.

Código:

function get_param() {
var Url = location.href;
Url = Url.replace(/.*\?(.*?)/,"$1");
Variables = Url.split ("&");
for (i = 0; i < Variables.length; i++) {
       Separ = Variables[i].split("=");
       eval ('var '+Separ[0]+'="'+Separ[1]+'"');
      
}
 return domain;
}

Insisto que esta función trabaja perfectamente en todos los navegadores que he probado.
Un saludo

zerokilled · #4 (**permalink**) 30/11/2011, 13:54

buenas,
debes explicar que tipo de error obtienes. el navegador te muestra algún aviso o esperas un resultado el cual no obtienes. en iexplorer parece que no es posible cambiar el valor del campo a traves de la propiedad defaultValue, intenta con value. adicionalmente, considera lo indicado por @raziel.

Raziel_Ravenheart · #5 (**permalink**) 30/11/2011, 15:56

Aunque llegué a pensarlo, justo antes de leerlo de nuevo, ví que zerokilled ya te lo ha dicho... mira si el atributo defaultValue, se comporta como debe en Internet Explorer, y trata de ver los resultados de la ejecución del script en la consola utilizando las herramientas de desarrollo, generalmente se abren con F12.

Código Javascript:

Ver originaleval ('var '+Separ[0]+'="'+Separ[1]+'"');

Una recomendación, no utilices esa función eval, trata de cambiarla, esa función es maligna...xD y si estuvieras haciendo un login, de seguro buscan el modo para valerse de esta función y dañarte la ejecución de tu script.

Raziel_Ravenheart · #6 (**permalink**) 30/11/2011, 16:06

zerokilled tiene toda la razón es defaultValue, por que intenté modificando este código

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function displayResult()
{
var x=document.getElementById("email").defaultValue;
alert(x);
}
</script>
</head>
<body>
 
<form>
Email: <input type="text" id="email" value="[email protected]" />
</form>
 
<button type="button" onclick="displayResult()">Display default value</button>
 
</body>
</html>

que encontré en w3schools:
w3Schools ejemplo defaultValue

y lo modifiqué con un window.onload así:

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
window.onload = function () {
  document.getElementById("email").defaultValue = "yahoo";
}
 
function displayResult()
{
var x=document.getElementById("email").defaultValue;
alert(x);
}
</script>
</head>
<body>
 
<form>
Email: <input type="text" id="email" value="[email protected]" />
</form>
 
<button type="button" onclick="displayResult()">Display default value</button>
 
</body>
</html>

Traté de ejecutarlos en ambos navegadores y no funcionó en IE8, que es el que tengo.

Trata cambiando defaultValue por value.

Saludos

Raziel_Ravenheart · #7 (**permalink**) 30/11/2011, 16:13

Ahora también pasó lo que me había imaginado, tal vez en IE7 e IE8, si funciona, pero el cambio visual no se ejecuta, solo se ejecuta en otros exploradores, tal vez solo se realiza el cambio en el fondo, nada más, te lo puedo asegurar por que me dió por ejecutar el código modificado, oprimir el botón y mira lo que salió, inténtalo tu también para que te des cuenta, hazlo en tu código a ver si sucede lo mismo.

te dejo la captura que saqué para que veas el resultado

Ten presente que Internet Explorer siempre va a mostrar comportamientos raros o nisiquiera los va a dejar ver.

Exitos

Dundee · #8 (**permalink**) 01/12/2011, 03:55

Cita:

Iniciado por Raziel_Ravenheart

Ahora también pasó lo que me había imaginado, tal vez en IE7 e IE8, si funciona, pero el cambio visual no se ejecuta

Ten presente que Internet Explorer siempre va a mostrar comportamientos raros o nisiquiera los va a dejar ver.

Exitos

Gracias a ambos por la ayuda, pero el cambiar DefaulValue por value ya lo había hecho a primeras y no funcionaba. Tendré que resignarme o utilizar Jquery. La verdad que programo en PHP y Javascript nunca me ha gustado demasiado; pero para algunas cosas como esta es necesario. Y digo que nunca me ha gustado porque al ser un lenguage del lado del cliente, estas muy limitado en función de lo que el cliente este utilizando (IE,Mozilla etc etc..), y es imposible saber que usan.
Con Jquery (esto no sucede o sucede menos), pero para algo tan simple como cambiar el value de un campo no quería cargar las librerías de Jquery , pero es lo que hay (:.

Se que se puede utilizar PHP lógicamente , haciendo uso del método GET, pero estoy utilizando librerías que he trabajado poco, cuya modificación no es nada sencilla, por ello quería hacerlo del lado del cliente.
Mil gracias

zerokilled · #9 (**permalink**) 01/12/2011, 10:02

entonces el problema debe ser lo que @raziel cita en la primera repuesta acerca del método getElementsByTagName y las peculiaridades de algunos navegadores. mientras tanto, lo único que podemos hacer es adivinar en base al código que has mostrado. mi recomendación es que muestres algo más completo. preferiblemente una url en caso de que tengas código de lado servidor.

Dundee · #10 (**permalink**) 01/12/2011, 11:16

Cita:

Iniciado por zerokilled

entonces el problema debe ser lo que @raziel cita en la primera repuesta acerca del método getElementsByTagName y las peculiaridades de algunos navegadores. mientras tanto, lo único que podemos hacer es adivinar en base al código que has mostrado. mi recomendación es que muestres algo más completo. preferiblemente una url en caso de que tengas código de lado servidor.

El código es ese , no hay más , simplemente una url cualquiera te sirve para entenderlo, loquesea/index.php?var=90, ademas esa parte la tengo controlada y funciona perfectamente. Por cierto getElementsByTagName no tienen nada que ver ,ese método de Javascript es para referirse a los elementos del DOM , es decir un Tag name es INPUT O SELECT o TITLE, pero no se refiere al atributo "name" que puedan tener estos, para eso está el otro método getElementsByName.

Un saludo

zerokilled · #11 (**permalink**) 01/12/2011, 11:26

Cita:

El código es ese , no hay más , simplemente una url cualquiera te sirve para entenderlo, loquesea/index.php?var=90, ademas esa parte la tengo controlada y funciona perfectamente.

me refiero a la parte html. en particular, ¿tienes más de un elemento que comparte el mismo valor en el atributo name y id? por eso decia que evaluaras la cita de @raziel.

Cita:

Por cierto getElementsByTagName no tienen nada que ver

tienes toda la razon! fue una confunsión momentanea. quizas fue que llevo leyendo varios temas seguidos donde parte de la solución es con dicho método y ahora se me grabo mentalmente el maldito nombre.

Dundee · #12 (**permalink**) 01/12/2011, 12:36

Cita:

Iniciado por zerokilled

me refiero a la parte html. en particular, ¿tienes más de un elemento que comparte el mismo valor en el atributo name y id?
:

No, solo tengo un elemento con el atributo name que tiene ese valor. Los name y los ids que yo sepa deben de ser únicos en el DOM.

zerokilled · #13 (**permalink**) 01/12/2011, 13:05

Cita:

Los name y los ids que yo sepa deben de ser únicos en el DOM.

los valores de los names pueden repetirse, incluso entre distintos tipos de elementos. lo que deben ser únicos son los IDs. sin embargo, comunmente he visto la práctica donde el mismo valor asignado al ID se lo asignan a NAME. por ejemplo,

Código:

<p id="IDed"><input name="IDed"></p>

más allá de si esta bien o mal, el asunto es que getElementsByName funciona un tanto distinto en iexplorer. cuando se interpreta getElementsByName("IDed"), el método captura tanto el elemento INPUT como P, aunque este último no tiene NAME. esa era la parte que queria que revisaras. si no es tu caso, entonces hay otra cosa que esta afectando. mi consejo, revisa la consola de error de iexplorer.

Dundee · #14 (**permalink**) 01/12/2011, 13:35

Cita:

Iniciado por zerokilled

revisa la consola de error de iexplorer.

Bueno , la verdad que Iexplorer no es que de un error muy exacto que digamos, nunca suele coincidir ni las líneas ni nada.
Un saludo

zerokilled · #15 (**permalink**) 01/12/2011, 17:01

no comprendo la naturaleza de porqué cambiar el valor a traves de defaultValue. defaultValue y value son dos memorias distintas con propósitos distintos. el primero debería representar el valor por defecto que refleja el atributo value a nivel DOM, mientras que la propiedad value refleja el contenido actual del campo. fíjate que son dos cosas distintas. defaultValue se utiliza para cambiar el valor original del campo. de modo que al reiniciar un formulario -botón tipo reset-, el navegador restaura el campo al nuevo valor. por tanto, todo depende de tu objetivo: si quieres cambiar el valor actual del campo usa la propiedad value; si quieres cambiar el valor defacto utiliza defaultValue.

si me preguntarás por qué algunos navegadores reflejan el cambio cuando se altera defaultValue y otros no. mi opinión sería... en lugar de contestarte el porqué, te respondería cual creo que es el método correcto. pienso que el correcto es cuando el cambio sucede, pero en realidad tiene un proceso más elaborado. el cambio se dá porque en ese instante el campo en si no ha sido alterado por ningún proceso humano o programado. en esa circunstancia, si por alguna razón, alguna programación cambia el valor defacto y no se viera reflejado, entonces se necesita interación humana para reestablecer el campo. no es conveniente porque puede suceder que el usuario haya modificado el estado de otros campos y al pulsar el botón reset perdería todo. en la situación de que no ocurre un reflejo al alterar defaultValue debería ser cuando el campo ha sido modificado, ya sea por interacción humana o programada.

Dundee · #16 (**permalink**) 02/12/2011, 03:54

Gracias a tod@s por la ayuda, he cambiado :
campo[0].defaultValue = "www."+domain;
por campo[0].value = "www."+domain;

Y ya funciona perfectamente en ambos navegadores. Esto ya lo había hecho antes, pero seguramente tenía algún error gramatical (o algo por el estilo) que no me funcionaba).

Mil gracias