Substring en formulario html
Para lo que domináis Java Script creo que lo que
necesito es muy fácil . Estoy roto de no conseguirlo..
Tengo hecho un formulario en el que hay un form -campo1- que es el
Nombre. Lo que necesito es que el usuario cuando introduzca su nombre en
ese campo de forma automática en el -campo2- utilizando substring quede
representadas las 3 primeras letras del campo1. Ambos campos los
necesito en type="text" para ser enviados a una base de datos. Pongo el
código de los pequeños campos.
Miiiiil gracias a quien me pueda echar un cable.. Muy agradecido.
<html>
<head>
<title>Ejemplo JavaScript</title>
</head>
<body>
<script language="JavaScript">
function Extraer(form) {
//var init = form.inicial.value; ESTO NO CREO QUE SEA NECESARIO
//var fin = form.final.value;
var Nombre = form.cadena.value.substring(0, 3);
if (Nombre != "")
alert("El usuario es: " + Nombre);
else
alert("Índices fuera de rango");
}
</script>
<form>
<blockquote>
<p>Introducir Nombre:
<INPUT type="text" name="Nombre" size=20>
</p>
<p>El Usuaruio es :
<INPUT name="usuario" type="text" id="usuario" size=20>
aquí que aparezcan los tres primeros caracteres del campo Nombre<br>
</p>
<center>
<input
type="button" value=" Extraer "
id=="Extraer(this.form)"> // esto no me vale no
necesito el botón, sino el campo usuario
</center>
</blockquote>
</form>
</body>
</html>
2 Respuestas
Tienes 2 fallos principalmente:
1. El botón: en tu código está definido así:
<input type="button" value=" Extraer " id=="Extraer(this.form)">
El id no está bien definido porque le has puesto dos símbolos == y además has sustituido las comillas dobles por ". Aparte de esto, lo que tú llamas id debería ser onClick, porque lo que quieres no es identificar el botón, sino hacer que se dispare una función JavaScript al ser pulsado. De esta manera, el código para el botón quedaría así:
<input type="button" value=" Extraer " onClick="Extraer(this.form)" />
2. En el código de la función JavaScript, la primera línea es:
var Nombre = form.cadena.value.substring(0, 3);
Pero ¿dónde está definido el campo "cadena"? El campo que contiene el nombre se llama "Nombre", así que deberías sustituir esta línea por:
var Nombre = form.Nombre.value.substring(0, 3);
Con esto debería solucionarse. De todas maneras tienes otros fallos que, aunque no son críticos, deberían tenerse en cuenta:
-La sección <script>...</script> debe ir dentro de la sección <head>...</head>, no dentro de <body>...</body>.
-Los nombres de identificadores de funciones y variables de JavaScript comienzan por minúsculas o por subguiones, nunca por mayúsculas.
-No tiene sentido definir un formulario para tu código. No tiene acción, es decir, no realiza ninguna redirección, y aunque la tuviera, no contiene un botón de tipo submit, así que la acción no podría llevarse a cabo. Te vale con definir los campos y los botones.
Y algún detalle más que ya irás puliendo.
Gracias experto, los fallos en el código han sido fruto de las constantes manipulaciones de corta pega.. etc..
No necesito ningún botón extraer ni alerta, lo que si necesito es que el resultado del substring sea en forma de texto dentro del campo usuario.. es decir, si en el campo nombre escribo TOMAS, el resultado del campo usuario, sea TOM
Te agradezco de verdad tu contestación.
el formulario sería este: (aunque claro desconozco como darle el código al campo usuario)
<html>
<head>
<title>Ejemplo JavaScript</title>
<script language="JavaScript">
function Extraer(form) {
var Nombre = form.Nombre.value.substring(0, 3);
</script>
</head>
<body>
<form>
<blockquote>
<p>Introducir la cadena de caracteres:
<INPUT name="Nombre" type="text" id="Nombre" size=20>
</p>
<p>El Usuaruio es :
<INPUT name="usuario" type="text" id="usuario" size=20>
<br>
</p>
<center>
</form>
</body>
</html>
Un saludo.
PD: estos campos formarán parte de un formulario en el que otros campos si funcionan y se envían bien a la db
Es muy sencillo, ya casi lo tienes. Puesto que la función Extraer tiene que asignar los tres primeros caracteres del nombre al campo usuario y el valor de este campo está definido por form. Usuario. Value, lo que tienes que hacer es asignar ese valor así:
form.usuario.value = unValor;
En este caso, unValor sería la cadena formada por los tres primeros caracteres del nombre, de forma que el código de la función quedaría así:
function Extraer(form) {
form.usuario.value = form.Nombre.value.substring(0, 3);
}Ahora bien, ¿cómo hacemos que el campo usuario se actualice automáticamente a medida que el campo Nombre cambia? Podemos hacer que la función Extraer se llame cada vez que el usuario termina de pulsar una tecla, es decir, cada vez que levanta el dedo del teclado, o lo que es lo mismo, mediante la propiedad onKeyUp. Así, el código del campo Nombre quedaría de esta manera:
<INPUT name="Nombre" type="text" id="Nombre" size=20 onKeyUp="Extraer(form)">
Con estos dos cambios, tu código debería funcionar.
Gracias Experto.. creo haber realizado lo que me has dicho.. algo pasa que no termina de funcionar.. este es el código por si acaso;
<html>
<head>
<title>Ejemplo JavaScript</title>
<script language="JavaScript">
function Extraer(form) {
form.usuario.value = form.Nombre.value.substring(0, 3);
}
</script>
</head>
<body>
<form>
<blockquote>
<p>Introducir la cadena de caracteres:
<INPUT name="Nombre" type="text" id="Nombre" size=20>
</p>
<p>El Usuaruio es :
<INPUT name="Nombre" type="text" id="Nombre" size=20 onKeyUp="Extraer(form)">
<br>
</p>
<center>
</form>
</body>
</html>
Has puesto dos INPUT llamados Nombre. El INPUT de usuario tenías que dejarlo como estaba, el que tenías que cambiar era el de Nombre.
Ufff es verdad... he echo un poco de todo pero no me sale; ¿no te importaría colocarme el código.. no me termina de funcionar.. he cambiado el form de los campos para más claridad, creo que algo más pasa.. perdona por abusar de tu paciencia.
<html>
<head>
<title>Ejemplo JavaScript</title>
<script language="JavaScript">
function Extraer(form) {
form.usuario.value = form.Nombre.value.substring(0, 3);
}
</script>
</head>
<body>
<form>
<blockquote>
<p>Campo Nombre:
<INPUT name="Nombre" type="text" id="Nombre" size=20>
</p>
<p>Campo usuario :
<INPUT name="usuario" type="text" id="usuario" size=20 onKeyUp="Extraer(form)">
<center>
</form>
</body>
</html>
El onKeyUp tiene que ir en el campo Nombre, no en usuario.
Te recomiendo que uses JQUERY.
Adjunto código jquery
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#DescProd").keyup(function() {
var valorInput = $("#DescProd").val();
$("#usuario").attr('value', valorInput.substring(0, 3))
});
});
</script>
Este es el ejemplo de la función, recuerda que tienes que descargar jquery-1.4.2.min.js,
<p>Introducir Nombre:
<INPUT type="text" name="Nombre" size="20" id="DescProd">
</p>
<p>El Usuaruio es :
<INPUT name="usuario" type="text" id="usuario" size=20></p>
<center>
Notas:
Los controles deben de tener un id.
El nombre de los controles deben ser en minúscula.
Después del signo igual abren comillas y cierran.