Anexo II: Más rutinas Javascript

6 casos más de uso de rutinas con formularios.

11. Aumenta o disminuye un valor

 

<script languaje="javascript">

function validaCantidad(form)

{

    if(form.cantidad.value < 1)
    {
    form.cantidad.value = 1;
    alert("No puede comprar menos de 1 producto");
    }
   

    if(form.cantidad.value > 10)
    {
    form.cantidad.value = 10;
    alert("La cantidad máxima de productos a comprar es de 100 productos");
    }
}

</script>

 

<form name="ejemplo15" method="POST" action="pagina.htm" target="_blank">

Producto seleccionado: <b>COD. 7548-65 CD-R IPC</b> Cantidad:

<input type="text" name="cantidad" value="1" size="2" ReadOnly>
<input type="button" value="aumentar" onClick="ejemplo15.cantidad.value++; validaCantidad(this.form)">
<input type="button" value="disminuir" onClick="ejemplo15.cantidad.value--;" validaCantidad(this.form)>
</form>

 

Producto seleccionado: COD. 7548-65 CD-R IPC Cantidad:

 

12. Cuenta la cantidad de palabras introducidas en un textarea

 

<script languaje="javascript">

function contarPalabras(form)

{
texto = form.mensaje.value
texto = texto.split(" ")
form.cantidad.value=texto.length
}
</script>

 

<form name="ejemplo16" method="POST" action="pagina.htm" target="_blank">

<b>Por favor, redacte aquí su mensaje</b> Palabras escritas:

<input type="text" name="cantidad" value="0" size="2"><br>

<textarea rows="4" cols="35" name="mensaje" onKeyPress="contarPalabras(this.form); if (event.keycode1 == 13) form.mensaje.value +=' ';"></textarea><br>

<input type="submit" value="Enviar">

</form>

 

Por favor, redacte aquí su mensaje Palabras escritas:

 

13. Muestra o esconde el botón "submit"

Esconde el botón submit si los campos están vacíos

 

<script languaje="javascript">
function esconde(form)
{
    if ((form.nombre.value != "") && (form.apellido.value != ""))
    { form.enviar.style.visibility = "visible"; }

    else {
    form.enviar.style.visibility = "hidden"; }
}
</script>


<form name="ejemplo17" method="POST" action="pagina.htm" target="_blank">
Nombre: <input type="text" name="nombre" size="20" onKeyUp="esconde(this.form)"><br>
Apellido: <input type="text" name="apellido" size="20" onKeyUp="esconde(this.form)"><br>
<input type="submit" name="enviar" value="Enviar" style="visibility: hidden">
</form>

 

Nombre:
Apellido:


14. Habilita o deshabilita el botón "submit"

Deshabilita el botón submit si los campos están vacíos

 

<script languaje="javascript">
function deshabilita(form)
{
    if ((form.nombre.value != "") && (form.apellido.value != ""))
    { form.enviar.disabled = false; }

    else {
    form.enviar.disabled = true; }
}
</script>


<form name="ejemplo18" method="POST" action="pagina.htm" target="_blank">
Nombre: <input type="text" name="nombre" size="20" onKeyUp="deshabilita(this.form)"><br>
Apellido: <input type="text" name="apellido" size="20" onKeyUp="deshabilita(this.form)"><br>
<input type="submit" name="enviar" value="Enviar" disabled>
</form>

 

Nombre:
Apellido:

 

15. Mensaje de confirmación al borrar un formulario

 

<script languaje="javascript">
function ConfirmarBorrado(form)
{
borrar = window.confirm('Se borrarán todos los datos del formulario');
(borrar)?form.reset():'return false';
}
</script>
 

<form name="ejemplo19" method="POST" action="pagina.htm" target="_blank">

Nombre: <input type="text" name="nombre" size="20"><br>
Apellido: <input type="text" name="apellido" size="20"><br>
<input type="button" value="Borrar" onClick="ConfirmarBorrado(this.form)">

</form>

 

Nombre:
Apellido:

 

16. Mensaje de confirmación al enviar un formulario

 

<script languaje="javascript">
function ConfirmarEnvio(form)
{
enviar = window.confirm('Se enviarán todos los datos del formulario');
(enviar)?form.submit():'return false';
}
</script>
 

<form name="ejemplo20" method="POST" action="pagina.htm" target="_blank">

Nombre: <input type="text" name="nombre" size="20"><br>
Apellido: <input type="text" name="apellido" size="20"><br>
<input type="button" value="Enviar" onClick="ConfirmarEnvio(this.form)">

</form>

 

Nombre:
Apellido:

 

 

 

Autor

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Compartir

Comentarios

Lucy Aguirre

17/6/2005
Este manual y las rutinas me han parecido muy interesantes...Sólo una observación sobre las rutinas expuestas: Para los principiantes, como yo, sería de agradecer que explicaran si la rutina se inserta entre <Head> y </Head> ó entre <Body> y </body>

Antuan

20/5/2006
Hola que tal?
Estoy desarrollando una aplicación y necesito insertar un formulario que deje al usuario la opcion de incrementar/decrementar el valor que hay en un input text mediante el comando onclick, pero cuando lo clicko solo me dice: juan.cantidad es nulo o no es un objeto, os adjunto el codigo:

<form id="juan" method="POST" action="{LINK}">
Cantidad:
<input type="text" id="cantidad" value="1" size="1" maxlength="2" readonly="readonly" />
<input type="button" name="mas" value="+" onclick="juan.cantidad.value++"/>
</form>

he probado con el atributo id y con el atributo name, pero nada: ¿Alguna idea brillante?

Otra pregunta: ¿Cómo lo recogeré en la siguiente pantalla?, porque este formulario no tiene ningun submit.

Gracias de antemano.

kokin

13/6/2006
alguien me puede ayudar en esto de los formularios ¿como le hago para que solo se manden los campos que se llenaron?

Jose

05/7/2007
Muchas Gracias encontre lo que necesitaba, gracias a este foro!! Desde Panamá. Bless

jesusserafin

07/12/2011
incremento diferente de 1
que tal
tienes un codigo para aumenta o disminuir un valor en una unidad y quisiera saber como se prodria modificar este codigo para aumentar de 2 en 2 o de cierto incremento que uno decee. hasta luego