Bienvenidos a Trocitos de programación


Bienvenidos a Trocitos de programación (En construcción)
Creo este blog para hacer como un pequeño repositorio de pequeños scripts o trocitos de código que he utilizado en algún momento y pueden ser útiles para otras personas o para mi mismo en algún momento.
Aclarar que no soy ningún experto en la materia ni mucho menos y que tampoco no todos los códigos estarán hechos por mi en su totalidad sino que igual en su momento busque una solución y encontre la solución completa o parcial.
(por esto pido comprensión si alguna vez alguien ve algun trocito que él mismo puso en algun foro ya que no puedo tener las fuentes de todas las cosas que he sacado de internet, si se diera el caso, el propietario que deje un comentario publicando su desaprobación de que yo publique ese contenido junto con un enlace al lugar en el que él lo publico, y mis más sinceras disculpas).

miércoles, 18 de enero de 2012

Control numérico en Javascript

Con este trocito de codigo podemos controlar que el valor introducido en un input text esté compuesto totalmente por números:
Ejemplo:
Introduce un Número:

Codigo HTML:

<div style="background-color: #cccccc; margin: 10px; padding: 10px;">
       <div>
              <form name="ejControlNum">
                     Introduce un Número:
                     <input name="num" type="text" />
              </form>
              <input onclick="controlNum()" type="button" value="Comprobar" />
       </div>
</div>
Codigo Javascript:

var numeros="0123456789.,";
function controlNum(){

       var num= document.ejControlNum.num.value;
       if(num.length==0){  //Miramos que este rellenado el campo
              alert("Rellena el campo");
              return false;
       }
       for(i=0;i<num.length;i++){
              car=numeros.indexOf(num[i],0);       //Busca el caracter número 'i' dentro de la cadena numeros
              if(car==-1){
                      alert("El contenido debe de ser un numero");
                      return false;
              }
       }
}

Bueno ahí lo dejo, seguro que hay alguna forma mejor o más optima pero yo lo resolví así, si alguien quiere poner un comentario explicando una forma mejor que no se vea cohibido puesto que la función de este blog es ayudar y mejorar en la medida de lo posible.

Un saludo.

martes, 17 de enero de 2012

Multiplicar o duplicar div con javascript

Con este trocito de codigo podemos duplicar o multiplicar campos de un formulario simplemente metiendolos dentro de un div:
Ejemplo:

Numero de inputs:

Código HTML:

<div>
      <form name="ejMultiInput">
             Numero de inputs:
             <input maxlength="2" name="numInputs" onkeyup="multiplicarInputs(this)" size="5" type="text" />
             <br />
             <div id="divMultiInputs">
             </div>
             <input onclick="controlMultiInput()" type="button" value="Comprobar" />
      </form>
</div>
Código Javascript:

function multiplicarInputs(text){
      var num= text.value
      var div='';
      for (var i=0;i<num;i++){ 
           var cont=i+1;
           div+="<br> Input text "+cont+"<input maxlength='5' name='inputTextMulti[]' size='6' type='text' />&nbsp;";
      }

      document.getElementById("divMultiInputs").innerHTML=div;
}
Y para realizar la recogida de datos:
En Javascript:

function controlMultiInput(){
      var numI=document.ejMultiInput.numInputs.value;
      if (numI.length<1){ 
            alert('Especifica el numero de Input text que quieres'); 
            return false;
      }
      var text=document.ejMultiInput.elements['inputTextMulti[]'];     //text sera un array de inputs text
      if(text.length){                        //si devuelve algo es porque tiene mas de 1 elemento por lo que sera un array
            for (var i=0;i<numI;i++){
                  var cont=i+1;
                  if(text[i].value.length<1){alert('Debes introducir contenido del Input text '+cont); return false;}
            }
      }else{
            if(text.value.length<1){
                  alert('Debes rellenar el unico Input text');
                  return false;
            }
      }
      alert('Formulario correcto');
}
En PHP:

$inputs=$_POST['inputTextMulti'];
for ($i=0; $i<count($inputs);$i++){
      $cont=$i+1;
      if (empty($inputs[$i])){
            $fallos.="<br>Debes rellenar introducir contenido para el Input text $cont.";
      }
}
if ($fallos!=""){
      echo $fallos;
}else{
    .... RESTO DEL PROGRAMA

Bueno ahí lo dejo, seguro que hay alguna forma mejor o más optima pero yo lo resolví así, si alguien quiere poner un comentario explicando una forma mejor que no se vea cohibido puesto que la función de este blog es ayudar y mejorar en la medida de lo posible.

Un saludo.

lunes, 16 de enero de 2012

Ocultar y mostrar div con javascript

Con este trocito de código podemos ocultar o mostrar un div u otro dependiendo el valor seleccionado en un select option de HTML, simplemente cambia la propiedad CSS del div(para ver este ejemplo usando JQuery visita esta entrada):
Ejemplo:
Nuestro numero de cuenta es: 000000000000000000000

Codigo HTML:

<div>
      <div>
           <SELECT NAME="pago" onChange="pagoOnChange(this)">
              <OPTION VALUE="transferencia">Transferéncia</OPTION>
              <OPTION VALUE="tarjeta">Pago con tarjeta</OPTION> 
           </SELECT>
      </div>
      <div id="nCuenta" style="display:none;">
           Nuestro numero de cuenta es: 000000000000000000000
      </div>
      <div id="nTargeta" style="display:;">
           <br>
           Numero*
           <br>
           <input type='text' name='nTarjeta'size='20' maxLength='60'>
           <br><br>
           Titular*
           <br>
           <input type='text' name='titularTarjeta'size='20' maxLength='60'>
           <br><br>
           Numero de seguridad*
           <input type='text' name='numeroSeguridad'size='3' maxLength='3'>
      </div>
</div>
Codigo Javascript:

function pagoOnChange(sel) {
      if (sel.value=="transferencia"){
           divC = document.getElementById("nCuenta");
           divC.style.display = "";

           divT = document.getElementById("nTargeta");
           divT.style.display = "none";

      }else{

           divC = document.getElementById("nCuenta");
           divC.style.display="none";

           divT = document.getElementById("nTargeta");
           divT.style.display = "";
      }
}
Bueno ahí lo dejo, seguro que hay alguna forma mejor o más optima pero yo lo resolví así, si alguien quiere poner un comentario explicando una forma mejor que no se vea cohibido puesto que la función de este blog es ayudar y mejorar en la medida de lo posible.

Un saludo.